/* =========================================================
   Maya's Som Tam — style.css
   - Hero product.png diperbesar 15%
   - Menu responsive dengan hamburger
   ========================================================= */
:root{
  --y:#F7CF16;
  --r:#D51F2B;
  --ink:#201B18;
  --cream:#FFF8E8;
  --paper:#FFFDF7;
  --g:#1F7A3C;
  --muted:#6F665D;
  --line:#E9DFC7
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--cream)
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.wrap{width:min(1200px,calc(100% - 36px));margin:auto}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 22px;
  font-weight:900;
  border:0;
  cursor:pointer
}
.btn.red{background:var(--r);color:#fff}
.btn.outline{border:2px solid var(--ink);background:transparent}

/* ---------- NAV ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,248,232,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06)
}
.navin{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative
}
.brand{width:180px}
.links{
  display:flex;
  gap:20px;
  align-items:center;
  font-weight:800;
  font-size:14px
}

/* Language toggle */
.lang button{
  border:0;
  background:transparent;
  font-weight:900;
  padding:8px 10px;
  border-radius:99px;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  transition:background .15s ease
}
.lang button:hover{background:rgba(0,0,0,.06)}
.lang .active{background:var(--y)}

/* ---------- HAMBURGER BUTTON ---------- */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:60;
  order:2
}
.hamburger span{
  display:block;
  height:3px;
  width:100%;
  background:var(--ink);
  border-radius:3px;
  transition:transform .2s ease, opacity .2s ease
}
.hamburger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(8px) rotate(45deg)
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity:0
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg)
}

/* ---------- HERO ---------- */
.hero{
  min-height:820px;
  background:linear-gradient(115deg,#FFF8E8 0 56%,#F7CF16 56%);
  overflow:hidden
}
.heroin{
  min-height:820px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:20px
}
.kicker{
  font-size:13px;
  letter-spacing:1.8px;
  font-weight:950;
  color:var(--r);
  text-transform:uppercase
}
h1{
  font-size:clamp(62px,6.7vw,104px);
  line-height:.86;
  letter-spacing:-5px;
  margin:18px 0 24px;
  text-transform:uppercase
}
.lead{font-size:21px;line-height:1.6;max-width:610px;color:#4E453E}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero visual — hanya product.png saja */
.hero-visual{
  height:750px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}

/* ============================================================
   HERO PRODUCT — DIPERBESAR 15%
   Sebelumnya: max-width:820px
   Sesudah:    max-width:945px (+15%)
   ============================================================ */
.hero-two .somtam-hero{
  position:relative;
  width:105%;
  max-width:945px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 35px 40px rgba(71,41,0,.22))
}

/* ---------- TICKER ---------- */
.ticker{
  background:var(--r);
  color:#fff;
  padding:24px 0;
  border-top:5px solid var(--y);
  border-bottom:5px solid var(--y)
}
.ticker .wrap{
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  font-size:clamp(22px,2.6vw,37px);
  font-weight:950
}
.ticker b{color:var(--y)}

/* ---------- SECTIONS ---------- */
.section{padding:100px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
h2{
  font-size:clamp(44px,5vw,70px);
  line-height:.94;
  letter-spacing:-3px;
  margin:0 0 22px
}
.copy{font-size:19px;line-height:1.7;color:var(--muted)}

/* ---------- MOBILE CART SECTION ---------- */
.mobile{background:var(--ink);color:#fff}
.mobile .copy{color:#D6D0C8}
.mobile-badge{
  display:inline-block;
  background:var(--y);
  color:var(--ink);
  border-radius:99px;
  padding:10px 14px;
  font-weight:950;
  margin-bottom:20px
}
.cart-intro{max-width:820px;text-align:center;margin:0 auto 48px}
.cart-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cart-card{
  background:#2b2622;
  border:1px solid #423b35;
  border-radius:38px;
  overflow:hidden
}

/* Lingkaran kuning DIHILANGKAN — background solid gelap */
.cart-visual{
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#302A26
}
.cart-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 24px rgba(0,0,0,.28))
}
.cart-copy{padding:30px}
.cart-copy h3{font-size:34px;margin:8px 0 12px}
.cart-copy p{color:#D6D0C8;line-height:1.65;font-size:17px}
.cart-tag{font-size:12px;letter-spacing:1.4px;color:var(--y);font-weight:950}
.cart-cta{margin-top:18px}
.cart-cta .btn{background:var(--y);color:var(--ink)}

/* ---------- PARTNER ---------- */
.partner{background:var(--y)}
.form{
  background:#fff;
  border-radius:34px;
  padding:36px;
  box-shadow:0 24px 60px rgba(84,55,0,.16)
}
.form h3{font-size:30px;margin:0 0 8px}
.field{margin-top:15px}
.field label{display:block;font-weight:850;margin-bottom:7px}
.field input,
.field select{
  width:100%;
  padding:14px 15px;
  border:1px solid #D9CFB7;
  border-radius:12px;
  font:inherit;
  background:#fff
}
.field input:focus,
.field select:focus{outline:2px solid var(--r);outline-offset:1px}

/* ---------- FOOTER ---------- */
.footer{background:#111;color:#fff;padding:48px 0}
.footerin{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  flex-wrap:wrap
}
.footer-logo{width:220px}
.footer small{color:#999}

/* Footer language toggle */
.footer-lang{
  display:inline-flex;
  gap:4px;
  background:rgba(255,255,255,.1);
  padding:4px;
  border-radius:99px
}
.footer-lang button{
  color:#fff;
  padding:8px 16px;
  font-size:14px;
  border-radius:99px;
  border:0;
  background:transparent;
  font-weight:900;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease
}
.footer-lang button:hover{background:rgba(255,255,255,.1)}
.footer-lang button.active{background:var(--y);color:var(--ink)}

/* ---------- PRODUCTS SECTION ---------- */
.products-section{padding:100px 0;background:#fffdf7}
.section-intro{max-width:850px;margin:0 auto 50px;text-align:center}
.eyebrow{
  font-size:13px;
  letter-spacing:1.7px;
  font-weight:950;
  color:#d51f2b;
  text-transform:uppercase
}
.section-intro h2{
  font-size:clamp(44px,5vw,70px);
  line-height:.95;
  letter-spacing:-3px;
  margin:12px 0 18px
}
.section-copy,
.lead-copy{font-size:19px;line-height:1.7;color:#6f665d}

.hero-product-panel{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:55px;
  align-items:center;
  border-radius:42px;
  padding:52px;
  margin-top:34px;
  overflow:hidden
}
.somtam-panel{background:#fff4c9}
.noodles-panel{background:#fad1ea}
.hero-product-media{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center
}
.main-product-img{
  position:relative;
  z-index:2;
  width:110%;
  max-width:650px;
  filter:drop-shadow(0 26px 28px rgba(60,35,0,.17))
}
.noodles-img{max-width:610px}
.hero-product-content h3{
  font-size:clamp(40px,4.2vw,62px);
  line-height:.96;
  letter-spacing:-2.5px;
  margin:12px 0 18px
}
.somtam-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:24px 0
}
.info-block{
  background:#fff;
  border:1px solid #eadfbd;
  border-radius:18px;
  padding:18px
}
.info-title{
  font-size:14px;
  font-weight:950;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#211d1b
}
.info-block p,
.sauce-heading p{margin:7px 0 0;color:#6f665d;line-height:1.5}
.sauce-heading{margin-top:25px}
.sauce-inline-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.sauce-inline{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:12px;
  align-items:center;
  border-radius:20px;
  padding:14px;
  background:#fff;
  border:1px solid #eadfbd
}
.sauce-inline img{width:105px;height:100px;object-fit:contain}
.sauce-inline h4{margin:0 0 5px;font-size:21px}
.original-inline h4{color:#1f7a3c}
.terasi-inline h4{color:#d51f2b}
.sauce-inline p{font-size:14px;line-height:1.5;color:#6f665d;margin:0}
.ingredients-strip{margin-top:18px;border-radius:20px;overflow:hidden}
.ingredients-strip img{width:100%;display:block}
.noodle-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.noodle-tags span{
  background:#fff;
  border:1px solid #eadfbd;
  border-radius:99px;
  padding:10px 14px;
  font-weight:850
}

/* Sembunyikan elemen dekorasi yang tidak dipakai */
.visual-circle,
.circle,
.decor-circle,
.circle-decoration,
.hero-circle,
.product-circle{display:none!important}
.hero-product-media{background:transparent!important}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  /* ---------- MOBILE MENU (HAMBURGER) ---------- */
  .links{
    position:fixed;
    top:76px;
    left:0;
    right:0;
    background:rgba(255,248,232,.98);
    backdrop-filter:blur(12px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 24px 24px;
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s
  }
  .links.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto
  }
  .links>a:not(.btn){
    display:block;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    font-size:16px
  }
  .links>a.btn{
    margin-top:16px;
    align-self:flex-start
  }
  .lang{
    display:flex;
    justify-content:flex-start;
    margin-top:12px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(0,0,0,.08)
  }
  .lang button{
    padding:8px 16px;
    font-size:15px
  }
  
  /* Tampilkan hamburger */
  .hamburger{display:flex}
  
  /* ---------- OTHER RESPONSIVE ---------- */
  .product-duo,
  .cart-grid,
  .hero-product-panel{grid-template-columns:1fr}
  .cart-visual{height:430px}
  .product-image-wrap{height:440px}

  /* Hero responsive — juga +15% */
  .hero-two .somtam-hero{
    width:100%;
    max-width:735px
  }

  .hero{background:linear-gradient(160deg,#fff8e8 0 53%,#f7cf16 53%)}
  .heroin,
  .split,
  .ingredients .split,
  .mobile .split{grid-template-columns:1fr}
  .heroin{padding-top:55px}
  .hero-visual{height:600px}
  .section{padding:74px 0}
  .saucegrid{grid-template-columns:1fr}
  .hero-product-panel{padding:28px}
  .hero-product-media{min-height:480px}
  .sauce-inline-grid,
  .somtam-info-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  .hero-visual{height:480px}
  .hero-two .somtam-hero{max-width:552px}
  .footer-lang button{padding:6px 14px;font-size:13px}
}