/* =========================================================
   PT. MAHARANI KONSTRUKSI INDONESIA — Design Tokens
   Tema: Industrial / Engineering Blueprint
   Display : Barlow Condensed | Body : Work Sans | Mono : IBM Plex Mono
   Palette : Ink #071A3D · Blue #2148C0 · Deep #0B2A66 · Amber #F5A524
             Cloud #F4F6FA · Steel #4A5568
   ========================================================= */

:root{
  --ink:        #071A3D;
  --deep:       #0B2A66;
  --blue:       #2148C0;
  --blue-lt:    #4C74E8;
  --amber:      #F5A524;
  --amber-dk:   #C97F0F;
  --cloud:      #F4F6FA;
  --white:      #FFFFFF;
  --steel:      #48546B;
  --steel-soft: #8792A8;
  --line:       #E1E6F0;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 16px;
  --radius-sm: 8px;
  --shadow-soft: 0 24px 60px -28px rgba(7,26,61,.45);
  --shadow-card: 0 12px 32px -18px rgba(7,26,61,.22);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
 }

h1,h2,h3,h4,h5,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
h1,h2,h3{ letter-spacing: -.01em; }

.font-mono{ font-family: var(--font-mono); }
.text-steel{ color: var(--steel) !important; }
.text-amber{ color: var(--amber) !important; }
.text-blue{ color: var(--blue) !important; }
.bg-ink{ background: var(--ink) !important; }
.bg-cloud{ background: var(--cloud) !important; }

.container-xl {
    max-width: 776.98px;
    margin-right: auto;
    margin-left: auto;
}

/* -------------------- Eyebrow label (blueprint corner-bracket) -------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  padding: .35rem .2rem;
  position:relative;
}
.eyebrow::before{
  content:"//";
  color: var(--amber);
  font-weight:700;
}
.eyebrow.on-dark{ color:#9FB4F0; }
.eyebrow.on-dark::before{ color: var(--amber); }

/* -------------------- Navbar -------------------- */
.site-header{
  position: sticky; top:0; z-index: 1050;
  background: rgba(244,246,250,.85);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow: 0 8px 30px -20px rgba(7,26,61,.4); }

.brand-mark{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
}

.brand-mark .mark{
  width: 62px;
  height: 42px;
  border-radius: 8px;

  background: transparent !important;
  box-shadow: none !important;

  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;

  flex:none;
}

.brand-mark .mark img{
  width:100%;
  height:100%;
}

.brand-mark .brand-text{
  font-family: var(--font-display);
  font-weight:600;
  line-height:1.05;
  color: var(--ink);
  font-size: 1.02rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.brand-mark .brand-text small{
  display:block;
  font-family: var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  color: var(--steel-soft);
  text-transform:uppercase;
  font-weight:500;
}
.navbar-nav .nav-link{
  font-weight:600; font-size:.9rem; color: var(--ink);
  padding: .55rem .95rem !important;
  position:relative;
  text-transform: uppercase; letter-spacing:.03em;
}
.navbar-nav .nav-link:hover{ color: var(--blue); }
.navbar-nav .nav-link.active{ color: var(--blue) !important; }
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.15rem; height:2px;
  background: var(--amber);
}
.btn-nav-cta{
  font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.02em;
  background: var(--amber); color: var(--ink) !important;
  border-radius: 4px; padding:.6rem 1.25rem !important;
  box-shadow: 0 10px 22px -10px rgba(245,165,36,.7);
}
.btn-nav-cta:hover{ background: var(--amber-dk); color:var(--ink) !important; }

/* -------------------- Buttons -------------------- */
.btn{ font-weight:600; border-radius: 4px; text-transform:uppercase; font-size:.86rem; letter-spacing:.03em; }
.btn-lg{ padding:.85rem 1.7rem; }
.btn-primary{
  background: var(--amber); border-color: var(--amber); color: var(--ink);
  box-shadow: 0 12px 26px -12px rgba(245,165,36,.7);
}
.btn-primary:hover{ background: var(--amber-dk); border-color: var(--amber-dk); color:var(--ink); }
.btn-outline-light-line{ border:1.5px solid rgba(255,255,255,.35); color:#fff; background:transparent; }
.btn-outline-light-line:hover{ background: rgba(255,255,255,.1); color:#fff; }
.btn-dark-line{ border:1.5px solid var(--line); color: var(--ink); background:#fff; }
.btn-dark-line:hover{ border-color: var(--blue); color: var(--blue); }
.btn-navy{ background: var(--ink); border-color: var(--ink); color:#fff; }
.btn-navy:hover{ background: var(--deep); border-color: var(--deep); color:#fff; }

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  background: var(--ink);
  color:#fff;
  overflow:hidden;
  padding-top: 5.5rem;
}
.hero .blueprint-grid{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 40%, transparent 85%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(90% 120% at 85% 10%, rgba(33,72,192,.5), transparent 60%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:2; }

.hero-title{
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 600; line-height:1.03; color:#fff;
}
.hero-title .accent{ color: var(--amber); }
.hero-lead{ color: #C3CCE6; font-size:1.1rem; max-width: 540px; }

.hero-stats{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family: var(--font-display); font-size:1.9rem; color:#fff; }
.hero-stats .stat span{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:#8FA0D6; text-transform:uppercase; }

/* Signature element: machinery "nameplate" spec card */
.nameplate{
  background: linear-gradient(155deg, #12234E, #0A1735);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.nameplate::before, .nameplate::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd6e6, #7f8aa6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.nameplate::before{ top:12px; left:12px; }
.nameplate::after{ top:12px; right:12px; }
.nameplate .rivet-bl, .nameplate .rivet-br{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd6e6, #7f8aa6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  bottom:12px;
}
.nameplate .rivet-bl{ left:12px; }
.nameplate .rivet-br{ right:12px; }
.nameplate-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 1.6rem .9rem;
  border-bottom: 1px dashed rgba(255,255,255,.18);
}
.nameplate-head b{ font-family: var(--font-display); color:#fff; font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; }
.nameplate-head span{ font-family: var(--font-mono); font-size:.68rem; color: var(--amber); letter-spacing:.08em; }
.nameplate-body{ padding: 1.1rem 1.6rem 1.5rem; }
.spec-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-family: var(--font-mono); font-size:.84rem;
}
.spec-row:last-child{ border-bottom:none; }
.spec-row .k{ color:#8FA0D6; letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; }
.spec-row .v{ color:#fff; font-weight:500; }
.spec-row .v .unit{ color: var(--amber); font-size:.72rem; margin-left:.15rem; }

/* -------------------- Section shell -------------------- */
.section{ padding: 5.5rem 0; }
.section-head{ max-width: 680px; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top:.5rem; }

.page-hero{
  background: var(--ink); color:#fff;
  padding: 7.5rem 0 4.5rem;
  position:relative; overflow:hidden;
}
.page-hero .blueprint-grid{
  position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(120% 100% at 15% 0%, #000 40%, transparent 85%);
}
.page-hero > .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size: clamp(2.1rem, 4vw, 3.2rem); }
.page-hero p{ color:#C3CCE6; max-width:640px; }
.breadcrumb-mini{
  font-family: var(--font-mono); font-size:.76rem; color:#8FA0D6;
  letter-spacing:.05em; text-transform:uppercase;
}
.breadcrumb-mini a{ color:#8FA0D6; text-decoration:none; }
.breadcrumb-mini a:hover{ color:#fff; }

/* -------------------- Cards -------------------- */
.card-soft{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  height:100%;
}
.card-soft:hover{ transform: translateY(-6px); border-color: rgba(33,72,192,.3); box-shadow: 0 24px 50px -20px rgba(7,26,61,.25); }

.icon-tile{
  width:58px; height:58px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, var(--blue), var(--ink));
  color:#fff; flex:none;
  box-shadow: 0 12px 24px -10px rgba(33,72,192,.55);
}
.icon-tile svg{ width:28px; height:28px; }
.icon-tile.amber{ background: linear-gradient(150deg, var(--amber), var(--amber-dk)); box-shadow: 0 12px 24px -10px rgba(245,165,36,.55); }

/* -------------------- Product cards -------------------- */
.product-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; height:100%;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(7,26,61,.25); }
.product-visual{
  height:190px; position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--deep), var(--ink));
  display:flex; align-items:center; justify-content:center;
}
.product-visual svg{ width:86px; height:86px; opacity:.95; }
.product-visual .tag{
  position:absolute; top:14px; left:14px;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  color: var(--ink); background: var(--amber);
  padding:.3rem .6rem; border-radius:3px; font-weight:700;
}
.product-body{ padding: 1.5rem 1.5rem 1.7rem; }
.product-body p{ color: var(--steel); font-size:.92rem; }

/* Detail block (products.php long-form sections) */
.product-detail{ padding: 3.2rem 0; border-bottom: 1px solid var(--line); }
.product-detail:last-of-type{ border-bottom:none; }
.product-detail-visual{
  border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(155deg, var(--deep), var(--ink));
  min-height: 280px; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.product-detail-visual svg{ width:120px; height:120px; }
.product-detail-visual .grid-overlay{
  position:absolute; inset:0; opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* -------------------- Values grid -------------------- */
.value-card{ padding: 1.9rem; border:1px solid var(--line); border-radius: var(--radius); background:#fff; height:100%; }
.value-num{ font-family: var(--font-display); font-size:2.4rem; color: var(--line); line-height:1; font-weight:600; }

/* -------------------- Mission list -------------------- */
.mission-item{ display:flex; gap:1.1rem; padding:1.25rem 0; border-top:1px solid rgba(255,255,255,.1); }
.mission-item:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.mission-num{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; color: var(--amber); flex:none; width:38px; }

/* -------------------- Why-us feature grid -------------------- */
.why-item{ display:flex; gap:1.25rem; }
.why-item .icon-tile{ flex:none; }

/* -------------------- Projects / gallery -------------------- */
.filter-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-tabs button{
  border:1px solid var(--line); background:#fff; color: var(--steel);
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:999px; font-weight:600;
  transition: all .2s ease;
}
.filter-tabs button:hover{ border-color: var(--blue); color: var(--blue); }
.filter-tabs button.active{ background: var(--ink); border-color: var(--ink); color:#fff; }

.gallery-card{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow: var(--shadow-card); }
.gallery-visual{
  height:220px; position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--deep), var(--ink));
  display:flex; align-items:center; justify-content:center;
}
.gallery-visual svg{ width:74px; height:74px; opacity:.92; }
.gallery-visual .tag{
  position:absolute; top:14px; left:14px;
  font-family: var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  color: var(--ink); background: var(--amber);
  padding:.28rem .55rem; border-radius:3px; font-weight:700;
}
.gallery-body{ padding: 1.3rem 1.4rem 1.5rem; }
.gallery-body p{ color: var(--steel); font-size:.88rem; margin-bottom:0; }

/* -------------------- Contact -------------------- */
.contact-info-card{
  background: var(--ink); color:#fff; border-radius: var(--radius);
  padding: 2.4rem; position:relative; overflow:hidden;
}
.contact-info-item{ display:flex; gap:1rem; padding: 1.15rem 0; border-top:1px solid rgba(255,255,255,.1); }
.contact-info-item:first-of-type{ border-top:none; }
.contact-info-item .icon-tile{ width:46px; height:46px; }
.contact-info-item .icon-tile svg{ width:20px; height:20px; }
.contact-info-item span{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#8FA0D6; margin-bottom:.15rem; }
.contact-info-item a, .contact-info-item p{ color:#fff; margin:0; text-decoration:none; font-weight:500; }

.form-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow-card); }
.form-label{ font-weight:600; font-size:.86rem; color: var(--ink); }
.form-control, .form-select{
  border:1.5px solid var(--line); border-radius: 6px; padding:.65rem .9rem; font-size:.92rem;
}
.form-control:focus, .form-select:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,72,192,.12); }

.map-frame{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-card); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }

/* -------------------- Founder section -------------------- */
.founder-visual{
  border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(155deg, var(--deep), var(--ink));
  min-height: 340px; display:flex; align-items:center; justify-content:center; position:relative;
}
.founder-visual svg{ width:130px; height:130px; opacity:.9; }

/* -------------------- CTA band -------------------- */
.cta-band{
  background: linear-gradient(120deg, var(--ink), var(--deep));
  border-radius: 20px; color:#fff; padding: 3.2rem;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.1;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h3{ color:#fff; }

/* -------------------- Footer -------------------- */
.site-footer{ background: var(--ink); color:#B9C4E8; padding: 4rem 0 2rem; }
.site-footer h6{ color:#fff; font-family: var(--font-display); letter-spacing:.02em; text-transform:uppercase; font-size:1rem; }
.site-footer a{ color:#B9C4E8; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.site-footer .list-unstyled li{ margin-bottom:.6rem; font-size:.92rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:2.5rem; padding-top:1.5rem; font-size:.82rem; color:#7C88AD; }
.social-dot{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s ease;
}
.social-dot:hover{ background: var(--amber); border-color: var(--amber); color: var(--ink); }

/* -------------------- Floating: WhatsApp -------------------- */
.wa-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 1080;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; text-decoration:none;
  box-shadow: 0 14px 30px -10px rgba(37,211,102,.7);
  animation: floatPulse 2.4s ease-in-out infinite;
}
.wa-float:hover{ color:#fff; transform: scale(1.06); }
@keyframes floatPulse{
  0%,100%{ box-shadow: 0 14px 30px -10px rgba(37,211,102,.7); }
  50%{ box-shadow: 0 14px 30px -6px rgba(37,211,102,1), 0 0 0 10px rgba(37,211,102,.12); }
}

.back-to-top{
  position: fixed; right: 22px; bottom: 92px; z-index:1075;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }

/* -------------------- Misc -------------------- */
.divider-dot{ width:5px; height:5px; border-radius:50%; background: var(--steel-soft); display:inline-block; }

@media (max-width: 991.98px){
  .hero{ padding-top: 4.5rem; }
  .hero-stats{ gap:1.4rem; }
  .nameplate{ margin-top: 2.5rem; }
}
@media (max-width: 575.98px){
  .cta-band{ padding: 2.2rem 1.4rem; border-radius:16px; }
  .wa-float{ width:52px; height:52px; font-size:1.45rem; right:16px; bottom:16px; }
  .back-to-top{ right:16px; bottom:80px; width:40px; height:40px; }
  .contact-info-card, .form-card{ padding: 1.6rem; }
}



.product-detail-visual .grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE FIX — Prevent horizontal overflow on all devices
   ========================================================= */

/* Global viewport safety */
html,
body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

html{
  overflow-x:hidden;
}

body{
  overflow-x:hidden;
}

/* Bootstrap/container safety */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Override custom desktop width */
.container-xl{
  max-width:1200px;
  padding-left:1rem;
  padding-right:1rem;
}

/* Never let media create a wider layout */
img,
svg,
video,
iframe{
  max-width:100%;
}

img{
  height:auto;
}

/* Rows can otherwise create horizontal overflow */
.row{
  --bs-gutter-x:1.5rem;
  margin-left:0;
  margin-right:0;
}

.row > *{
  min-width:0;
}

/* Flex/grid children are allowed to shrink */
.site-header *,
.hero *,
.page-hero *,
.section *,
.site-footer *{
  min-width:0;
}

/* Long text / URLs must not force the viewport wider */
h1,h2,h3,h4,h5,h6,
p,a,span,div{
  overflow-wrap:break-word;
}


/* =========================================================
   MOBILE — <= 991px
   ========================================================= */
@media (max-width: 991.98px){

  /* Header must always stay inside viewport */
  .site-header{
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }

  .site-header .container,
  .site-header .container-fluid{
    width:100%;
    max-width:100%;
    padding-left:1rem;
    padding-right:1rem;
  }

  /* Brand can shrink instead of pushing the menu sideways */
  .brand-mark{
    min-width:0;
    max-width:100%;
    flex-shrink:1;
  }

  .brand-mark .brand-text{
    min-width:0;
    overflow:hidden;
  }

  /* Bootstrap navbar: keep collapsed menu inside viewport */
  .navbar{
    width:100%;
    max-width:100%;
  }

  .navbar-collapse{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .navbar-nav{
    width:100%;
    max-width:100%;
  }

  .navbar-nav .nav-link{
    padding-left:.75rem !important;
    padding-right:.75rem !important;
  }

  /* Hero must never become wider than the screen */
  .hero,
  .page-hero,
  .section{
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }

  .hero > .container,
  .page-hero > .container,
  .section > .container{
    width:100%;
    max-width:100%;
  }

  /* Hero columns stack safely */
  .hero .row,
  .page-hero .row{
    margin-left:0;
    margin-right:0;
  }

  .hero-title{
    font-size:clamp(2rem, 9vw, 3.2rem);
    max-width:100%;
  }

  .hero-lead{
    max-width:100%;
  }

  /* Nameplate/card cannot push the page wider */
  .nameplate,
  .card-soft,
  .product-card,
  .gallery-card,
  .contact-info-card,
  .form-card,
  .cta-band{
    max-width:100%;
  }

  .nameplate-head,
  .nameplate-body{
    padding-left:1rem;
    padding-right:1rem;
  }

  .spec-row{
    min-width:0;
    gap:1rem;
  }

  .spec-row .k,
  .spec-row .v{
    min-width:0;
    overflow-wrap:anywhere;
  }
  /* Product images/cards stay within viewport */


  /* Map */
  .map-frame,
  .map-frame iframe{
    width:100%;
    max-width:100%;
  }
}


/* =========================================================
   SMALL MOBILE — <= 575px
   ========================================================= */
@media (max-width: 575.98px){

  .container-xl,
  .container,
  .container-fluid{
    width:100%;
    max-width:100%;
    padding-left:.9rem;
    padding-right:.9rem;
  }

  .hero{
    padding-top:3rem;
  }

  .section{
    padding:3.5rem 0;
  }

  .page-hero{
    padding:5rem 0 3rem;
  }

  .hero-title{
    font-size:clamp(1.9rem, 10vw, 2.7rem);
    line-height:1.05;
  }

  .hero-lead{
    font-size:1rem;
  }

  .hero-stats{
    gap:1rem;
  }

  .nameplate{
    margin-top:1.5rem;
  }

  .nameplate-head{
    padding-top:.9rem;
    padding-bottom:.75rem;
  }

  .nameplate-body{
    padding-top:.8rem;
    padding-bottom:1rem;
  }

  .spec-row{
    flex-wrap:wrap;
    gap:.25rem .75rem;
  }

  .spec-row .v{
    width:100%;
    text-align:left;
  }

  
  .cta-band{
    margin-left:0;
    margin-right:0;
  }
}

/* ================================
   GALLERY
================================ */

.gallery-section {
    padding: 80px 0;
    background: #f7f9fc;
}

.gallery-heading {
    text-align: center;
    margin-bottom: 35px;
}

.gallery-subtitle {
    color: #d9a400;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gallery-heading h2 {
    margin: 8px 0 10px;
    font-size: 36px;
    font-weight: 800;
    color: #071b2a;
}

.gallery-heading p {
    color: #6b7280;
    margin: 0;
}


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

.gallery-carousel {
    position: relative;
    width: 100%;
    max-width: 1100px;

    /* INI CONTAINER TETAP */
    height: 560px;

    margin: 0 auto;

    overflow: hidden;

    background: #fff;
    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(0,0,0,.12);
}


/* ================================
   SLIDE
================================ */

.gallery-track {
    position: relative;

    width: 100%;
    height: 100%;
}


.gallery-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}


.gallery-slide.active {
    opacity: 1;
    visibility: visible;
}


/* ================================
   IMAGE
================================ */

.gallery-image-wrapper {
    width: 100%;
    height: 100%;

    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


.gallery-image-wrapper img {
    display: block;

    /* BATAS GAMBAR */
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    /* JANGAN CROP */
    object-fit: contain;

    border-radius: 12px;
}


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

.gallery-btn {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 20;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.55);
    color: #fff;

    font-size: 24px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s;
}

.gallery-btn:hover {
    background: #d9a400;
    color: #071b2a;
}

.gallery-prev {
    left: 15px;
}

.gallery-next {
    right: 15px;
}


/* ================================
   DOT
================================ */

.gallery-dots {
    position: absolute;

    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;
    gap: 7px;
}

.gallery-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.25);

    cursor: pointer;
}

.gallery-dot.active {
    width: 25px;
    border-radius: 10px;

    background: #d9a400;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {

    .gallery-section {
        padding: 60px 15px;
    }

    .gallery-heading h2 {
        font-size: 29px;
    }

    .gallery-carousel {
        height: 400px;
        border-radius: 15px;
    }

    .gallery-image-wrapper {
        padding: 15px;
    }

    .gallery-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}


@media (max-width: 480px) {

    .gallery-carousel {
        height: 320px;
    }

    .gallery-image-wrapper {
        padding: 10px;
    }

}

/* =========================================
   VIDEO CAROUSEL
========================================= */

.video-gallery {
    position: relative;

    width: 100%;
    max-width: 1100px;

    height: 600px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 22px;

    background: #071b2a;

    box-shadow:
        0 15px 45px rgba(0,0,0,.15);
}


/* =========================================
   TRACK
========================================= */

.video-track {
    position: relative;

    width: 100%;
    height: 100%;
}


/* =========================================
   CARD
========================================= */

.video-card {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .6s ease,
        visibility .6s ease;

    background: #000;
}


.video-card.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;
}


/* =========================================
   VIDEO PLAYER
========================================= */

.video-player {

    position: relative;

    width: 100%;
    height: calc(100% - 65px);

    display: flex;

    align-items: center;
    justify-content: center;

    background: #000;

    overflow: hidden;
}


/* =========================================
   THUMBNAIL
========================================= */

.video-thumbnail {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition: opacity .3s ease;
}


.video-thumbnail.hidden {

    opacity: 0;

    pointer-events: none;
}


/* =========================================
   GOOGLE DRIVE IFRAME
========================================= */

.video-frame {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: #000;

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;
}


.video-frame.playing {

    opacity: 1;

    pointer-events: auto;

    z-index: 5;
}


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

.video-play-btn {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    width: 72px;
    height: 72px;

    border: none;

    border-radius: 50%;

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

    color: #071b2a;

    font-size: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

    transition: .3s;
}


.video-play-btn:hover {

    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: #d9a400;
}


.video-play-btn.hidden {

    display: none;
}


/* =========================================
   INFO
========================================= */

.video-info {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 65px;

    padding: 10px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(7,27,42,.95);

    color: #fff;

    z-index: 15;
}


.video-title {

    margin: 0;

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.video-number {

    font-size: 12px;

    color: #d9a400;

    white-space: nowrap;
}


/* =========================================
   NAVIGATION
========================================= */

.video-carousel-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 30;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.6);

    color: #fff;

    font-size: 24px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;
}


.video-carousel-btn:hover {

    background: #d9a400;

    color: #071b2a;
}


.video-carousel-prev {
    left: 18px;
}


.video-carousel-next {
    right: 18px;
}


/* =========================================
   DOTS
========================================= */

.video-carousel-dots {

    position: absolute;

    bottom: 78px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;

    gap: 7px;
}


.video-carousel-dot {

    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

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

    cursor: pointer;
}


.video-carousel-dot.active {

    width: 25px;

    border-radius: 10px;

    background: #d9a400;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .video-gallery {

        height: 430px;

        border-radius: 16px;

    }


    .video-info {

        height: 55px;

        padding: 8px 15px;

    }


    .video-title {

        max-width: 70%;

        font-size: 13px;

    }


    .video-carousel-btn {

        width: 40px;
        height: 40px;

        font-size: 18px;

    }


    .video-play-btn {

        width: 60px;
        height: 60px;

        font-size: 30px;

    }


    .video-carousel-dots {

        bottom: 65px;

    }

}


@media (max-width: 480px) {

    .video-gallery {

        height: 340px;

    }

}
/* =========================
   PRODUCT CATALOGUE
========================= */

.catalogue-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18px;
    background: transparent;
    line-height: 0;
}

/* Slide */
.catalogue-slide {
    display: none;
    width: 100%;
}

.catalogue-slide.active {
    display: block;
}

/* Gambar mengikuti ukuran asli / rasio gambar */
.catalogue-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0;
    padding: 0;
}

/* =========================
   BUTTON PREV / NEXT
========================= */

.catalogue-prev,
.catalogue-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.45);
    color: #fff;

    font-size: 28px;
    line-height: 46px;
    text-align: center;

    cursor: pointer;

    transition: all 0.25s ease;
}

.catalogue-prev {
    left: 15px;
}

.catalogue-next {
    right: 15px;
}

.catalogue-prev:hover,
.catalogue-next:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(1.08);
}

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

.catalogue-fullscreen {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 10;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.5);
    color: #fff;

    font-size: 22px;

    cursor: pointer;

    transition: all 0.25s ease;
}

.catalogue-fullscreen:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
}

/* =========================
   FULLSCREEN MODE
========================= */

.catalogue-carousel:fullscreen {
    width: 100vw;
    height: 100vh;

    max-width: none;
    border-radius: 0;

    background: #000;

    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue-carousel:fullscreen .catalogue-slide {
    width: 100%;
    height: 100%;
}

.catalogue-carousel:fullscreen .catalogue-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue-carousel:fullscreen .catalogue-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile */
@media (max-width: 576px) {

    .catalogue-carousel {
        border-radius: 10px;
    }

    .catalogue-prev,
    .catalogue-next {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 22px;
    }

    .catalogue-prev {
        left: 8px;
    }

    .catalogue-next {
        right: 8px;
    }

    .catalogue-fullscreen {
        width: 38px;
        height: 38px;
        right: 8px;
        bottom: 8px;
        font-size: 18px;
    }
}
/* =========================================================
   PRODUCT DETAIL IMAGE
   FULL IMAGE - NO CROP - NO EMPTY SPACE
   RESPONSIVE ALL DEVICES
   ========================================================= */

.product-detail-visual{
    position:relative;
    width:100%;
    max-width:100%;

    height:auto;
    min-height:0;

    padding:0;
    margin:0;

    overflow:hidden;

    border-radius:24px;

    background:transparent;

    display:block;

    line-height:0;
}


/* IMAGE */
.product-detail-img{
    position:relative;

    display:block;

    width:100%;
    max-width:100%;

    height:auto;
    min-height:0;

    margin:0;
    padding:0;

    object-fit:contain;
    object-position:center;

    z-index:0;
}


/* GRID OVERLAY */
.product-detail-visual .grid-overlay{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    pointer-events:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991.98px){

    .product-detail-visual{
        width:100%;
        max-width:100%;

        height:auto;
        min-height:0;

        padding:0;
        margin:0;

        border-radius:20px;

        display:block;
    }

    .product-detail-img{
        position:relative;
        inset:auto;

        width:100%;
        max-width:100%;

        height:auto;
        min-height:0;

        margin:0;
        padding:0;

        object-fit:contain;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:575.98px){

    .product-detail-visual{
        width:100%;
        max-width:100%;

        height:auto;
        min-height:0;
        max-height:none;

        padding:0;
        margin:0;

        border-radius:16px;

        display:block;

        overflow:hidden;
    }

    .product-detail-img{
        position:relative;
        inset:auto;

        display:block;

        width:100%;
        max-width:100%;

        height:auto;
        min-height:0;
        max-height:none;

        margin:0;
        padding:0;

        object-fit:contain;
        object-position:center;
    }
}


/* =========================================================
   EXTRA SMALL DEVICE
   ========================================================= */

@media (max-width:380px){

    .product-detail-visual{
        border-radius:12px;
    }

    .product-detail-img{
        width:100%;
        height:auto;
    }
}

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

.backsound-toggle{
    position:fixed;

    right:22px;
    bottom:22px;

    width:50px;
    height:50px;

    border:0;
    border-radius:50%;

    background:rgba(7,26,61,.92);
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    cursor:pointer;

    z-index:1100;

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

    transition:
        transform .25s ease,
        background .25s ease;
}

.backsound-toggle:hover{
    transform:scale(1.08);
    background:var(--amber);
    color:var(--ink);
}

.backsound-toggle.active{
    background:var(--amber);
    color:var(--ink);
}


/* MOBILE */

@media(max-width:575.98px){

    .backsound-toggle{
        right:16px;
        bottom:16px;

        width:46px;
        height:46px;

        font-size:18px;
    }

}
.social-dot img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}