:root {
  --red: #d71920;
  --orange: #ed9632
}

* {margin: 0;padding: 0;box-sizing: border-box}
html {scroll-behavior: smooth}
body { font-family: Montserrat, sans-serif;color: #222}
img {display: block;max-width: 100%}

a {text-decoration: none;color: inherit}
.navbar {position: fixed;top: 0;left: 0;width: 100%;height: 62px;background: var(--red);z-index: 9999}
.nav-container {max-width: 1280px;height: 100%;margin: auto;padding: 0 35px;display: flex;align-items: center;justify-content: space-between}
.logo {opacity: 0;visibility: hidden;transition: opacity 0.3s ease}
.logo.show {opacity: 1;visibility: visible}
.logo img {width: 70px;transform: translateX(40px)}
.nav-menu {display: flex;gap: 38px;margin-left: auto;margin-right: 450px;font-family: 'Poppins', sans-serif}
.nav-menu a {color: #fff;font-size: 13px;position: relative}
.nav-menu a:after {content: "";position: absolute;left: 0;bottom: -7px;width: 0;height: 1px;background: #fff;transition: .3s}
.nav-menu a:hover:after {width: 100%}
.language-switch {display: flex;gap: 5px;position: absolute;right: 30px;transform: translateX(-40px)}
.lang-btn {width: 45px;height: 30px;border: 1px solid rgba(255, 255, 255, .7);border-radius: 20px;background: transparent;color: #fff;font-size: 11px;font-weight: 600;cursor: pointer}
.lang-btn.active,
.lang-btn:hover {background: #fff;color: var(--red)}
.menu-toggle {display: none;border: 0;background: transparent;color: #fff;font-size: 22px}

.hero {height: min(650px, calc(100vh - 66px));min-height: 750px;position: relative;overflow: hidden;width: 100%;transform: translateY(60px)}
.hero-content {position: absolute;top: 14%;left: 50%;transform: translateX(-50%);width: 55%;text-align: center;color: #fff;z-index: 5}
.hero-content h1 {font-size: clamp(38px, 4.5vw, 75px);line-height: 1.05;font-style: italic;font-weight: 800;letter-spacing: -2px;text-shadow: 2px 3px 5px rgba(0, 0, 0, .2)}
.hero-content p {font-size: clamp(18px, 2vw, 32px);font-style: italic;margin: 12px 0}
.hero-line {width: 120px;height: 2px;background: #fff;margin: 12px auto}
.hero-tag {position: absolute;top: 18px;left: 42px;width: 115px;z-index: 10}

.about {background: var(--red);padding: 72px 30px 78px;color: #fff;transform: translateY(10px)}
.about-container {max-width: 1130px;margin: auto}
.about-intro {display: flex;align-items: center;justify-content: space-between;gap: 50px;max-width: 1000px;margin: 0 auto 55px;transform: translateX(-50px)}
.about-intro p {font-family: "Playfair Display", serif;font-size:25px;line-height: 1.5}
.bio-icon {width: 95px;min-width: 95px;transform: translateX(50px)}
.feature-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px}
.feature-card {overflow: hidden;border-radius: 22px;background: linear-gradient(100deg,#80501f 0%,#a96927 42%,#e69a3b 100%);transition: .35s}
.feature-card:hover {transform: translateY(-8px);box-shadow: 0 15px 30px rgba(0, 0, 0, .2)}
.feature-image {height: 250px;overflow: hidden}
.feature-image img {width: 100%;height: 100%;object-fit: cover;transition: .5s}
.feature-card:hover .feature-image img {transform: scale(1.02)}
.feature-content {padding: 13px 50px 16px;background: linear-gradient(100deg,#80501f 0%,#a96927 42%,#e69a3b 100%)}
.feature-content p {font-size: 10px;line-height: 1.35;font-family: 'Poppins', sans-serif;transform: translateX(-30px)}
[data-lang="about_header1"],
[data-lang="about_header2"],
[data-lang="about_header3"] {
    font-family: "Playfair Display", serif !important;
    font-size: 20px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transform: translateX(-30px) !important;
    line-height: 1.5 !important
}
.products {background: #fff;padding: 70px 30px 55px}
.section-title {text-align: center;margin-bottom: 38px}
.section-title h2 {color: var(--red);font-family: "Playfair Display", serif;font-size: clamp(34px, 4vw, 48px)}
.section-title span {display: block;width: 230px;height: 1px;background: var(--red);margin: 8px auto}
.products-container {max-width: 1100px;margin: 0 auto;display: grid;grid-template-columns: repeat(3, 1fr);column-gap: 45px;row-gap: 45px}
.product-card {overflow: hidden;border-radius: 20px 20px 15px 15px;background: #fff;box-shadow: 0 3px 12px rgba(0, 0, 0, .08)}
.product-image {height: 390px;overflow: hidden}
.product-image img {width: 100%;height: 100%;object-fit: cover;transition: .5s}
.product-info {height: 106px;min-height: 106px;box-sizing: border-box;background: var(--red);color: #fff;text-align: center;padding: 11px 10px 10px;display: flex;flex-direction: column;align-items: center}
.product-info h3 {font-family: "Playfair Display", serif;font-size: 26px;line-height: 1;margin: 0;padding: 0 10px 7px;border-bottom: 1px solid rgba(255,255,255,.8);min-width: 115px}
.quantity {display: flex;justify-content: center;align-items: center;gap: 4px;margin-top: 7px;margin-bottom: 0;white-space: nowrap}
.quantity-btn {width: 29px;height: 29px;display: flex;justify-content: center;align-items: center;background: transparent;color: #fff;border-radius: 50%;border: 1px solid #fff;font-size: 12px;font-weight: 700;cursor: pointer;transition: .25s ease}
.quantity-btn:hover {transform: scale(1.1)}
.quantity-text{font-family: 'Poppins', sans-serif;font-size: 16px;font-weight: 500}
.quantity-btn.active {background: #fff;color: var(--red);border: 1px solid #fff;transform: scale(1.05)}
.product-info p {font-family: 'Poppins', sans-serif;font-size: 16px;font-weight: 500;line-height: 1;margin: 0 0 0 3px}
.product-info h3 + p {margin-top: 7px}
.product-image {position: relative;overflow: hidden}
.shop-now-vertical {position: absolute;bottom: 0;left: 0;width: 100%;height: 60px;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;gap: 12px;background: rgba(0, 0, 0, 0.72);color: #fff;font-size: 16px;font-family: 'Poppins', sans-serif;opacity: 0;transform: translateY(100%);pointer-events: none;
transition:opacity 0.35s ease,transform 0.35s ease}
.shop-now-vertical .iconify {font-size: 16px}
.product-image:hover .shop-now-vertical {opacity: 1;transform: translateY(0);pointer-events: auto}
.shop-now-vertical:hover {background: rgba(0, 0, 0, 0.85)}

.footer {background: var(--red);color: #fff;padding: 65px 30px 0}
.footer-container {max-width: 1100px;margin: auto;display: grid;grid-template-columns: 1.2fr .8fr 1fr;gap: 70px;min-height: 250px}
.footer-logo img {width: 145px}
.footer-menu {display: flex;flex-direction: column;gap: 20px;padding-top: 10px}
.footer-menu a {font-size: 18px}
.social-media {display: flex;gap: 20px;margin-bottom: 42px;transform: translateY(12px)}
.social-media a {font-size: 21px}
.footer-contact{transform: translateX(100px)}
.footer-contact h4 {font-size: 15px;margin-bottom: 15px}
.contact-item {display: flex;align-items: center;gap: 12px;margin-bottom: 12px;font-size: 15px;font-family: 'Poppins', sans-serif}
.contact-item i {width: 18px;font-size: 17px;text-align: center}
.contact-item .iconify{font-size:20px;flex-shrink:0;transform: translateY(1px)}
.footer-bottom {max-width: 1100px;margin: auto;padding: 12px 0 18px;border-top: 1px solid rgba(255, 255, 255, .8)}
.footer-bottom p {font-size: 12px}


@media(max-width:1024px) {
  .nav-menu {display: flex;gap: 38px;margin-left: auto;margin-right: 330px;font-family: 'Poppins', sans-serif}
  .logo img {width: 75px;transform: translateX(28px)}
  .language-switch {display: flex;gap: 5px;position: absolute;right: 30px;transform: translateX(-50px)}
  .about {background: var(--red);padding: 72px 30px 78px;color: #fff;transform: translateY(-115px);height: 700px}
  .about-intro {display: flex;align-items: center;justify-content: space-between;gap: 50px;max-width: 1000px;margin: 0 auto 55px;transform: translate(-1px, 10px)}
  .about-intro p {font-family: "Playfair Display", serif;font-size:22px;line-height: 1.5}
  .bio-icon {width: 85px;min-width: 90px;transform: translateX(-30px)}
  .products {background: #fff;padding: 70px 30px 55px;transform: translateY(-115px)}
  .section-title {text-align: center;margin-bottom: 60px}
  .product-info h3 {font-family: "Playfair Display", serif;font-size: 24px;line-height: 1;margin: 0;padding: 0 10px 7px;border-bottom: 1px solid rgba(255,255,255,.8);min-width: 115px}
  .product-info p {font-family: 'Poppins', sans-serif;font-size: 16px;font-weight: 500;line-height: 1;margin: 0 0 0 3px}
  .feature-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;transform: translateY(10px)}
  .feature-content p {font-size: 8px;line-height: 1.35;font-family: 'Poppins', sans-serif;transform: translateX(-30px)}
  [data-lang="about_header1"],
  [data-lang="about_header2"],
  [data-lang="about_header3"] {
    font-family: "Playfair Display", serif !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transform: translateX(-30px) !important;
    line-height: 1.5 !important
  }
  .footer-contact{transform: translateX(60px)}
}

@media(max-width:900px) {
  .nav-menu {margin-right: 240px;gap: 20px}
  .logo img {width: 70px;transform: translateX(8px)}
  .language-switch {display: flex;gap: 5px;position: absolute;right: 30px;transform: translateX(-15px)}
  .about {background: var(--red);padding: 72px 30px 78px;color: #fff;transform: translateY(-230px);height: 620px}
  .about-intro {transform: translate(-1px, -10px)}
  .about-intro p {font-family: "Playfair Display", serif;font-size:19px;line-height: 1.5}
  .bio-icon {width: 80px;min-width: 85px;transform: translateX(-30px)}
  .hero {height: 560px}
  .hero-content {width: 75%}
  .feature-grid {gap: 20px;transform: translateY(-8px)}
  .feature-image {height: 200px}
  .feature-content p {font-size: 6px;line-height: 1.35;font-family: 'Poppins', sans-serif;transform: translateX(-30px)}
  .section-title {transform: translateY(-100px)}
  .products {background: #fff;padding: 70px 40px 8px;height: 450px}
  .products-container {gap: 15px;transform: translateY(-100px)}
  .product-image {height: 260px}
  .product-info h3 {font-family: "Playfair Display", serif;font-size: 22px}
  .product-info p {font-size: 14px;font-weight: 500}
  .quantity {display: flex;justify-content: center;align-items: center;gap: 4px;margin-top: 7px;margin-bottom: 0;white-space: nowrap}
  .quantity-btn {width: 22px;height: 22px;display: flex;justify-content: center;align-items: center;background: transparent;color: #fff;border-radius: 50%;border: 1px solid #fff;font-size: 8px;font-weight: 700;cursor: pointer;transition: .25s ease}
  .quantity-text{font-family: 'Poppins', sans-serif;font-size: 14px;font-weight: 500}
  [data-lang="about_header1"],
  [data-lang="about_header2"],
  [data-lang="about_header3"] {
    font-family: "Playfair Display", serif !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transform: translateX(-30px) !important;
    line-height: 1.5 !important
  }
  .footer-container {gap: 35px}
  .footer-contact{transform: translateX(20px)}
}

@media(max-width:768px) {
  .nav-menu {margin-right: 230px;gap: 20px}
  .logo img {width: 70px;transform: translateX(8px)}
  .language-switch {display: flex;gap: 5px;position: absolute;right: 30px;transform: translateX(-15px)}
  .about {background: var(--red);padding: 72px 30px 78px;color: #fff;transform: translateY(-260px);height: 620px}
  .about-intro {transform: translate(-1px, -10px)}
  .about-intro p {font-family: "Playfair Display", serif;font-size:18px;line-height: 1.5}
  .bio-icon {width: 75px;min-width: 80px;transform: translateX(-30px)}
  .hero {height: 560px}
  .hero-content {width: 75%}
  .feature-grid {gap: 20px;transform: translateY(-8px)}
  .feature-image {height: 200px}
  .feature-content p {font-size: 6px;line-height: 1.35;font-family: 'Poppins', sans-serif;transform: translateX(-30px);width: 150px}
  .section-title {transform: translateY(-150px)}
  .products {background: #fff;padding: 70px 40px 8px;height: 380px}
  .products-container {gap: 15px;transform: translateY(-150px)}
  .product-image {height: 260px}
  .product-info {height: 90px;min-height: 95px;box-sizing: border-box;background: var(--red);color: #fff;text-align: center;padding: 11px 10px 10px;display: flex;flex-direction: column;align-items: center}
  .product-info h3 {font-family: "Playfair Display", serif;font-size: 20px}
  .product-info p {font-size: 13px;font-weight: 500}
  .quantity {display: flex;justify-content: center;align-items: center;gap: 4px;margin-top: 7px;margin-bottom: 0;white-space: nowrap}
  .quantity-btn {width: 21px;height: 21px;display: flex;justify-content: center;align-items: center;background: transparent;color: #fff;border-radius: 50%;border: 1px solid #fff;font-size: 8px;font-weight: 700;cursor: pointer;transition: .25s ease}
  .quantity-text{font-family: 'Poppins', sans-serif;font-size: 13px;font-weight: 500}
  [data-lang="about_header1"],
  [data-lang="about_header2"],
  [data-lang="about_header3"] {
    font-family: "Playfair Display", serif !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transform: translateX(-30px) !important;
    line-height: 1.5 !important
  }
  .footer-container {gap: 35px}
}

@media(max-width: 480px){
  .navbar {height: 58px}
  .nav-container {padding: 0 20px}
  .logo {width: 90px}
  .logo img {width: 50px;transform: translateX(-10px)}
  .nav-menu {position: fixed;top: 58px;left: 0;width: 100%;background: var(--red);display: flex;flex-direction: column;align-items: center;gap: 0;margin: 0;padding: 15px 0 20px;transform: translateY(-150%);transition: .35s;opacity: 0}
  .nav-menu.active {transform: translateY(0);opacity: 1}
  .nav-menu a {width: 100%;text-align: center;padding: 13px;font-size: 13px}
  .nav-menu a:after {display: none}
  .language-switch {position: static;margin-left: auto;margin-right: 10px}
  .lang-btn {width: 40px;height: 25px}
  .menu-toggle {display: block}
  .hero {height: min(650px, calc(100vh - 66px));min-height: 745px;position: relative;overflow: hidden;width: 100%;transform: translateY(54px)}
  .hero-content {top: 18%;width: 90%}
  .hero-content h1 {font-size: clamp(27px, 8vw, 48px);letter-spacing: -1px}
  .hero-content p {font-size: 18px}
  .hero-line {width: 80px}
  .hero-tag {width: 75px;top: 10px;left: 15px}
  .about {padding: 50px 20px 1280px;transform: translateY(-472px)}
  .about-intro {flex-direction: column;text-align: center;gap: 20px;margin-bottom: 35px}
  .about-intro p {font-size: 16px}
  .bio-icon {width: 75px;min-width: 75px;transform: translateX(-5px);text-align: center}
  .feature-grid {grid-template-columns: 1fr;gap: 22px;max-width: 400px;margin: auto}
  .feature-image {height: 240px}
  .products {padding: 50px 20px 1100px;transform: translateY(-328px)}
  .products-container {grid-template-columns: 1fr;gap: 25px;max-width: 390px}
  .product-image {height: 360px}
  .footer {padding: 45px 25px 0}
  .footer-container {grid-template-columns: 1fr;gap: 35px;min-height: auto;text-align: center}
  .footer-logo {display: flex;justify-content: center}
  .footer-logo img {width: 125px}
  .footer-menu {align-items: center;padding: 0;gap: 15px}
  .footer-contact {display: flex;flex-direction: column;align-items: center}
  .social-media {margin-bottom: 25px}
  .footer-bottom {margin-top: 35px;text-align: center}
}

/* KHUSUS WIDTH 430px - 440px */
@media (min-width: 430px) and (max-width: 440px) {
    .about {padding: 50px 20px 1280px;transform: translateY(-450px)}
    .products {padding: 50px 20px 1100px;transform: translateY(-300px)}
}

@media (min-width: 360px) and (max-width: 380px) {
    .about {padding: 50px 20px 1280px;transform: translateY(-490px)}
    .products {padding: 50px 20px 1100px;transform: translateY(-340px)}
}

@media (min-width: 320px) and (max-width: 344px) {
    .about {padding: 50px 20px 1280px;transform: translateY(-500px)}
    .products {padding: 50px 20px 1100px;transform: translateY(-340px)}
}