/* ==========================================================================
   RESET & GLOBAL STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #f2eae1;
    color: #000;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Buttons */
.btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.btn-outline { background: transparent; border: 1px solid #000; color: #000; }
.btn-dark { background: #000; color: #fff; }
.btn-nude { background: #c6b8a8; color: #000; }
.btn-white { background: #fff; color: #000; }
.btn-outline-white { background: transparent; border: 1px solid #fff; color: #fff; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    font-size: 14px;
}

/* Image Placeholder */
.img-placeholder {
    background-color: #d1ced0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a0a0;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e0d8cf;
}

.logo {
    font-family: cursive;
    font-size: 28px;
    font-weight: bold;
}

.nav-links {
    display: flex;
    gap: 30px;
    font-weight: 500;
    font-size: 15px;
}

.nav-links li.active { font-weight: bold; }

/* Mega Menu */
.mega-menu {
    border-bottom: 1px solid #000;
    padding: 40px 0;
    background-color: #f2eae1;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.menu-col h5 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}

.menu-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.menu-item i { font-size: 20px; margin-top: 2px; }
.menu-item strong { display: block; font-size: 15px; margin-bottom: 3px; }
.menu-item p { font-size: 13px; color: #555; }

/* Sub-header */
.sub-header {
    background-color: #fff;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

.sub-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-actions { display: flex; gap: 20px; }

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    text-align: center;
    padding: 80px 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.hero p {
    font-size: 1.1rem;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ==========================================================================
   FEATURES SECTION
   ========================================================================== */
.section-title-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

.section-tag {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.section-title {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.section-subtitle { color: #555; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.feature-card {
    background-color: #8c8b8c;
    color: #fff;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.feature-card i.fa-box { font-size: 24px; margin-bottom: 25px; }
.feature-card h3 { font-size: 1.4rem; margin-bottom: 15px; }
.feature-card p { font-size: 0.95rem; color: #ebebeb; flex-grow: 1; }
.feature-card .link-arrow { color: #fff; margin-top: 20px; }

/* ==========================================================================
   COLLECTIONS SECTION
   ========================================================================== */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.tent-card { text-align: center; }
.tent-card .img-placeholder {
    aspect-ratio: 4/5;
    margin-bottom: 15px;
    font-size: 40px;
}

.tent-card h4 { font-size: 1rem; font-weight: bold; margin-bottom: 5px; }
.tent-card .spec { font-size: 0.8rem; color: #555; margin-bottom: 8px; }
.tent-card .price { font-size: 1.1rem; font-weight: bold; }

.view-all-btn { text-align: center; margin-bottom: 100px; }

/* ==========================================================================
   DETAILS (WHAT COMES WITH PACKAGE)
   ========================================================================== */
.details-intro {
    text-align: center;
    margin-bottom: 40px;
}

.details-tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 50px;
}

.tab {
    padding: 10px 5px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab.active {
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #000;
}

.details-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
}

.details-text .tag { font-size: 12px; font-weight: bold; margin-bottom: 15px; display: block; }
.details-text h3 { font-size: 2rem; margin-bottom: 20px; line-height: 1.2; }
.details-text p { color: #444; line-height: 1.6; margin-bottom: 30px; }
.details-actions { display: flex; align-items: center; gap: 20px; }

.details-image {
    aspect-ratio: 1/1;
    font-size: 60px;
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta-box {
    background-color: #8c8b8c;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
}

.cta-icon-bg {
    position: absolute;
    font-size: 150px;
    color: rgba(255, 255, 255, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.cta-content { position: relative; z-index: 2; }
.cta-content h2 { font-size: 2.5rem; margin-bottom: 15px; }
.cta-content p { margin-bottom: 30px; color: #eaeaea; }
.cta-actions { display: flex; justify-content: center; gap: 15px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
    background-color: #e3dcd1;
    padding: 60px 0 30px 0;
    border-top: 1px solid #d1c8bd;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.newsletter-info h4 { font-size: 16px; margin-bottom: 5px; }
.newsletter-info p { font-size: 14px; color: #555; }

.newsletter-form { display: flex; gap: 10px; margin-bottom: 10px; }
.newsletter-form input { padding: 12px 15px; border: 1px solid #aaa; background: transparent; width: 250px; }
.newsletter-form button { padding: 12px 20px; background: #fff; border: 1px solid #000; cursor: pointer; font-weight: bold; }
.privacy-note { font-size: 11px; color: #666; }

.footer-divider {
    border: 0;
    border-top: 1px solid #c9c1b7;
    margin: 40px 0;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.footer-col h5 { font-size: 14px; margin-bottom: 20px; font-weight: bold; }
.footer-col ul li { margin-bottom: 12px; font-size: 13px; }
.footer-col ul li a { color: #333; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.copyright { font-size: 13px; color: #555; }

/* Responsive */
@media (max-width: 768px) {
    .features-grid, .collections-grid, .details-split, .mega-menu-grid, .footer-links-grid {
        grid-template-columns: 1fr;
    }
    .nav-links, .auth-buttons, .sub-actions, .footer-top {
        display: none;
    }
}
/* ==========================================================================
   MEGA MENU DROPDOWN ANIMATION
   ========================================================================== */

/* Asal: Sembunyikan menu dan naikkan ke atas sedikit */
.mega-menu {
    position: absolute; /* Supaya dropdown terapung di bawah navbar */
    top: 100%; /* Turun tepat di bawah navbar */
    left: 0;
    width: 100%;
    background-color: #f2eae1;
    border-top: 1px solid #dcd1c4;
    border-bottom: 1px solid #000;
    z-index: 1000;
    
    /* Animasi */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Naik ke atas sikit */
    transition: all 0.3s ease-in-out; /* Kesan pergerakan lancar */
}

/* Apabila kelas 'show' ditambah melalui JavaScript */
.mega-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Turun ke posisi asal */
}

/* Pastikan nav-wrapper di set relative supaya mega menu absolute berfungsi dengan betul */
.nav-wrapper {
    position: relative;
}

/* Gaya ikon Chevron supaya terbalik (pusing) bila dropdown dibuka */
.chevron-icon {
    transition: transform 0.3s ease;
}

.dropdown-toggle.active .chevron-icon {
    transform: rotate(180deg);
}
/* Tambah ruang di bawah header sahaja */
header {
    margin-bottom: 60px; /* Tukar 60px kepada nilai lain jika mahu lebih/kurang jarak */
}
/* Tambah ini di bawah bahagian Collections Section */
.tent-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

/* Kesan hover (opsyenal: untuk nampak lebih interaktif bila mouse lalu) */
.tent-link:hover {
    transform: translateY(-5px);
}

.tent-link:hover .tent-card {
    border-color: #000; /* Tukar border jadi hitam bila hover */
}
/* ==========================================================
   MOBILE RESPONSIVE DESIGN
   Desktop layout kekal sama
   ========================================================== */

@media (max-width:768px){

    /* Container */
    .container{
        padding:0 20px;
        width:100%;
    }


    /* ================= HEADER ================= */

    .header-top{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .logo{
        font-size:24px;
    }

    .nav-links{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
        font-size:14px;
    }

    .auth-buttons{
        display:flex;
        justify-content:center;
    }


    /* ================= MEGA MENU ================= */

    .mega-menu{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        display:none;
    }

    .mega-menu-grid{
        grid-template-columns:1fr;
        gap:20px;
    }


    /* ================= SUB HEADER ================= */

    .sub-header-content{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .sub-actions{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }



    /* ================= HERO ================= */

    .hero{
        padding:50px 20px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero p{
        font-size:1rem;
    }



    /* ================= FEATURES ================= */

    .features-grid{
        grid-template-columns:1fr;
        gap:20px;
    }


    .feature-card{
        padding:30px 25px;
        min-height:auto;
    }



    /* ================= COLLECTIONS ================= */

    .collections-grid{
        grid-template-columns:1fr;
        gap:30px;
    }


    .tent-card .img-placeholder{
        aspect-ratio:4/5;
    }



    /* ================= DETAILS ================= */

    .details-tabs{
        flex-wrap:wrap;
        gap:15px;
    }


    .details-split{
        grid-template-columns:1fr;
        gap:30px;
    }


    .details-image{
        order:-1;
        font-size:50px;
    }


    .details-text h3{
        font-size:1.6rem;
    }


    .details-actions{
        flex-direction:column;
        align-items:flex-start;
    }



    /* ================= CTA ================= */

    .cta-box{
        padding:60px 20px;
    }


    .cta-content h2{
        font-size:2rem;
    }


    .cta-actions{
        flex-direction:column;
        align-items:center;
    }


    .cta-actions .btn{
        width:100%;
        max-width:300px;
    }



    /* ================= FOOTER ================= */

    footer{
        padding:40px 0 20px;
    }


    .footer-top{
        flex-direction:column;
        gap:30px;
        text-align:center;
    }


    .newsletter-form{
        flex-direction:column;
        align-items:center;
    }


    .newsletter-form input{
        width:100%;
        max-width:350px;
    }


    .newsletter-form button{
        width:100%;
        max-width:350px;
    }


    .footer-links-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }


    .footer-bottom{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

}



/* ==========================================================
   SMALL PHONE
   ========================================================== */

@media(max-width:480px){


    .hero h1{
        font-size:1.7rem;
    }


    .section-title{
        font-size:1.7rem;
    }


    .footer-links-grid{
        grid-template-columns:1fr;
    }


    .btn{
        padding:10px 18px;
    }

}