/* ══════════════════════════════════════════════
   GudangKabel.id — PT MITRA SEJATI ELEKTRIK (MSE)
   style.css
   ══════════════════════════════════════════════ */

:root {
  --navy:       #0F2557;
  --blue:       #1650C8;
  --blue-mid:   #1E6FE8;
  --blue-light: #E8F0FE;
  --blue-pale:  #F0F5FF;
  --red:        #D92140;
  --white:      #FFFFFF;
  --gray-50:    #F9FAFB;
  --gray-100:   #F3F4F6;
  --gray-200:   #E5E7EB;
  --gray-400:   #9CA3AF;
  --gray-500:   #6B7280;
  --gray-600:   #4B5563;
  --gray-900:   #111827;
  --green-wa:   #1FAF38;
  --gold:       #F59E0B;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --sh-xs: 0 1px 3px rgba(0,0,0,.08);
  --sh-sm: 0 4px 12px rgba(15,37,87,.08);
  --sh-md: 0 8px 28px rgba(15,37,87,.12);
  --sh-lg: 0 20px 60px rgba(15,37,87,.16);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .28s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'DM Sans', sans-serif; color: var(--gray-900); background: var(--white); overflow-x: hidden; line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(22,80,200,.025) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(22,80,200,.025) 1px,transparent 1px);
  background-size: 44px 44px;
}

/* ── LAYOUT ── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 1; }
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(1.65rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.35rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(.97rem, 2vw, 1.2rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-light);
  padding: .28rem .8rem; border-radius: 100px; margin-bottom: 1rem;
}
.eyebrow.light { color: #93C5FD; background: rgba(255,255,255,.12); }

.section-head { margin-bottom: 2.5rem; }
.section-head.center { text-align: center; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { color: var(--gray-600); max-width: 540px; font-size: .93rem; }
.section-head.center p { margin: 0 auto; }

.accent-bar { width: 44px; height: 3px; border-radius: 3px; background: var(--red); margin: .75rem 0 1.25rem; }
.section-head.center .accent-bar { margin-left: auto; margin-right: auto; }
.accent-bar.light { background: #FCA5A5; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .9rem;
  padding: .8rem 1.5rem; border-radius: var(--r-sm); min-height: 48px;
  transition: all var(--dur) var(--ease); white-space: nowrap;
  cursor: pointer; border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--red); color: var(--white); box-shadow: 0 4px 18px rgba(217,33,64,.32); }
.btn-primary:hover  { background: #B91C3E; box-shadow: 0 8px 28px rgba(217,33,64,.42); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost-white { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn-ghost-white:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); }
.btn-blue { background: var(--blue); color: var(--white); box-shadow: var(--sh-sm); }
.btn-blue:hover { background: var(--navy); transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-outline-blue { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline-blue:hover { background: var(--blue-light); }
.btn-lg { padding: .95rem 1.9rem; font-size: .97rem; min-height: 52px; }
.btn-full { width: 100%; }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* ══ NAVBAR ══ */
#navbar {
  position: fixed; inset: 0 0 auto; z-index: 900;
  padding: 1rem 0;
  transition: background var(--dur), box-shadow var(--dur), padding var(--dur);
}
#navbar.scrolled {
  background: rgba(255,255,255,.97); backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--gray-200), var(--sh-sm);
  padding: .6rem 0;
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.nav-logo { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.logo-img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: var(--white); padding: 2px; }
.logo-img-placeholder {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), var(--blue-mid));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-words { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--white); }
.logo-words em { color: #FCA5A5; font-style: normal; }
#navbar.scrolled .logo-words { color: var(--navy); }
#navbar.scrolled .logo-words em { color: var(--red); }

.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .86rem; font-weight: 600;
  color: rgba(255,255,255,.85); transition: color var(--dur); position: relative;
}
#navbar.scrolled .nav-links a { color: var(--gray-600); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--white); }
#navbar.scrolled .nav-links a:hover { color: var(--blue); }

.nav-actions { display: none; }
@media (min-width: 900px) { .nav-actions { display: flex; align-items: center; gap: .75rem; } }
.nav-cta {
  background: var(--red); color: var(--white) !important;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .84rem;
  padding: .52rem 1.1rem; border-radius: 8px;
  transition: background var(--dur), transform var(--dur);
  box-shadow: 0 3px 12px rgba(217,33,64,.28);
}
.nav-cta:hover { background: #B91C3E !important; transform: translateY(-1px); }
.nav-cta::after { display: none !important; }
/* Mobile only */
@media (max-width: 899px){

  .logo-words{
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }
  body.drawer-open .logo-words{
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
  }

}
/* Hamburger */
.hamburger {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; border-radius: 9px;
  cursor: pointer; transition: background var(--dur); -webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) { .hamburger { display: none; } }
.hamburger:hover { background: rgba(255,255,255,.12); }
#navbar.scrolled .hamburger:hover { background: var(--gray-100); }
.hamburger span { width: 22px; height: 2px; border-radius: 2px; background: var(--white); transition: transform var(--dur) var(--ease), opacity var(--dur); }
#navbar.scrolled .hamburger span { background: var(--gray-900); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ MOBILE DRAWER ══ */
.mobile-drawer { position: fixed; inset: 0; z-index: 850; pointer-events: none; }
.mobile-drawer.open { pointer-events: auto; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15,37,87,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s var(--ease); }
.mobile-drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85vw);
  background: var(--white); transform: translateX(100%); transition: transform .32s var(--ease);
  display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.15); overflow-y: auto;
}
.mobile-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--gray-200); }
.drawer-close { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gray-600); background: var(--gray-100); cursor: pointer; transition: background var(--dur); flex-shrink: 0; }
.drawer-close:hover { background: var(--gray-200); }
.drawer-nav { flex: 1; padding: .5rem 0; }
.drawer-nav a {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.25rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .94rem; color: var(--gray-900);
  border-left: 3px solid transparent; transition: all var(--dur);
}
.drawer-nav a:hover { color: var(--blue); background: var(--blue-pale); border-left-color: var(--blue); }
.nav-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); transition: background var(--dur); }
.drawer-nav a:hover .nav-icon { background: var(--blue-light); }
.drawer-footer { padding: 1.25rem; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: .75rem; }

/* ══ HERO ══ */
#hero {
  position: relative;
  padding: 90px 0 5rem;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Background Image - Ganti path foto sesuai keinginan Anda */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/bg-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Overlay gelap agar teks tetap terbaca */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(148deg, rgba(15, 37, 87, 0.825) 0%, rgba(22, 53, 145, 0.825) 45%, rgba(30, 111, 232, 0.825) 100%);
  z-index: 1;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.hero-blob-1 { 
  width: 500px; 
  height: 500px; 
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%,transparent 70%); 
  top: -180px; 
  right: -120px; 
}

.hero-blob-2 { 
  width: 280px; 
  height: 280px; 
  background: radial-gradient(circle, rgba(217,33,64,.12) 0%,transparent 70%); 
  bottom: -60px; 
  left: -60px; 
}

#hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 50px;
  background: var(--white);
  clip-path: polygon(0 100%,100% 0,100% 100%);
  z-index: 3;
}

@media (min-width: 768px) { 
  #hero { padding: 110px 0 6rem; }
  #hero::after { height: 72px; }
}

/* Container harus di atas overlay */
#hero .container {
  position: relative;
  z-index: 10;
}

/* Hero inner tetap sama */
.hero-inner { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 2.5rem; 
  align-items: center; 
}

@media (min-width: 1024px) { 
  .hero-inner { 
    grid-template-columns: 1fr 400px; 
    gap: 4rem; 
  } 
}

/* Sisanya tetap seperti sebelumnya */
.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #BAE6FD;
  font-size: .76rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(4px);
}

.live-dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: #4ADE80; 
  animation: blink 1.6s ease-in-out infinite; 
}

.hero-title { 
  color: var(--white); 
  margin-bottom: 1.1rem; 
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-title .hl { 
  color: #FCA5A5; 
  position: relative; 
  display: inline-block; 
}

.hero-sub { 
  color: rgba(255,255,255,.9); 
  font-size: clamp(.9rem, 2.2vw, 1.08rem); 
  max-width: 560px; 
  margin-bottom: 1.1rem; 
  line-height: 1.75; 
}

.hero-callout {
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-left: 3px solid #FCA5A5;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .9rem 1.1rem;
  color: rgba(255,255,255,.95);
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 560px;
}

.hero-callout strong { color: #FFD966; }

.hero-ctas { 
  display: flex; 
  flex-direction: column; 
  gap: .75rem; 
  margin-bottom: 2.5rem; 
}

@media (min-width: 480px) { 
  .hero-ctas { 
    flex-direction: row; 
    flex-wrap: wrap; 
  } 
}

.hero-stats { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: .65rem; 
}

@media (min-width: 480px) { 
  .hero-stats { 
    grid-template-columns: repeat(4, 1fr); 
  } 
}

.hero-stat { 
  text-align: center; 
  padding: .9rem .75rem; 
  background: rgba(0,0,0,.3); 
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); 
  border-radius: var(--r-sm); 
}

.hero-stat .num { 
  display: block; 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-weight: 800; 
  font-size: 1.5rem; 
  color: var(--white); 
  line-height: 1.1; 
}

.hero-stat .lbl { 
  font-size: .7rem; 
  color: rgba(255,255,255,.7); 
  font-weight: 500; 
  margin-top: .2rem; 
}

/* Hero right panel - transparan dengan blur */
.hero-panel { display: none; }
@media (min-width: 1024px) { .hero-panel { display: block; } }

.panel-card { 
  background: rgba(0,0,0,.4); 
  backdrop-filter: blur(20px); 
  border: 1px solid rgba(255,255,255,.2); 
  border-radius: var(--r-lg); 
  padding: 1.5rem; 
}

.panel-title { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-weight: 700; 
  color: var(--white); 
  font-size: .88rem; 
  margin-bottom: 1rem; 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
}

.stock-item { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: .6rem .9rem; 
  background: rgba(255,255,255,.1); 
  border: 1px solid rgba(255,255,255,.15); 
  border-radius: 8px; 
  margin-bottom: .5rem; 
}

.stock-item:last-child { margin-bottom: 0; }

.stock-name { 
  font-size: .82rem; 
  font-weight: 600; 
  color: rgba(255,255,255,.95); 
}

.stock-badge { 
  font-size: .65rem; 
  font-weight: 700; 
  letter-spacing: .04em; 
  text-transform: uppercase; 
  padding: .2rem .55rem; 
  border-radius: 5px; 
}

.stock-badge.ready { background: rgba(74,222,128,.2); color: #4ADE80; }
.stock-badge.order { background: rgba(251,191,36,.2); color: #FBBF24; }

/* Animasi */
@keyframes blink { 
  0%,100%{opacity:1;transform:scale(1);} 
  50%{opacity:.5;transform:scale(1.4);} 
}

/* ══ TRUST BAR ══ */
#trust { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 1.1rem 0; }
.trust-scroll { display: flex; gap: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.trust-scroll::-webkit-scrollbar { display: none; }
.trust-item { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: .8rem; color: var(--gray-600); flex-shrink: 0; }
.ti-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }

/* ══ BRANDS ══ */
#brands { padding: 3rem 0; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.brands-label { text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 1.5rem; }
.brands-scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; }
.brand-pill {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 100px; padding: .4rem 1rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .82rem;
  color: var(--navy); box-shadow: var(--sh-xs);
  transition: all var(--dur) var(--ease);
}
.brand-pill:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.brand-pill.highlight { background: var(--navy); color: var(--white); border-color: var(--navy); }
.brand-pill.highlight:hover { background: var(--blue); border-color: var(--blue); }

/* ══ KATEGORI ══ */
#kategori { padding: 4rem 0 5rem; background: var(--white); }
.kat-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 600px)  { .kat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kat-grid { grid-template-columns: repeat(3, 1fr); } }
.kat-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md);
  padding: 1.5rem; box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.kat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); }
.kat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.kat-icon-wrap { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--blue); flex-shrink: 0; }
.kat-card h3 { margin-bottom: .5rem; }
.kat-card p  { color: var(--gray-600); font-size: .86rem; line-height: 1.65; flex: 1; margin-bottom: 1.1rem; }
.kat-cta { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .83rem; color: var(--blue); transition: gap var(--dur), color var(--dur); }
.kat-cta svg { transition: transform var(--dur); }
.kat-card:hover .kat-cta { color: var(--red); gap: .65rem; }
.kat-card:hover .kat-cta svg { transform: translateX(3px); }

/* ══ PRODUK UNGGULAN ══ */
#produk { 
  padding: 4rem 0 5rem; 
  background: var(--gray-50); 
}

/* Grid Layout */
.produk-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.5rem; 
}

@media (min-width: 600px) { 
  .produk-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

@media (min-width: 1024px) { 
  .produk-grid { 
    grid-template-columns: repeat(4, 1fr); 
  } 
}

/* Card Produk */
.produk-card { 
  background: var(--white); 
  border: 1px solid var(--gray-200); 
  border-radius: var(--r-md); 
  overflow: hidden; 
  box-shadow: var(--sh-xs); 
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); 
  display: flex; 
  flex-direction: column; 
}

.produk-card:hover { 
  transform: translateY(-5px); 
  box-shadow: var(--sh-lg); 
}

/* Container Gambar - 1:1 Square */
.p-img { 
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--blue-mid));
}

/* Gambar Real */
.p-img-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

.produk-card:hover .p-img-real {
  transform: scale(1.05);
}

/* Fallback SVG / Placeholder */
.p-img-inner { 
  background: rgba(255,255,255,.1); 
  backdrop-filter: blur(8px); 
  border: 1px solid rgba(255,255,255,.2); 
  border-radius: 12px; 
  padding: 1.25rem; 
  z-index: 1;
}

/* Badge Label */
.p-tag { 
  position: absolute; 
  top: 12px; 
  right: 12px; 
  z-index: 2; 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-size: 0.65rem; 
  font-weight: 800; 
  letter-spacing: 0.06em; 
  text-transform: uppercase; 
  background: var(--red); 
  color: var(--white); 
  padding: 0.25rem 0.65rem; 
  border-radius: 20px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Body Card */
.p-body { 
  padding: 1.25rem; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 0.85rem; 
}

/* Nama Produk */
.p-name { 
  font-size: 1rem; 
  font-weight: 800;
  margin-bottom: 0.2rem;
  color: var(--navy);
  line-height: 1.3;
}

/* Meta / Merek */
.p-meta { 
  font-size: 0.75rem; 
  color: var(--gray-500); 
  margin-top: -0.2rem; 
}

/* Spesifikasi Tags */
.p-specs { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  margin: 0.25rem 0;
}

.p-spec { 
  background: var(--blue-light); 
  color: var(--navy); 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-size: 0.7rem; 
  font-weight: 700; 
  padding: 0.25rem 0.65rem; 
  border-radius: 20px; 
}

/* Harga */
.p-price { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  font-size: 0.8rem; 
  color: var(--gray-600); 
  padding: 0.65rem 0.9rem; 
  background: var(--gray-50); 
  border-radius: var(--r-sm); 
  margin: 0.25rem 0;
}

.p-price strong { 
  color: var(--blue); 
  font-weight: 700; 
  font-size: 0.85rem;
}

/* Tombol */
.produk-card .btn {
  margin-top: 0.25rem;
  width: 100%;
  justify-content: center;
}

/* Optional: efek hover tambahan */
.produk-card .btn-primary {
  background: var(--red);
}

.produk-card .btn-primary:hover {
  background: #b91c3e;
  transform: translateY(-2px);
}
/* Agar tombol sejajar rapi di semua card */
.produk-card .p-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.produk-card .btn {
  margin-top: auto;
}
/* ══ CAROUSEL LOGO ══ */
.logo-carousel {
  padding: 3rem 0;
  background: var(--white);
  overflow: hidden;
  position: relative;
}

.logo-track {
  display: flex;
  gap: 3rem;
  animation: scrollLogos 25s linear infinite;
  width: fit-content;
}

.logo-carousel:hover .logo-track {
  animation-play-state: paused;
}

.logo-item {
  flex-shrink: 0;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-item img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

/* Logo placeholder style */
.logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .logo-item {
    width: 100px;
    height: 60px;
  }
  .logo-item img {
    max-height: 45px;
  }
}
/* ══ PELANGGAN (CUSTOMERS) ══ */
#pelanggan { padding: 4rem 0 5rem; background: var(--white); }

.pelanggan-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.5rem; 
}

@media (min-width: 600px)  { 
  .pelanggan-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

@media (min-width: 1024px) { 
  .pelanggan-grid { 
    grid-template-columns: repeat(3, 1fr); 
  } 
}

.pelanggan-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 1.5rem;
  box-shadow: var(--sh-xs);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all var(--dur) var(--ease);
}

.pelanggan-card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--sh-md);
  border-color: var(--blue-light);
}

.pelanggan-icon { 
  width: 52px; 
  height: 52px; 
  border-radius: 14px; 
  flex-shrink: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(135deg, var(--blue-light), var(--blue-pale));
  color: var(--blue);
  transition: all var(--dur) var(--ease);
}

.pelanggan-card:hover .pelanggan-icon {
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: var(--white);
}

.pelanggan-text h4 { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-size: 1rem; 
  font-weight: 700; 
  margin-bottom: 0.5rem; 
  color: var(--navy); 
}

.pelanggan-text p { 
  font-size: 0.85rem; 
  color: var(--gray-600); 
  line-height: 1.65; 
}

.pelanggan-stats-row { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 1rem; 
  margin-top: 3rem; 
}

@media (min-width: 600px) { 
  .pelanggan-stats-row { 
    grid-template-columns: repeat(4, 1fr); 
  } 
}

.pelanggan-stat { 
  text-align: center; 
  padding: 1.5rem 1rem; 
  background: linear-gradient(135deg, var(--navy), var(--blue)); 
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease);
}

.pelanggan-stat:hover {
  transform: translateY(-3px);
}

.pelanggan-stat .num { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-weight: 800; 
  font-size: 1.75rem; 
  color: var(--white); 
  display: block; 
  line-height: 1.2; 
}

.pelanggan-stat .lbl { 
  font-size: 0.75rem; 
  color: rgba(255,255,255,.7); 
  font-weight: 500; 
  margin-top: 0.35rem; 
  letter-spacing: 0.5px;
}
/* ══ CUSTOMER LOGOS ══ */
.customer-logos {
  padding: 3.5rem 0;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.logo-customer {
  width: 100%;
  max-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0.5rem;
}

.logo-customer img {
  width: 100%;
  max-width: 160px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

/* Responsive Tablet */
@media (max-width: 768px) {
  .customer-logos {
    padding: 2.5rem 0;
  }
  
  .logos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    row-gap: 2rem;
  }
  
  .logo-customer {
    max-width: 140px;
  }
  
  .logo-customer img {
    max-width: 120px;
    max-height: 70px;
  }
}

/* Responsive Mobile */
@media (max-width: 480px) {
  .customer-logos {
    padding: 2rem 0;
  }
  
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    row-gap: 2rem;
  }
  
  .logo-customer {
    max-width: 130px;
  }
  
  .logo-customer img {
    max-width: 110px;
    max-height: 65px;
  }
}

/* ══ TESTIMONI ══ */
#testimoni { padding: 4rem 0 5rem; background: linear-gradient(150deg, var(--navy) 0%, #163591 50%, #1A4FC5 100%); position: relative; overflow: hidden; }
#testimoni::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 44px 44px; }
#testimoni::after { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 50px; background: var(--white); clip-path: polygon(0 0,100% 0,100% 40%,0 100%); }
@media (min-width: 768px) { #testimoni::after { height: 72px; } }
.testi-content { position: relative; z-index: 1; }
.testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 768px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card { background: rgba(255,255,255,.07); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 1.5rem; transition: transform var(--dur) var(--ease); }
.testi-card:hover { transform: translateY(-4px); }
.testi-stars { display: flex; gap: 2px; margin-bottom: 1rem; }
.testi-stars span { font-size: .95rem; color: #FBBF24; }
.testi-quote { color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.75; font-style: italic; margin-bottom: 1.25rem; padding-left: .85rem; border-left: 2px solid rgba(252,165,165,.4); }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.1)); border: 2px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--white); font-size: .95rem; }
.testi-info .name { color: var(--white); font-weight: 700; font-size: .88rem; }
.testi-info .role { color: rgba(255,255,255,.55); font-size: .76rem; }

/* ══ TENTANG ══ */
#tentang { 
  padding: 4rem 0 5rem; 
  background: var(--gray-50); 
}

.tentang-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 2.5rem; 
  align-items: center; 
}

@media (min-width: 1024px) { 
  .tentang-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 4rem; 
  } 
}

/* Style untuk foto */
.tentang-image {
  position: relative;
}

.about-image-wrapper {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: linear-gradient(135deg, var(--navy), var(--blue));
}

.about-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-image-wrapper:hover .about-img {
  transform: scale(1.03);
}

.about-image-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 2;
}

.about-image-badge svg {
  flex-shrink: 0;
  color: var(--red);
}

.about-image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

/* Stats */
.tentang-stats { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .75rem; 
  margin-bottom: 2rem;
}

.stat-box { 
  background: linear-gradient(135deg, var(--navy), var(--blue)); 
  border-radius: var(--r-md); 
  padding: 1.25rem 1rem; 
  text-align: center; 
  transition: transform var(--dur) var(--ease);
}

.stat-box:hover {
  transform: translateY(-3px);
}

.stat-box .num { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-weight: 800; 
  font-size: 1.6rem; 
  color: var(--white); 
  display: block; 
  line-height: 1.1; 
}

.stat-box .lbl { 
  font-size: .73rem; 
  color: rgba(255,255,255,.65); 
  font-weight: 500; 
  margin-top: .2rem; 
}

.stat-box.wide { 
  grid-column: 1/-1; 
}

.stat-box.wide .num { 
  font-size: 1rem; 
  letter-spacing: -.01em; 
}

.check-list { 
  margin: 1.25rem 0 2rem; 
}

.check-item { 
  display: flex; 
  gap: .75rem; 
  align-items: flex-start; 
  padding: .75rem 0; 
  border-bottom: 1px solid var(--gray-200); 
  font-size: .88rem; 
  color: var(--gray-600); 
}

.check-item:last-child { 
  border-bottom: none; 
}

.check-item .chk { 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  flex-shrink: 0; 
  background: linear-gradient(135deg, var(--blue), var(--navy)); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-top: 1px; 
}

/* Gudang locations */
.gudang-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  margin: .75rem 0 1.5rem; 
}

.gudang-badge { 
  background: var(--blue-light); 
  color: var(--navy); 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  font-size: .76rem; 
  font-weight: 700; 
  padding: .28rem .7rem; 
  border-radius: 100px; 
  transition: all var(--dur) var(--ease);
}

.gudang-badge:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-2px);
}

/* Responsive Mobile */
@media (max-width: 1024px) {
  .tentang-grid {
    gap: 2rem;
  }
  
  .about-image-badge {
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
  }
  
  .about-image-badge svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .tentang-image {
    order: -1; /* Foto di atas di mobile */
  }
  
  .about-img {
    aspect-ratio: 3 / 4;
  }
  
  .about-image-badge {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
  }
}
/* Gudang locations */
.gudang-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.5rem; }
.gudang-badge { background: var(--blue-light); color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; font-size: .76rem; font-weight: 700; padding: .28rem .7rem; border-radius: 100px; }

/* ══ CTA KONTAK ══ */
#kontak { padding: 4rem 0 5rem; background: var(--white); }
.cta-wrap { background: linear-gradient(135deg, var(--navy) 0%, #163591 50%, var(--blue-mid) 100%); border-radius: var(--r-xl); padding: 3rem 1.5rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-lg); }
@media (min-width: 640px)  { .cta-wrap { padding: 3.5rem 2.5rem; } }
@media (min-width: 1024px) { .cta-wrap { padding: 4.5rem 5rem; } }
.cta-wrap::before { content: ''; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06) 0%,transparent 70%); }
.cta-wrap h2 { color: var(--white); margin-bottom: 1rem; }
.cta-wrap p  { color: rgba(255,255,255,.75); margin-bottom: 2rem; font-size: .95rem; max-width: 440px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
@media (min-width: 480px) { .cta-btns { flex-direction: row; justify-content: center; } }
.cta-contacts { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: 2.5rem; }
@media (min-width: 600px) { .cta-contacts { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1.5rem; } }
.cta-contact-item { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.75); font-size: .83rem; }
.cta-contact-item strong { color: var(--white); }

/* ══ FOOTER ══ */
footer { background: var(--gray-900); color: rgba(255,255,255,.6); padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.f-logo-wrap { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.f-logo-img { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; background: rgba(255,255,255,.1); padding: 3px; }
.f-logo-img-placeholder { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); display: flex; align-items: center; justify-content: center; }
.f-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--white); }
.f-brand-name em { color: #FCA5A5; font-style: normal; }
.f-company { font-size: .75rem; color: rgba(255,255,255,.45); font-family: 'Plus Jakarta Sans', sans-serif; margin-top: .15rem; }
.f-brand-desc { font-size: .83rem; line-height: 1.75; margin-bottom: 1.25rem; }
.f-contact { display: flex; flex-direction: column; gap: .75rem; }
.f-contact-row { display: flex; align-items: center; gap: .75rem; font-size: .81rem; }
.f-contact-row .ic { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; }
.f-col h5 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .85rem; color: var(--white); margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.f-col ul li { margin-bottom: .65rem; }
.f-col ul li a { font-size: .82rem; color: rgba(255,255,255,.6); transition: color var(--dur); }
.f-col ul li a:hover { color: var(--white); }
.f-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: .78rem; }
@media (min-width: 600px) { .f-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.f-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.f-links a { color: rgba(255,255,255,.5); transition: color var(--dur); }
.f-links a:hover { color: var(--white); }

/* ══ FLOATING WA ══ */
#wa-btn {
  position: fixed; bottom: 20px; right: 16px; z-index: 800;
  display: flex; align-items: center; gap: .6rem;
  background: var(--green-wa); color: var(--white);
  border-radius: 100px; padding: .7rem 1.1rem .7rem .9rem;
  box-shadow: 0 6px 28px rgba(31,175,56,.4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: wa-float 2.5s ease-in-out infinite;
}
@keyframes wa-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
#wa-btn:hover { animation: none; transform: scale(1.04); box-shadow: 0 10px 38px rgba(31,175,56,.5); }
#wa-btn .wa-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .78rem; white-space: nowrap; }
#wa-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 100px; background: rgba(31,175,56,.2); animation: wa-ring 2.5s ease-out infinite; }
@keyframes wa-ring { 0%{transform:scale(1);opacity:.5;} 100%{transform:scale(1.2);opacity:0;} }
@media (max-width: 479px) { #wa-btn { padding: 0; width: 54px; height: 54px; justify-content: center; border-radius: 50%; } #wa-btn .wa-label { display: none; } }

/* UTILS */
.ta-c { text-align: center; }
.mt-8 { margin-top: 2rem; }