/* ================= RESET ================= */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

body{
    background: linear-gradient(
        180deg,
        #F4EEDC 0%,
        #E9DFC7 50%,
        #DDD2B8 100%
    );
    color: #2E2A26;
    padding-top: 90px; /* navbar height */
}



/* ================= NAVBAR ================= */
.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;

    padding: 0 50px;
    background: linear-gradient(90deg, #3B2F2F, #2E2424);

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

    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    z-index: 1000;
}

.nav-left{
    display: flex;
    align-items: center;
    gap: 1px;
    font-weight: 900;
    color: #E9DFC7;
}

.nav-logo{
    height: 70px;
    width: auto;
    object-fit: contain;
}

/* MENU */
.nav-menu{
    list-style: none;
    display: flex;
    gap: 32px;
}

.nav-menu a{
    text-decoration: none;
    color: #E9DFC7;
    font-weight: 600;
    position: relative;
    transition: color .3s;
}

.nav-menu a:hover{
    color: #E6B566;
}

.nav-menu a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 3px;
    background: #E6B566;
    border-radius: 10px;
    transition: .3s;
}

.nav-menu a:hover::after{
    width: 100%;
}

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


/* ================= HERO BACKGROUND BLUR ================= */

.hero{
    min-height:100vh;
    padding-top:120px;

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

    text-align:center;

    position:relative;
    overflow:hidden;
}

/* background map */    
.hero::before{
    content:'';
    position:absolute;
    inset:0;

    background-image:url('/0079771493/asset_frontend/img/hadeh1.jpg');
    background-size:cover;
    background-position:center;

    filter:blur(7px);
    transform:scale(1.12);

    z-index:0;
}

/* glow tengah */
.hero::after{
    content:'';
    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at center,
        rgba(255,255,255,0.15),
        transparent 60%),

        linear-gradient(
        to bottom,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.15) 60%,
        rgba(244,238,220,1) 100%
        );

    z-index:1;
}

.hero > *{
    position:relative;
    z-index:2;
}

.hero-logo{
    width: 500px;
    max-width: 90%;
    margin-bottom: 16px;
}

.hero h1{
    font-size:56px;
    margin-bottom:16px;

    color:#F6EED9;

    letter-spacing:2px;

    text-shadow:
        0 10px 30px rgba(0,0,0,.7),
        0 3px 10px rgba(0,0,0,.5);
}

.hero p{
    max-width: 650px;
    font-size: 16px;
    color: #475569;
    line-height: 1.9;
}

/* CTA */
.hero .cta{
    margin-top: 36px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-primary,
.btn-secondary{
    background: linear-gradient(135deg,#F59E0B,#D97706);
    color: #3A2A00;

    padding: 14px 28px;
    border-radius: 16px;
    font-weight: 800;
    text-decoration: none;

    box-shadow: 0 10px 24px rgba(245,158,11,.35);
    transition: .3s ease;
}

.btn-primary:hover,
.btn-secondary:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(245,158,11,.45);
}

.hero{
    margin-bottom:120px;
}

/* ================= SECTION ================= */
.section{
    position:relative;

    padding:100px 60px;
    max-width:1100px;

    margin:120px auto;
    
    background:linear-gradient(
        180deg,
        rgba(255,249,235,.9),
        rgba(233,223,199,.95)
    );

    border-radius:40px;

    backdrop-filter: blur(8px);

    box-shadow:
        0 30px 80px rgba(47,62,52,.2);

    transition:.4s;
}

/* hoper */
/*.section:hover{
    transform:translateY(-6px) scale(1.01);
}*/

.section h2{
    font-size: 36px;
    margin-bottom: 24px;
    color: #2F3E34;
    letter-spacing: .5px;
}

.section::before{
    content:'';
    position:absolute;
    inset:-20px;

    background:radial-gradient(
        circle,
        rgba(201,162,77,0.2),
        transparent 70%
    );

    z-index:-1;
}

.section h2::after{
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #C9A24D;
    margin: 16px auto 5;
    border-radius: 10px;
}

.section p{
    color: #475569;
    line-height: 1.9;
    font-size: 18px;
}


/* ================= COMPONENT GRID ================= */
.component-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 40px;
    margin-top: 80px;
}

/* ================= COMPONENT CARD ================= */
.component-card{
    background: linear-gradient(
        180deg,
        #FDFBF5,
        #EFE6CF
    );

    padding: 28px;
    border-radius: 26px;

    border: 1px solid #D6C7A1;

    box-shadow:
        0 20px 40px rgba(47,62,52,.25),
        inset 0 1px 0 rgba(255,255,255,.7);

    transition: .35s ease;
}

.component-card:hover{
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 32px 64px rgba(47,62,52,.35);
}

/* ================= IMAGE WRAPPER (FIX UTAMA) ================= */
.component-img{
    width: 100%;
    height: 240px;

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

    background: #E6DDC4;
    border-radius: 16px;

    padding: 12px;
    overflow: hidden;
}

.component-img img{
    max-width: 100%;
    max-height: 100%;

    object-fit: contain; 
    display: block;

    transition: .3s ease;
}

/* ================= HOVER EFFECT ================= */
.component-card:hover .component-img img{
    transform: scale(1.05);
}

/* ================= TEXT ================= */
.component-card h3{
    margin-top: 14px;
    font-size: 18px;
}

.component-card p{
    margin-top: 10px;
    color: #475569;
    line-height: 1.7;
}
/* ================= ABOUT ME ================= */

.about-me{
    padding:80px 60px;
    text-align:left; /* override dari .section */
}

.about-me h2::after{
    margin-left:0; /* garis ikut kiri */
}

.about-container{
    display:flex;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

/* FOTO */
.about-img img{
    width:260px;
    border-radius:24px;

    box-shadow:0 20px 40px rgba(0,0,0,.25);
    transition:.3s;
}

.about-img img:hover{
    transform:scale(1.05);
}

/* TEXT */
.about-text{
    flex:1;
    min-width:280px;
}

.about-text h2{
    text-align:left;
}

.about-text p{
    text-align:left;
    margin-top:14px;
}
/* ================= FOOTER ================= */

.footer{
    background: linear-gradient(90deg,#3B2F2F,#2E2424);
    color:#E9DFC7;

    margin-top:100px;
    padding:60px 40px 20px;
}

/* layout */
.footer-container{
    max-width:1200px;
    margin:auto;

    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

/* brand */
.footer-brand{
    flex:1;
    min-width:250px;
}

.footer-brand h3{
    margin-bottom:12px;
}

.footer-brand p{
    font-size:14px;
    line-height:1.7;
    color:#d6cfc2;
}

/* links */
.footer-links{
    min-width:160px;
}

.footer-links h4{
    margin-bottom:12px;
}

.footer-links ul{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:8px;
}

.footer-links a{
    text-decoration:none;
    color:#E9DFC7;
    font-size:14px;
    transition:.2s;
}

.footer-links a:hover{
    color:#E6B566;
}

/* contact */
.footer-contact{
    min-width:200px;
}

.footer-contact h4{
    margin-bottom:12px;
}

.footer-contact p{
    font-size:14px;
    margin-bottom:6px;
    color:#d6cfc2;
}

/* bottom */
.footer-bottom{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.1);

    text-align:center;
    font-size:13px;
    color:#cfc7b8;
}

/* ================= MERCH SECTION ================= */
.merch-section{
    max-width:1200px;
    margin:120px auto;
    padding:48px;
    background: linear-gradient(180deg, #FFF9EB, #F6EED9);
    border-radius:36px;
    box-shadow:0 40px 80px rgba(0,0,0,.18);
}

.merch-section h2{
    text-align:center;
    margin-bottom:8px;
    font-size:30px;
}

.subtitle{
    text-align:center;
    color:#6b7280;
    margin-bottom:48px;
}

/* ================= GRID ================= */
.merch-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 40px;
    margin-top: 80px;
}

/* ================= CARD - SAMA KAYAK BOARDGAME ================= */
.merch-card{
    background: linear-gradient(
        180deg,
        #FDFBF5,
        #EFE6CF
    );

    padding: 28px;
    border-radius: 26px;

    border: 1px solid #D6C7A1;

    box-shadow:
        0 20px 40px rgba(47,62,52,.25),
        inset 0 1px 0 rgba(255,255,255,.7);

    transition: .35s ease;
}

.merch-card:hover{
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 32px 64px rgba(47,62,52,.35);
}

.merch-card img{
    width: 100%;
    max-height: 260px;
    object-fit: contain;

    border-radius: 18px;
    background: #E6DDC4;
    padding: 12px;
}

/* ================= IMAGE ================= */
.merch-card img{
    width:100%;
    max-height:260px;
    object-fit:contain;

    background:#EFE6CF;
    padding:18px;

    border-radius:22px;
}

/* ================= TEXT ================= */
.merch-card h3{
    margin:10px 0 2px;
}

.jenis{
    font-size:16px;
    color:#6b7280;
}

.desc{
    font-size:15px;
    color:#374151;
    margin:14px 0;
    line-height:1.6;
}

/* ================= EMPTY ================= */
.empty{
    text-align:center;
    color:#6b7280;
}

/* ================= GLOBAL BUY BUTTON ================= */
.buy-global{
    margin-top:60px;
    display:flex;
    justify-content:center;
}

.btn-buy-global{
    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 48px;
    background: linear-gradient(135deg, #25D366, #1EBE5D);
    color:#fff;
    font-weight:800;
    font-size:16px;
    border-radius:16px;
    text-decoration:none;

    box-shadow:0 18px 35px rgba(37,211,102,.45);
    transition:.3s ease;
}

.btn-buy-global:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 24px 45px rgba(37,211,102,.55);
}

.wa-icon{
    width:22px;
    height:22px;
    object-fit:contain;
}

.stok{
    font-weight:700;
}

/* READY */
.stok.ready{
    color:#16a34a;
}

/* HAMPIR HABIS */
.stok.warning{
    color:#f59e0b;
}

/* HABIS */
.stok.habis{
    color:#dc2626;
}
html{
    scroll-behavior: smooth;
}
#merchandise{
    scroll-margin-top: 100px;
}

#about .btn-readmore{
    display: inline-block; 

    margin-top: 20px;
    margin-left: auto;

    padding: 10px 18px;
    border-radius: 999px;

    background: linear-gradient(135deg, #8B5E34, #C9A66B);
    color: #fff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: .3s ease;
}

#about .btn-readmore:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* SOCIAL BUTTON */
.social-buttons {
    margin-top: 10px;
}

.btn-ig {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 8px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
    color: white;

    transition: 0.3s ease;
}

.btn-ig img {
    width: 18px;
    height: 18px;
}

.btn-ig:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

@media (max-width:768px){
    .cards{
        grid-template-columns:1fr; /* jadi 1 kolom */
    }
}