/* ===== Perusahaan Seri Melati — site stylesheet ===== */
:root{
  --navy:#0a2540;
  --navy-dark:#071b30;
  --teal:#0f6e7c;
  --teal-light:#12909f;
  --sand:#f6f3ec;
  --white:#ffffff;
  --orange:#e7772e;
  --orange-dark:#c9611e;
  --ink:#1b2733;
  --grey:#5c6b78;
  --border:#e3e0d6;
  --radius:10px;
  --shadow:0 10px 30px rgba(10,37,64,.10);
  --shadow-sm:0 4px 14px rgba(10,37,64,.08);
  /* Spacing scale — use for all margin/padding so rhythm stays consistent */
  --space-xs:8px;
  --space-sm:14px;
  --space-md:24px;
  --space-lg:44px;
  --space-xl:72px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;line-height:1.2;margin:0 0 .5em;color:var(--navy);}
p{margin:0 0 1em;}
.container{max-width:1180px;margin:0 auto;padding:0 var(--space-md);}
.section{padding:var(--space-xl) 0;}
.section-sand{background:var(--sand);}
.section-navy{background:var(--navy);color:#dbe4ee;}
.section-navy h2, .section-navy h3{color:#fff;}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:10px;
}
.section-head{max-width:720px;margin:0 auto var(--space-lg);text-align:center;}
.section-head h2{font-size:2rem;}
.section-head p{color:var(--grey);font-size:1.05rem;}
.section-head-logo{max-height:44px;width:auto;margin:0 auto 18px;}
/* Mercury and Tohatsu logo files have extra transparent padding baked in,
   so they need a taller box (not just a transform) to read at the same
   visual size as Yamaha's tightly-cropped file in the same slot. */
.section-head-logo.logo-lg{max-height:70px;}
/* Left-aligned variant for use inside a text column (e.g. a .feature
   block) instead of a centered .section-head. */
.section-head-logo.logo-inline{margin:0 0 12px;}
.subsection-title{margin:var(--space-lg) 0 20px;color:var(--navy);font-size:1.3rem;}

/* Buttons */
.btn{
  display:inline-block;
  padding:13px 28px;
  border-radius:6px;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
  border:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease;
}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-dark);}
.btn-outline{border-color:#fff;color:#fff;}
.btn-outline:hover{background:#fff;color:var(--navy);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-dark);}
.btn-sm{padding:9px 18px;font-size:.82rem;}

/* Animated "Request a Quote" CTA -- gentle pulsing shadow to draw the eye
   without being obnoxious; pauses on hover so it doesn't fight the hover state. */
.btn-quote{
  position:relative;
  animation:btn-quote-pulse 2.2s ease-in-out infinite;
}
.btn-quote:hover{animation-play-state:paused;}
@keyframes btn-quote-pulse{
  0%{box-shadow:0 0 0 0 rgba(231,119,46,.55);}
  70%{box-shadow:0 0 0 12px rgba(231,119,46,0);}
  100%{box-shadow:0 0 0 0 rgba(231,119,46,0);}
}
@media (prefers-reduced-motion: reduce){
  .btn-quote{animation:none;}
}

/* Top utility bar */
.topbar{
  background:var(--navy-dark);
  color:#b9c6d4;
  font-size:.82rem;
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;
}
.topbar a{color:#dbe4ee;}
.topbar a:hover{color:var(--orange);}
.topbar .tb-items{display:flex;gap:22px;flex-wrap:wrap;}
.topbar .tb-items span{opacity:.85;}

/* Header / Nav */
header.site-header{
  background:var(--white);
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 10px rgba(10,37,64,.06);
}
/* The header's content (logo + tagline + 5 nav items with dropdowns +
   language toggle) needs more room than the 1180px reading-width
   container used for page content — especially the Malay nav, whose
   labels run longer than English. Give the header its own wider
   container so it isn't squeezed by the content max-width. It also gets
   extra side padding (beyond the content container's default) so the
   logo doesn't sit flush against the edge of the browser window. */
header.site-header .container{max-width:1480px;padding-left:40px;padding-right:40px;}
.topbar .container{padding-left:40px;padding-right:40px;}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-weight:700;font-size:1.1rem;
  flex-shrink:0;
}
.brand-mark-img{height:48px;width:auto;flex-shrink:0;}
.brand-text{line-height:1.15;white-space:nowrap;}
.brand-text strong{display:block;font-size:1.02rem;color:var(--navy);font-family:Georgia,serif;white-space:nowrap;}
.brand-text span{display:block;font-size:.72rem;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}

nav.main-nav ul{
  list-style:none;display:flex;gap:2px;margin:0;padding:0;align-items:center;
}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
  display:block;padding:12px 11px;font-size:.85rem;font-weight:600;color:var(--navy);
  border-radius:6px;white-space:nowrap;
}
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li.active > a{color:var(--teal);}
nav.main-nav .dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:#fff;box-shadow:var(--shadow);border-radius:8px;
  min-width:190px;padding:8px;border:1px solid var(--border);
}
nav.main-nav li:hover .dropdown{display:block;}
nav.main-nav .dropdown a{
  display:block;padding:9px 12px;font-size:.85rem;color:var(--ink);border-radius:6px;font-weight:500;
}
nav.main-nav .dropdown a:hover{background:var(--sand);color:var(--teal);}
.nav-cta{display:flex;align-items:center;gap:10px;}
.lang-toggle{
  display:inline-block;padding:7px 12px;border:1px solid var(--border);border-radius:6px;
  font-size:.8rem;font-weight:700;color:var(--navy);letter-spacing:.03em;white-space:nowrap;
}
.lang-toggle:hover{background:var(--sand);color:var(--teal);border-color:var(--teal);}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;}

/* Hero
   NOTE: the photo itself is supplied per-page via the --hero-img custom
   property (set inline). It is listed here as a second background-image
   layer underneath the dark gradient, so the two always render together —
   setting --hero-img alone can never wipe out the readability overlay. */
.hero{
  position:relative;color:#fff;
  background-image:linear-gradient(180deg,rgba(7,27,48,.72),rgba(7,27,48,.82)),var(--hero-img);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:110px 0 90px;
}
.hero.hero-tall{padding:150px 0 120px;}
.hero-inner{max-width:640px;}
.hero h1{color:#fff;font-size:2.7rem;margin-bottom:16px;}
.hero p{font-size:1.12rem;color:#dbe4ee;max-width:560px;}
.hero .btn-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.page-hero{
  color:#fff;text-align:left;
  background-image:linear-gradient(180deg,rgba(7,27,48,.75),rgba(7,27,48,.85)),var(--hero-img);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:70px 0;
}
.page-hero h1{color:#fff;font-size:2.2rem;margin-bottom:8px;}
.page-hero .page-hero-sub{color:#dbe4ee;max-width:620px;margin-bottom:0;}
.breadcrumb{font-size:.85rem;color:#b9c6d4;margin-bottom:14px;}
.breadcrumb a{color:#dbe4ee;}
.breadcrumb a:hover{color:var(--orange);}

/* Cards / grids */
.grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card img{width:100%;height:190px;object-fit:cover;}
.card img.brand-card-img{object-fit:contain;background:#fff;padding:20px;}
.card img.brand-card-img.logo-zoom{transform:scale(1.5);padding:8px;}
.card-body{padding:20px;}
.card-body h3{font-size:1.05rem;margin-bottom:6px;}
.card-body p{font-size:.9rem;color:var(--grey);margin-bottom:0;}

.icon-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 24px;text-align:center;box-shadow:var(--shadow-sm);
}
.icon-card .ico{
  width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.4rem;
}
.icon-card h3{font-size:1.05rem;}
.icon-card p{color:var(--grey);font-size:.92rem;margin-bottom:0;}

/* Brand strip */
.brand-strip{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.brand-strip .grid-3{align-items:center;}
.brand-tile{
  display:flex;align-items:center;justify-content:center;gap:14px;
  height:112px;padding:26px 20px;border:1px solid var(--border);border-radius:var(--radius);
  font-family:Georgia,serif;font-weight:700;font-size:1.2rem;color:var(--navy);
  overflow:hidden;
}
.brand-tile img{max-height:60px;width:auto;}
/* The Mercury and Tohatsu source logo files carry a lot of transparent
   padding around the mark itself, so at a shared max-height they read much
   smaller than Yamaha's tightly-cropped file. Scale those two up so all
   three brands feel visually even. */
.brand-tile img.logo-zoom{transform:scale(1.7);}

/* Two-col feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.feature img{border-radius:var(--radius);box-shadow:var(--shadow);}
.feature-reverse .feature{grid-template-columns:1fr 1fr;}
.feature-reverse .feature > div:first-child{order:2;}
.feature-reverse .feature > img{order:1;}

/* Product family block (mercury/tohatsu/yamaha) */
.family{
  display:grid;grid-template-columns:340px 1fr;gap:36px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;margin-bottom:28px;box-shadow:var(--shadow-sm);align-items:center;
}
.family img{border-radius:8px;width:100%;height:200px;object-fit:cover;background:var(--sand);}
.family h3{font-size:1.3rem;color:var(--teal);margin-bottom:10px;}
.family p{color:var(--grey);}
.spec-tag{
  display:inline-block;background:var(--sand);color:var(--navy);
  padding:4px 10px;border-radius:5px;font-size:.78rem;font-weight:700;margin:2px 4px 2px 0;
}

/* Amira boat spec cards */
.boat-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.boat-card img{
  width:100%;height:170px;object-fit:cover;display:block;
}
.boat-card .bc-head{
  background:var(--navy);color:#fff;padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;
}
.boat-card .bc-head h3{color:#fff;margin:0;font-size:1.1rem;}
.boat-card .bc-head .bc-quote-btn{
  font-size:.72rem;background:var(--orange);color:#fff;padding:5px 10px;
  border-radius:4px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .2s ease;
}
.boat-card .bc-head .bc-quote-btn:hover{background:var(--orange-dark);}
.boat-card table{width:100%;border-collapse:collapse;font-size:.88rem;}
.boat-card td{padding:10px 20px;border-bottom:1px solid var(--border);color:var(--grey);}
.boat-card td:first-child{font-weight:600;color:var(--navy);width:52%;}
.boat-card tr:last-child td{border-bottom:none;}

/* Gallery */
.gallery-grid{
  columns:4 260px;column-gap:16px;
}
.gallery-grid figure{
  margin:0 0 16px;break-inside:avoid;border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow-sm);position:relative;
}
.gallery-grid img{width:100%;display:block;transition:transform .3s ease;}
.gallery-grid a:hover img{transform:scale(1.04);}
.gallery-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.gallery-tabs button{
  border:1px solid var(--border);background:#fff;padding:9px 18px;border-radius:30px;
  font-size:.85rem;font-weight:600;color:var(--navy);cursor:pointer;
}
.gallery-tabs button.active, .gallery-tabs button:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.gallery-item{display:none;}
.gallery-item.show{display:block;}

/* Lightbox */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(7,17,30,.92);z-index:1000;
  align-items:center;justify-content:center;padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:6px;}
.lightbox-close{position:absolute;top:22px;right:30px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;line-height:1;}

/* Accessories */
.acc-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);
}
.acc-card img{height:150px;object-fit:contain;margin-bottom:14px;}
.acc-card h3{font-size:1rem;}
.acc-card p{font-size:.86rem;color:var(--grey);margin-bottom:0;}

/* Timeline (about/location) */
.timeline{border-left:3px solid var(--teal);padding-left:26px;margin-left:6px;}
.timeline .t-item{margin-bottom:30px;position:relative;}
.timeline .t-item::before{
  content:'';position:absolute;left:-33px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 2px var(--teal);
}
.timeline h4{color:var(--navy);margin-bottom:6px;}
.timeline p{color:var(--grey);}

/* Contact / form section */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-sm);
}
.contact-info-card .ci-row{display:flex;gap:14px;margin-bottom:18px;align-items:center;}
.contact-info-card .ci-row.ci-row-top{align-items:flex-start;}
.contact-info-card .ci-row .ci-flex{flex:1;}
.contact-info-card .ci-ico{
  width:38px;height:38px;border-radius:50%;background:var(--sand);color:var(--teal);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;
}
.contact-info-card h4{margin-bottom:2px;font-size:.95rem;color:var(--navy);}
.contact-info-card p{margin-bottom:0;font-size:.9rem;color:var(--grey);}
.hours-table{width:100%;font-size:.9rem;border-collapse:collapse;margin-top:10px;}
.hours-table td{padding:6px 0;border-bottom:1px solid var(--border);color:var(--grey);}
.hours-table td:last-child{text-align:right;font-weight:600;color:var(--navy);}

form.contact-form{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);
}
form.contact-form label{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:6px;}
form.contact-form input, form.contact-form textarea, form.contact-form select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:6px;
  margin-bottom:16px;font-family:inherit;font-size:.92rem;background:#fff;
}
form.contact-form textarea{min-height:110px;resize:vertical;}
.form-narrow{max-width:640px;margin:0 auto;}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-top:var(--space-md);}
.map-wrap iframe{width:100%;height:340px;border:0;display:block;}
.btn-block{width:100%;}
.form-note{margin-top:var(--space-sm);min-height:1.2em;}

.form-upload-note{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--sand);border:1px solid var(--border);border-radius:8px;
  padding:14px 16px;margin-bottom:20px;
}
.form-upload-note .ico{font-size:1.3rem;line-height:1;flex-shrink:0;}
.form-upload-note p{margin:0 0 8px;font-size:.86rem;color:var(--grey);}
.form-upload-note a{font-weight:700;color:var(--teal);white-space:nowrap;}
.form-upload-note a:hover{color:var(--teal-light);}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--teal),var(--navy));
  color:#fff;padding:56px 0;text-align:center;
}
.cta-band h2{color:#fff;margin-bottom:10px;}
.cta-band p{color:#d3e2ea;margin-bottom:22px;}

/* Footer */
footer.site-footer{background:var(--navy-dark);color:#a9b8c6;padding:56px 0 0;font-size:.9rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;}
.footer-grid h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.03em;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a:hover{color:var(--orange);}
.footer-brand p{color:#8ea1b3;margin-top:10px;}
.footer-brand-name{display:block;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;}
.social-row{display:flex;gap:10px;margin-top:14px;}
.social-row a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;
}
.social-row a:hover{background:var(--orange);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:18px 0;text-align:center;
  font-size:.8rem;color:#7c8fa1;
}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.small{font-size:.85rem;color:var(--grey);}
.list-check{list-style:none;padding:0;margin:0;}
.list-check li{padding-left:26px;position:relative;margin-bottom:10px;color:var(--grey);}
.list-check li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:700;}
.divider{height:1px;background:var(--border);margin:50px 0;}

/* Responsive */

/* The header nav (logo + tagline + 5 links + dropdowns + language toggle +
   Call Us button) needs real room to breathe — and the Malay labels run
   noticeably longer than their English equivalents ("Motor Sangkut Luar"
   vs "Outboard Motors"), so this has to clear comfortably on both language
   versions. It switches to the off-canvas mobile menu at 1280px, while the
   page content grids (below) keep collapsing at the narrower,
   content-appropriate breakpoints. */
@media (max-width:1280px){
  .topbar{display:none;}
  nav.main-nav{
    position:fixed;top:0;right:-320px;height:100vh;width:300px;background:#fff;
    box-shadow:-6px 0 20px rgba(0,0,0,.15);transition:right .25s ease;padding:80px 20px 20px;overflow-y:auto;
  }
  nav.main-nav.open{right:0;}
  nav.main-nav ul{flex-direction:column;align-items:stretch;}
  nav.main-nav .dropdown{position:static;box-shadow:none;border:none;padding-left:14px;display:block;}
  .hamburger{display:block;}
  .brand-text span{white-space:normal;}
}

@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .feature, .contact-grid, .footer-grid{grid-template-columns:1fr;}
  .feature-reverse .feature > div:first-child{order:1;}
  .feature-reverse .feature > img{order:2;}
  .family{grid-template-columns:1fr;}
  .gallery-grid{columns:3 220px;}
}
@media (max-width:760px){
  .hero h1{font-size:2rem;}
  .hero.hero-tall{padding:110px 0 70px;}
  .page-hero{padding:50px 0;}
  .page-hero h1{font-size:1.6rem;}
  .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;}
  .gallery-grid{columns:2 160px;}
  .boat-card td{padding:10px 14px;}
  form.contact-form, .contact-info-card{padding:22px;}
}
/* On a phone, logo + company name + tagline side-by-side plus the
   language toggle, Call Us button and hamburger all competing for the
   same row is too much — the brand text wraps and collides with the
   nav-cta buttons. Stack the name/tagline under the logo instead, which
   keeps the brand block narrow and gives the buttons room to breathe. */
@media (max-width:600px){
  header.site-header .container{padding:20px;}
  .nav-wrap{flex-wrap:wrap;row-gap:8px;padding:6px 0;}
  .brand{flex-direction:column;align-items:flex-start;gap:2px;}
  .brand-mark-img{height:38px;}
  .brand-text strong{font-size:.92rem;}
  .brand-text span{font-size:.62rem;}
  .nav-cta{gap:6px;}
  .nav-cta .btn-sm{padding:8px 12px;font-size:.78rem;}
  .lang-toggle{padding:6px 9px;font-size:.75rem;}
}

@media (max-width:420px){
  .container{padding:0 var(--space-sm);}
  header.site-header .container{padding:18px;}
  .section{padding:var(--space-lg) 0;}
  .hero h1{font-size:1.7rem;}
  .section-head h2{font-size:1.5rem;}
}