@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --primary-green: #2C5E3B;      
    --sage-light: #E8EFE9;        
    --accent-green: #81B622;       
    --text-dark: #1A2F22;          
    --white-clean: #FFFFFF;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(180deg, var(--sage-light) 0%, rgba(244,247,244,0) 100%);   
    color: var(--text-dark);
}

/* --- HERO SECTION --- */
.hero-section {
    background-color: var(--sage-light);
    border-radius: 0 0 50px 50px; 
    padding: 100px 0 120px 0;
}

.hero-title {
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1.2;
    color: var(--primary-green);
}

.hero-title span {
    color: var(--accent-green);
}

/* --- BUTTONS --- */
.btn-primary-custom {
    background-color: var(--primary-green);
    color: var(--white-clean);
    border: none;
    padding: 12px 30px;
    border-radius: 30px; 
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #1E4228;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44, 94, 59, 0.2);
    color: var(--white-clean);
}

/* --- PRODUCT CARD  --- */
.card-produk {
    border: none;
    border-radius: 24px;
    background: var(--white-clean);
    box-shadow: 0 10px 30px rgba(44, 94, 59, 0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.card-produk:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(44, 94, 59, 0.1);
}

.card-produk .img-container {
    background-color: #F3F6F4; 
    padding: 30px;
    border-radius: 20px;
    margin: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-produk img {
    max-height: 200px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.product-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.product-price {
    font-weight: 700;
    color: var(--primary-green);
    font-size: 1.2rem;
}

.badge-new {
    background-color: #E74C3C;
    color: white;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 10;
}
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');



.hero-esthetic {
    background: linear-gradient(180deg, var(--sage-light) 0%, rgba(244,247,244,0) 100%);
    padding: 100px 0;
    border-radius: 0 0 40px 40px;
}

.hero-esthetic h1 {
    font-weight: 700;
    color: var(--primary-green);
    font-size: 2.8rem;
}

/* Transformasi Card Meniru Inspirasi Pinterest */
.card.shadow-sm {
    border: none;
    border-radius: 20px;
    background: var(--white-clean);
    box-shadow: 0 10px 30px rgba(44, 94, 59, 0.04) !important;
    transition: all 0.4s ease;
    overflow: hidden;
}

.card.shadow-sm:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(44, 94, 59, 0.08) !important;
}

/* Wadah Gambar Produk (Agar Tidak Kaku Flat Putih) */
.card-img-top {
    height: 220px;
    object-fit: cover;
    padding: 12px;
    border-radius: 24px;
}

/* Tombol Sukses Khas Kebun */
.btn-success {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
    border-radius: 30px !important;
    padding: 8px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: var(--text-dark) !important;
    border-color: var(--text-dark) !important;
}


/* =================================================== */
/* Variabel Warna Utama ala Botanical Garden */
:root {
    --primary-green: #2C5E3B;      /* Hijau Tua Premium */
    --sage-bg: #EAF0EC;            /* Sage Soft untuk Latar Belakang */
    --text-dark: #1E2E24;          /* Hitam Kehijauan */
    --accent-light: #F3F7F4;       /* Dudukan gambar produk */
}

/* Penyesuaian Global */
body {
    background-color: #FCFDFD;
}

/* 1. Modifikasi Hero Section */
.hero-esthetic {
    background: linear-gradient(180deg, var(--sage-bg) 0%, rgba(252,253,253,0) 100%);
    padding: 60px 0 125px 0;
    border-radius: 0 0 60px 60px; /* Lengkungan bawah lembut ala modern web */
}

.hero-image-wrapper img {
    max-height: 400px;
    width: 85%;
    object-fit: cover;
    border: 12px solid #ffffff; /* Frame putih tebal premium */
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(44, 94, 59, 0.1) !important;
}

/* 2. Modifikasi Card Bergaya Pinterest / Dribbble */
.card.card-esthetic {
    border: none !important;
    border-radius: 28px !important; /* Sangat melengkung halus */
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(44, 94, 59, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.card.card-esthetic:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(44, 94, 59, 0.09) !important;
}

/* Tempat Dudukan Gambar Produk Kontras (ATM Gambar Referensi) */
.product-img-bg {
    background-color: var(--accent-light);
    margin: 15px;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 240px;
}

.product-img-bg img.image-target {
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.card.card-esthetic:hover .image-target {
    transform: scale(1.08); /* Efek zoom gambar halus saat hover */
}

/* Tag Kecil di Pojok Card */
.badge-tag {
    position: absolute;
    top: 25px;
    left: 25px;
    background-color: var(--primary-green);
    color: white;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 5;
}

/* Tombol Bulat Minimalis (ATM Gambar Referensi Kanan Bawah) */
.btn-buy-round {
    background-color: var(--primary-green);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-buy-round:hover {
    background-color: var(--text-dark);
    color: white;
    transform: rotate(-45deg); /* Efek rotasi panah keren saat didekati */
}

/* Batasi teks deskripsi agar maksimal 2 baris (supaya tinggi card sejajar rapi) */

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 💡 Versi standar untuk menghilangkan warning */
    -webkit-box-orient: vertical;  
    overflow: hidden;
}