/* =========================================
   PAPUA VIBE - HOME CSS
   Modern Ecommerce UI
========================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

/* ================= ROOT ================= */

:root{

    --primary:#1F6F43;
    --primary-dark:#174F30;
    --secondary:#9B6B43;
    --cream:#F8F5EF;
    --light:#FFFFFF;
    --dark:#222222;
    --gray:#777777;
    --border:#E8E8E8;

    --shadow:0 10px 30px rgba(0,0,0,.08);
    --shadow-hover:0 18px 45px rgba(0,0,0,.15);

    --radius:18px;

    --transition:.35s ease;

}

/* ================= RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:var(--cream);

    color:var(--dark);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}

/* ===========================
   BODY
=========================== */

/* ===========================
   CONTAINER
=========================== */

/*==================================
NAVBAR
==================================*/

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#ffffff;
    padding:18px 0;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    z-index:9999;
}

.navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo a img{
    width:65px;
}

.logo h2{
    margin:0;
    font-size:32px;
    color:#214d2f;
    font-weight:700;
}

.logo p{
    margin:0;
    color:#8b5e34;
    font-size:14px;
}

.nav-menu{
    display:flex;
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-menu li{
    list-style:none;
}

.nav-menu a{
    text-decoration:none;
    color:#333;
    font-weight:600;
    position:relative;
}

.nav-menu a:hover,
.nav-menu a.active{
    color:#1f6f43;
}

.nav-menu a.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:100%;
    height:3px;
    background:#1f6f43;
    border-radius:10px;
}

.cart-btn{
    width:58px;
    height:58px;
    background:#1f6f43;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-decoration:none;
    position:relative;
    font-size:22px;
}

.cart-btn span{
    position:absolute;
    right:-6px;
    top:-6px;
    width:22px;
    height:22px;
    background:#fff;
    color:#1f6f43;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-weight:bold;
}

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

.hero{
    background:#f8f6f1;
    padding:140px 0 80px;
    overflow:hidden;
}

.hero-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.hero-left{
    width:50%;
}

.hero-right{
    width:50%;
    display:flex;
    justify-content:center;
}

.hero-badge{
    display:inline-block;
    padding:10px 20px;
    background:#eef7ee;
    color:#1f6f43;
    border-radius:50px;
    border:1px solid #d8e8d8;
    font-weight:600;
    margin-bottom:25px;
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:68px;
    line-height:1.1;
    color:#214d2f;
    margin-bottom:15px;
}

.hero h2{
    color:#8b5e34;
    font-size:34px;
    font-weight:600;
    margin-bottom:25px;
}

.hero p{
    font-size:18px;
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
}

.hero-feature{

display:flex;

gap:25px;

margin-bottom:40px;

flex-wrap:wrap;

}

.feature{

display:flex;

align-items:center;

gap:15px;

background:#fff;

padding:12px 18px;

border-radius:14px;

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

}

.feature span{

font-size:30px;

}

.feature h5{

margin:0;

font-size:16px;

font-weight:600;

}

.feature p{

margin:0;

font-size:13px;

color:#777;

}

.hero-button{

display:flex;

gap:20px;

margin-top:15px;

}

.btn-primary{

background:#1f6f43;

color:#fff;

padding:16px 35px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

background:#174f30;

transform:translateY(-3px);

}

.btn-outline{

padding:16px 35px;

border-radius:50px;

border:2px solid #1f6f43;

color:#1f6f43;

font-weight:600;

transition:.35s;

}

.btn-outline:hover{

background:#1f6f43;

color:#fff;

}

.hero-image{

position:relative;

width:550px;

height:550px;

overflow:hidden;

border-radius:40% 60% 50% 50% / 40% 40% 60% 60%;

box-shadow:0 30px 60px rgba(0,0,0,.15);

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.hero-image:hover img{

transform:scale(1.08);

}

/*==================================
FEATURE
==================================*/

.feature-section{

padding:90px 0;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:50px;

}

.feature-card{

background:#fff;

padding:35px;

border-radius:25px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.feature-icon{

width:75px;

height:75px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

background:#eef7ee;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

}

.feature-card h4{

margin-bottom:12px;

color:#214d2f;

}

.feature-card p{

color:#666;

line-height:1.7;

}

/*====================================
ABOUT
====================================*/

.about{

padding:100px 0;

}

.about-wrapper{

display:flex;

align-items:center;

gap:70px;

}

.about-image{

width:50%;

}

.about-image img{

width:100%;

border-radius:35px;

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

}

.about-content{

width:50%;

}

.about-badge{

display:inline-block;

padding:10px 22px;

background:#eef7ee;

color:#1f6f43;

border-radius:40px;

margin-bottom:25px;

font-weight:600;

}

.about-content h2{

font-family:'Playfair Display';

font-size:46px;

margin-bottom:25px;

color:#214d2f;

}

.about-content p{

line-height:2;

color:#666;

margin-bottom:25px;

}

.about-content ul{

margin-bottom:35px;

}

.about-content li{

margin-bottom:12px;

font-size:18px;

}

/* ===========================
   BUTTON
=========================== */

/*=====================================
        STATISTIK
=====================================*/

.statistik{

margin-top:-40px;

margin-bottom:80px;

}

.statistik-wrapper{

background:#fff;

border-radius:25px;

padding:35px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.statistik .item{

text-align:center;

}

.statistik h2{

font-size:42px;

color:#1f6f43;

margin-bottom:8px;

}

.statistik p{

color:#666;

font-weight:500;

}

/*============================
KATEGORI
============================*/

.kategori{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-family:'Playfair Display';

font-size:48px;

color:#214d2f;

margin-bottom:10px;

}

.section-title p{

color:#777;

}

.kategori-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.kategori-card{

background:#fff;

border-radius:22px;

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.kategori-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.kategori-card img{

width:110px;

height:110px;

object-fit:cover;

border-radius:18px;

}

.kategori-text h3{

font-size:28px;

color:#214d2f;

margin-bottom:10px;

}

.kategori-text p{

margin-bottom:15px;

color:#777;

}

.kategori-text a{

color:#1f6f43;

font-weight:600;

}

/*=====================================
PRODUCT
=====================================*/

.produk{
    padding:90px 0;
}

.product-card{
    width:100%;
    height:100%;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    display:flex;
    flex-direction:column;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.product-image{
    position:relative;
    width:100%;
    height:250px;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.product-card:hover .product-image img{
    transform:scale(1.08);
}

.badge-new{
    position:absolute;
    left:15px;
    top:15px;
    background:#28a745;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.wishlist{
    position:absolute;
    right:15px;
    top:15px;
    width:42px;
    height:42px;
    border:none;
    background:#fff;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.product-content{
    padding:20px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.product-content h4{
    font-size:22px;
    color:#214d2f;
    margin-bottom:10px;
}

.rating{
    font-size:14px;
    color:#777;
    margin-bottom:15px;
}

.product-content h3{
    color:#1f6f43;
    font-size:28px;
    margin-bottom:20px;
}

.btn-detail{
    margin-top:auto;
    display:block;
    width:100%;
    text-align:center;
    background:#1f6f43;
    color:#fff;
    padding:14px;
    border-radius:40px;
    text-decoration:none;
    transition:.3s;
}

.btn-detail:hover{
    background:#174f30;
    color:#fff;
}

/*==================================
HALAMAN PRODUK
==================================*/

.produk-page{

padding:170px 0 100px;

}

.produk-page .produk-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.produk-page .produk-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.produk-page .produk-image{

position:relative;

height:270px;

overflow:hidden;

}

.produk-page .produk-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.produk-page .produk-card:hover .produk-image img{

transform:scale(1.08);

}

.badge-produk{

position:absolute;

left:15px;

top:15px;

background:#1f6f43;

color:#fff;

padding:6px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.wishlist{

position:absolute;

right:15px;

top:15px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#fff;

box-shadow:0 10px 20px rgba(0,0,0,.12);

cursor:pointer;

}

.produk-page .produk-body{

padding:22px;

}

.produk-page .produk-body h4{

font-size:22px;

color:#214d2f;

margin-bottom:10px;

}

.produk-rating{

font-size:14px;

color:#777;

margin-bottom:15px;

}

.produk-page .produk-body h3{

font-size:28px;

color:#1f6f43;

margin-bottom:15px;

}

.stok{

margin-bottom:20px;

color:#777;

}

.btn-produk{

display:block;

text-align:center;

padding:14px;

border-radius:35px;

background:#1f6f43;

color:#fff;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-produk:hover{

background:#174f30;

color:#fff;

}

/*=============================
DETAIL PRODUK
=============================*/

.detail-produk{

padding:90px 0;

background:#f7f5ef;

}

.product-image-box{

background:#fff;

padding:20px;

border-radius:25px;

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

}

.detail-img{

width:100%;

border-radius:20px;

transition:.4s;

}

.detail-img:hover{

transform:scale(1.03);

}

.product-info{
    padding:40px 30px 40px 80px;
}


.kategori-badge{

display:inline-block;

background:#edf7ef;

color:#1f6f43;

padding:8px 18px;

border-radius:40px;

font-weight:600;

margin-bottom:20px;

}

.product-title{

font-size:42px;

font-weight:700;

color:#214d2f;

margin-bottom:15px;

}

.rating-box{

font-size:18px;

margin-bottom:20px;

}

.rating-box span{

color:#777;

margin-left:8px;

}

.product-price{

font-size:42px;

color:#1f6f43;

font-weight:700;

margin-bottom:25px;

}

.info-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-bottom:25px;

}

.info-list div{

background:#fff;

padding:15px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.stok-box{

margin-bottom:25px;

font-size:18px;

}

.deskripsi-box{

background:#fff;

padding:20px;

border-radius:18px;

margin-bottom:30px;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.jumlah{

display:flex;

align-items:center;

gap:15px;

margin-bottom:30px;

}

.jumlah button{

width:45px;

height:45px;

border:none;

background:#1f6f43;

color:#fff;

border-radius:50%;

font-size:20px;

}

.jumlah input{

width:80px;

text-align:center;

border-radius:10px;

height:45px;

}

.btn-cart,

.btn-buy,

.btn-wa{

display:block;

padding:18px;

text-align:center;

border-radius:18px;

font-size:18px;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.btn-cart{

background:#f4b400;

color:#fff;

}

.btn-buy{

background:#1f6f43;

color:#fff;

}

.btn-wa{

background:#25D366;

color:#fff;

}

.btn-cart:hover,

.btn-buy:hover,

.btn-wa:hover{

transform:translateY(-3px);

}

/*===========================
TESTIMONI
===========================*/

.testimoni{

padding:100px 0;

}

.testimoni-card{

background:#fff;

padding:35px;

border-radius:30px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

height:100%;

transition:.35s;

}

.testimoni-card:hover{

transform:translateY(-8px);

}

.quote{

font-size:28px;

color:#ffc107;

margin-bottom:20px;

}

.komentar{

font-style:italic;

line-height:1.8;

margin-bottom:25px;

}

.profil{

display:flex;

align-items:center;

gap:15px;

}

.avatar{

width:60px;

height:60px;

border-radius:50%;

background:#1f6f43;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

font-weight:bold;

}

/*==========================
CART
==========================*/

.cart-page{

padding:90px 0;

background:#f7f5ef;

}

.cart-header{

text-align:center;

margin-bottom:50px;

}

.cart-header h1{

font-size:42px;

font-weight:700;

color:#214d2f;

}

.cart-header p{

color:#666;

font-size:18px;

}

.cart-card{

display:flex;

align-items:center;

justify-content:space-between;

background:#fff;

border-radius:25px;

padding:25px;

margin-bottom:25px;

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

}

.cart-image img{

width:140px;

height:140px;

object-fit:cover;

border-radius:20px;

}

.cart-info{

flex:1;

padding-left:30px;

}

.cart-info h3{

font-size:28px;

margin-bottom:10px;

color:#214d2f;

}

.cart-price{

font-size:28px;

color:#1f6f43;

font-weight:700;

margin:15px 0;

}

.cart-rating{

color:#888;

margin-bottom:10px;

}

.btn-delete{

background:#dc3545;

color:#fff;

padding:14px 24px;

border-radius:12px;

text-decoration:none;

}

.btn-delete:hover{

background:#b52b38;

color:#fff;

}

.cart-summary{

width:420px;

margin:50px auto;

background:#fff;

padding:30px;

border-radius:25px;

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

}

.summary-item{

display:flex;

justify-content:space-between;

margin:30px 0;

}

.btn-checkout{

display:block;

background:#1f6f43;

color:#fff;

text-align:center;

padding:18px;

border-radius:15px;

font-size:20px;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.btn-checkout:hover{

background:#184c31;

color:#fff;

}

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

.footer{

background:#173c28;

padding:80px 0 30px;

color:#fff;

margin-top:80px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-logo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.footer-logo img{

width:65px;

}

.footer-logo h3{

margin:0;

color:#fff;

font-size:28px;

}

.footer-logo span{

color:#d6d6d6;

}

.footer-text{

line-height:1.9;

color:#ddd;

margin-top:15px;

}

.footer h4{

margin-bottom:25px;

color:#fff;

}

.footer ul{

padding:0;

}

.footer li{

list-style:none;

margin-bottom:15px;

}

.footer a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#fff;

padding-left:8px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:20px;

}

.footer-social a{

width:45px;

height:45px;

background:rgba(255,255,255,.1);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

transition:.35s;

}

.footer-social a:hover{

background:#fff;

color:#173c28;

}

.footer hr{

margin:50px 0 25px;

border-color:rgba(255,255,255,.15);

}

.copyright{

text-align:center;

color:#ddd;

}

/* ===========================
   RESPONSIVE
=========================== */

/*==================================
TRACKING
==================================*/

.tracking-page{

padding:170px 0 100px;

}

.tracking-container{

max-width:850px;

margin:auto;

}

.tracking-card{

background:#fff;

padding:50px;

border-radius:30px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.tracking-header{

text-align:center;

margin-bottom:40px;

}

.tracking-icon{

font-size:55px;

margin-bottom:20px;

}

.tracking-header h2{

font-size:42px;

color:#214d2f;

margin-bottom:15px;

}

.tracking-header p{

color:#666;

}

.tracking-search{

display:flex;

align-items:center;

background:#f5f5f5;

padding:15px 20px;

border-radius:50px;

margin-bottom:25px;

}

.tracking-search i{

font-size:22px;

margin-right:15px;

color:#1f6f43;

}

.tracking-search input{

border:none;

background:none;

outline:none;

width:100%;

font-size:18px;

}

.tracking-btn{

width:100%;

border:none;

padding:16px;

border-radius:50px;

background:#1f6f43;

color:#fff;

font-size:18px;

font-weight:600;

transition:.3s;

}

.tracking-btn:hover{

background:#174f30;

}

/*==================================
ABOUT PAGE
==================================*/

.about-page{

padding:170px 0 100px;

}

.about-hero{

display:flex;

align-items:center;

gap:70px;

margin-bottom:90px;

}

.about-left{

flex:1;

}

.about-right{

flex:1;

}

.about-right img{

width:100%;

border-radius:35px;

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.about-badge{

display:inline-block;

padding:10px 24px;

background:#eef7ee;

color:#1f6f43;

border-radius:40px;

margin-bottom:20px;

font-weight:600;

}

.about-hero h1{

font-size:56px;

color:#214d2f;

margin-bottom:25px;

line-height:1.2;

}

.about-hero p{

font-size:18px;

line-height:2;

color:#666;

margin-bottom:30px;

}

.about-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.about-list div{

background:#fff;

padding:18px;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.visi-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

margin-bottom:80px;

}

.visi-card{

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.visi-icon{

font-size:45px;

margin-bottom:20px;

}

.owner{

margin-top:100px;

}

.owner-card{

display:flex;

align-items:center;

gap:50px;

background:#fff;

padding:55px;

border-radius:35px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.owner-logo{

width:180px;

height:180px;

background:#f5f5f5;

border-radius:30px;

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

}

.owner-logo img{

width:120px;

}

.owner-content{

flex:1;

}

.owner-badge{

display:inline-block;

padding:8px 18px;

background:#eef7ee;

color:#1f6f43;

border-radius:30px;

font-weight:600;

margin-bottom:18px;

}

.owner-content h2{

font-size:42px;

color:#214d2f;

margin-bottom:20px;

}

.owner-content p{

font-size:18px;

line-height:1.8;

color:#666;

margin-bottom:35px;

}

.owner-info{

display:flex;

gap:50px;

}

.owner-info h3{

color:#1f6f43;

font-size:34px;

margin:0;

}

.owner-info span{

color:#777;

}

/*=====================================
CHECKOUT
=====================================*/

.checkout-page{
    padding:70px 0;
}

.checkout-title{
    text-align:center;
    margin-bottom:50px;
}

.checkout-title span{
    display:inline-block;
    background:#e8f5ec;
    color:#1f6f43;
    padding:10px 20px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:15px;
}

.checkout-title h1{
    font-size:42px;
    font-weight:700;
    color:#214d2f;
    margin-bottom:10px;
}

.checkout-title p{
    color:#666;
    font-size:18px;
}

.checkout-card,
.checkout-summary{
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.checkout-card h3,
.checkout-summary h3{
    font-size:28px;
    font-weight:700;
    color:#214d2f;
    margin-bottom:30px;
}

.checkout-input{
    width:100%;
    padding:14px 18px;
    border:1px solid #ddd;
    border-radius:14px;
    font-size:16px;
    margin-bottom:18px;
    transition:.3s;
}

.checkout-input:focus{
    outline:none;
    border-color:#1f6f43;
    box-shadow:0 0 0 4px rgba(31,111,67,.12);
}

.summary-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:20px 0;
    padding-bottom:15px;
    border-bottom:1px solid #eee;
}

.summary-item b{
    color:#214d2f;
}

.summary-item small{
    color:#777;
}

.summary-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:30px;
    padding-top:20px;
    border-top:2px dashed #ddd;
}

.summary-total h2{
    color:#214d2f;
    font-weight:700;
}

.btn-payment{
    width:100%;
    margin-top:30px;
    border:none;
    background:#1f6f43;
    color:#fff;
    padding:16px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.btn-payment:hover{
    background:#174f30;
    transform:translateY(-3px);
}

.checkout-summary hr{
    margin:20px 0;
}

/*=====================================
PAYMENT
=====================================*/

.payment-page{
    padding:80px 0;
}

.payment-title{
    text-align:center;
    margin-bottom:50px;
}

.payment-title span{
    display:inline-block;
    padding:10px 20px;
    background:#e8f5ec;
    color:#1f6f43;
    border-radius:30px;
    font-weight:600;
    margin-bottom:15px;
}

.payment-title h1{
    font-size:42px;
    color:#214d2f;
    font-weight:700;
}

.payment-title p{
    color:#666;
    font-size:18px;
}

.payment-card{
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
}

.payment-card h3{
    margin-bottom:25px;
    color:#214d2f;
    font-weight:700;
}

.qris-box{
    display:flex;
    justify-content:center;
    margin:30px 0;
}

.qris-img{
    width:280px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.payment-total{
    text-align:center;
    margin:25px 0;
}

.payment-total p{
    color:#666;
    margin-bottom:10px;
}

.payment-total h2{
    color:#1f6f43;
    font-size:42px;
    font-weight:700;
}

.payment-note{
    margin-top:25px;
    background:#f8fff9;
    border-left:5px solid #1f6f43;
    padding:18px;
    border-radius:12px;
    color:#555;
}

.payment-input{
    width:100%;
    padding:14px 18px;
    border:1px solid #ddd;
    border-radius:14px;
    margin-top:8px;
    margin-bottom:20px;
    transition:.3s;
}

.payment-input:focus{
    outline:none;
    border-color:#1f6f43;
    box-shadow:0 0 0 4px rgba(31,111,67,.15);
}

.btn-upload{
    width:100%;
    padding:16px;
    border:none;
    border-radius:50px;
    background:#1f6f43;
    color:#fff;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.btn-upload:hover{
    background:#174f30;
    transform:translateY(-3px);
}

/*=====================================
PESANAN SAYA
=====================================*/

.orders-page{

padding:80px 0;

}

.orders-header{

text-align:center;

margin-bottom:50px;

}

.orders-header span{

display:inline-block;

padding:10px 20px;

background:#e8f5ec;

color:#1f6f43;

border-radius:30px;

font-weight:600;

margin-bottom:15px;

}

.orders-header h1{

font-size:42px;

font-weight:700;

color:#214d2f;

}

.orders-header p{

color:#666;

font-size:18px;

}

.order-card{

display:flex;

justify-content:space-between;

align-items:center;

background:#fff;

padding:30px;

margin-bottom:25px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.order-card:hover{

transform:translateY(-5px);

}

.order-left h3{

font-size:24px;

color:#214d2f;

margin-bottom:10px;

}

.order-left p{

margin:5px 0;

color:#666;

}

.status-new{

background:#f7c948;

color:#fff;

padding:10px 18px;

border-radius:30px;

}

.status-process{

background:#007bff;

color:#fff;

padding:10px 18px;

border-radius:30px;

}

.status-delivery{

background:#17a2b8;

color:#fff;

padding:10px 18px;

border-radius:30px;

}

.status-success{

background:#28a745;

color:#fff;

padding:10px 18px;

border-radius:30px;

}

.btn-detail-order{

background:#1f6f43;

color:#fff;

padding:12px 25px;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-detail-order:hover{

background:#174f30;

color:#fff;

}

.empty-order{

background:#fff;

padding:60px;

border-radius:25px;

text-align:center;

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

}

.btn-shop{

display:inline-block;

margin-top:20px;

padding:15px 35px;

background:#1f6f43;

color:#fff;

border-radius:40px;

text-decoration:none;

}

.btn-shop:hover{

background:#174f30;

color:#fff;

}

/*======================================
DETAIL PESANAN
======================================*/

.detail-order{
    padding:150px 0 80px;
}

.order-header{
    text-align:center;
    margin-bottom:50px;
}

body{
    padding-top:110px;
}

.order-header h1{
    font-size:48px;
    color:#1f5b37;
    font-weight:700;
}

.order-header p{
    font-size:18px;
    color:#666;
}

.order-info{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    margin-bottom:40px;
}

.order-info h3{
    margin-bottom:20px;
}

.order-info p{
    font-size:18px;
    margin-bottom:12px;
}

.produk-order{
    display:flex;
    align-items:center;
    gap:25px;
    background:#fff;
    border-radius:18px;
    padding:20px;
    margin:20px 0;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.produk-order img{
    width:130px;
    height:130px;
    border-radius:15px;
    object-fit:cover;
}

.produk-detail h3{
    color:#1f5b37;
    margin-bottom:10px;
}

.produk-detail p{
    font-size:17px;
}

.ringkasan-order{
    margin-top:40px;
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.ringkasan-order h2{
    margin-bottom:30px;
}

.ringkasan-order div{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
    font-size:18px;
}

.total-order{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #ddd;
    font-size:28px!important;
    font-weight:bold;
}

.btn-track,
.btn-shop{
    display:block;
    width:100%;
    text-align:center;
    padding:16px;
    border-radius:50px;
    text-decoration:none;
    margin-top:18px;
    font-weight:600;
}

.btn-track{
    background:#1f6f43;
    color:#fff;
}

.btn-shop{
    background:#f6c000;
    color:#000;
}

/*=====================================
TRACKING TIMELINE
=====================================*/

.step{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:20px 0;
    position:relative;
}

.step:not(:last-child)::before{
    content:"";
    position:absolute;
    left:22px;
    top:55px;
    width:4px;
    height:70px;
    background:#dcdcdc;
}

.circle{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#d9d9d9;
    color:#666;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    flex-shrink:0;
    transition:.3s;
}

.step h4{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#666;
}

.step p{
    margin-top:6px;
    color:#888;
}

/* Tahap yang sudah selesai */

.step.done .circle{
    background:#1f7a45;
    color:#fff;
}

.step.done h4{
    color:#1f7a45;
}

.step.done p{
    color:#555;
}

/* Tahap yang sedang aktif */

.step.current .circle{
    background:#ffc107;
    color:#fff;
    box-shadow:0 0 0 8px rgba(255,193,7,.2);
    animation:pulse 1.5s infinite;
}

.step.current h4{
    color:#ffc107;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}