:root{
  --navy:#0B2447;
  --blue:#2E5C8A;
  --gray:#8B98A5;
  --text-gray:#5C6B73;
  --text-dark:#2A2F33;
  --border:#DADFE3;
  --bg-alt:#F5F6F7;
  --wa-green:#25D366;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: Arial, "Segoe UI", Roboto, sans-serif;
  color:var(--text-dark);
  line-height:1.65;
  background:#fff;
  font-size:15px;
}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
section{padding:56px 0;}
h1,h2,h3{font-weight:700; color:var(--navy);}
h2{font-size:26px; margin-bottom:10px;}
.section-sub{color:var(--text-gray); max-width:620px; margin-bottom:32px; font-size:15px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* Breadcrumb */
.breadcrumb{font-size:12px; color:var(--text-gray); padding:14px 0 0;}
.breadcrumb a{color:var(--blue); font-weight:600;}

/* Logo lockup */
.logo{display:flex; align-items:center; gap:8px;}
.logo-mark{display:flex; flex-direction:column; line-height:1;}
.logo-top{display:flex; align-items:center; gap:5px;}
.logo-jae{font-weight:800; font-size:22px; color:var(--navy);}
.logo-chevron{
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid var(--blue);
  position:relative;
}
.logo-chevron::after{
  content:"";
  position:absolute; left:-5px; top:-7px;
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid var(--gray);
}
.logo-descriptor{
  font-size:8px; font-weight:700; letter-spacing:1.5px; color:var(--text-gray);
  margin-top:2px; border-top:1px solid var(--border); padding-top:2px;
}
.logo.reversed .logo-jae{color:#fff;}
.logo.reversed .logo-descriptor{color:#B9C2CA; border-top-color:rgba(255,255,255,0.25);}

/* Nav */
header{background:#fff; border-bottom:3px solid var(--navy);}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:1080px; margin:0 auto;
}
.nav-links{display:flex; gap:20px; align-items:center;}
.nav-links a{font-size:14px; font-weight:600; color:var(--text-dark);}
.nav-links a:hover, .nav-links a.active{color:var(--blue);}
.btn{
  display:inline-block;
  background:var(--wa-green); color:#fff; font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:4px; border:none; cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.btn:hover{opacity:0.87;}
.btn:active{transform:scale(0.98);}
.btn-outline{
  background:#fff; color:var(--navy); border:1px solid var(--navy);
}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.menu-toggle{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--navy);}

/* Hero: full-bleed background image */
.hero{
  position:relative; padding:120px 0; text-align:center; overflow:hidden;
  background-image:url('images/hero-bg.jpg');
  background-size:cover; background-position:center;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,36,71,0.72) 0%, rgba(11,36,71,0.85) 100%);
}
.hero-content{position:relative; z-index:2;}
.hero-badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:16px;}
.hero-badge{
  display:inline-block; background:rgba(255,255,255,0.15); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:0.5px; padding:7px 16px; border-radius:20px;
  border:1px solid rgba(255,255,255,0.3);
}
.hero h1{font-size:36px; max-width:720px; margin:0 auto 14px; color:#fff;}
.hero p{font-size:17px; color:rgba(255,255,255,0.88); max-width:600px; margin:0 auto 24px;}
.hero-price{font-size:19px; font-weight:600; color:#fff; margin-bottom:22px;}
.hero-price strong{color:#4EDD8B; font-size:26px; font-weight:800;}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center;}
.link{font-size:14px; font-weight:600; color:var(--blue); text-decoration:underline;}
.hero-ctas .link{font-size:14px; font-weight:600; color:#fff; text-decoration:underline;}
.hero-caption{position:relative; z-index:2; font-size:11px; color:rgba(255,255,255,0.55); font-style:italic; margin-top:26px;}

/* Page header (non-home pages) */
.page-hero{background:var(--navy); padding:48px 0 40px; text-align:center;}
.page-hero h1{color:#fff; font-size:30px; margin-bottom:10px;}
.page-hero p{color:#B9C2CA; max-width:600px; margin:0 auto; font-size:15px;}

/* Produk photo — plain, no card, natural proportions */
.img-art{text-align:center;}
.img-art img{width:100%; height:auto; display:block; margin:0 auto;}
.img-art .art-caption{
  display:block; font-size:11px; color:var(--gray); margin-top:10px; font-style:italic;
}

/* About: full-bleed photo band, hero-style polish */
.about-photo-full{
  width:100%; margin:32px 0; overflow:hidden; background:var(--bg-alt);
  display:flex; justify-content:center; align-items:center;
}
.about-photo-full img{width:auto; max-width:100%; height:520px; object-fit:contain; display:block;}
@media (max-width:640px){ .about-photo-full img{height:320px;} }

/* Floating WhatsApp button */
.wa-float{
  position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%;
  background:var(--wa-green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28); z-index:200; animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{box-shadow:0 6px 18px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0.5);}
  70%{box-shadow:0 6px 18px rgba(0,0,0,0.28), 0 0 0 12px rgba(37,211,102,0);}
  100%{box-shadow:0 6px 18px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0);}
}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border);}
.step{padding:26px 22px; border-right:1px solid var(--border); text-align:center;}
.step:last-child{border-right:none;}
.step-icon{
  width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.step-label{
  font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--blue);
  text-transform:uppercase; margin-bottom:6px;
}
.step h3{font-size:15px; margin-bottom:6px;}
.step p{font-size:13px; color:var(--text-gray);}

/* Keunggulan: checklist style */
.check-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
.check-item{
  display:flex; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.check-item:nth-child(2n){border-right:none;}
.check-mark{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--wa-green); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.check-item h3{font-size:15px; margin-bottom:3px; color:var(--text-dark);}
.check-item p{font-size:13px; color:var(--text-gray);}

/* Products */
.products-bg{background:var(--bg-alt);}
.hpba-intro{font-size:15px; color:var(--text-gray); margin-bottom:20px;}
.compare-table{width:100%; border-collapse:collapse; background:#fff; margin-bottom:24px; font-size:13px;}
.compare-table th, .compare-table td{border:1px solid var(--border); padding:12px 14px; text-align:left; vertical-align:top;}
.compare-table th{background:var(--navy); color:#fff; font-weight:700; font-size:13px;}
.compare-table th.col-us, .compare-table td.col-us{background:#EAF6EE;}
.compare-table th.col-us{background:var(--wa-green);}
.compare-table td:first-child{font-weight:700; color:var(--navy); width:20%;}
.meta-list{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--border); background:#fff;
}
.meta-list div{
  flex:1 1 220px; padding:16px 20px; border-right:1px solid var(--border); font-size:14px;
}
.meta-list div:last-child{border-right:none;}
.meta-list strong{display:block; color:var(--navy); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;}

/* Pricing table */
.price-table{width:100%; border-collapse:collapse; background:#fff; margin-bottom:16px; font-size:13px;}
.price-table th, .price-table td{border:1px solid var(--border); padding:10px 12px; text-align:center;}
.price-table th{background:var(--navy); color:#fff; font-weight:700;}
.price-table td:first-child, .price-table th:first-child{text-align:left; font-weight:700; color:var(--navy);}
.price-note{font-size:12.5px; color:var(--text-gray); margin-bottom:28px;}

/* Color swatch grid */
.color-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:28px;}
.color-item{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:4px; padding:8px 10px; font-size:12.5px; background:#fff;}
.swatch{width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,0.15); flex:0 0 auto;}

/* Print / Cetak Custom callout */
.print-section{background:var(--navy); color:#fff;}
.print-section h2{color:#fff;}
.print-section .section-sub{color:#B9C2CA;}
.print-features{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:28px 0 32px;}
.print-features div{border-top:2px solid rgba(255,255,255,0.25); padding-top:14px;}
.print-features h3{color:#fff; font-size:15px; margin-bottom:6px;}
.print-features p{color:#B9C2CA; font-size:13px;}

/* About */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.about-text p{color:var(--text-gray); margin-bottom:14px; font-size:15px; text-align:left;}

/* Komitmen Kami */
.commitment-block{margin-top:36px; padding-top:32px; border-top:1px solid var(--border);}
.commitment-title{font-size:22px; margin-bottom:4px;}
.commitment-sub{color:var(--text-gray); font-size:14px; margin-bottom:20px;}
.commitment-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.commitment-item{background:#fff; border:1px solid var(--border); border-radius:6px; padding:18px;}
.commitment-icon{
  width:34px; height:34px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.commitment-item h3{font-size:14px; margin-bottom:5px; color:var(--text-dark);}
.commitment-item p{font-size:12.5px; color:var(--text-gray); line-height:1.55;}

/* Articles / Blog */
.article-list{display:flex; flex-direction:column; gap:18px; max-width:820px; margin:0 auto;}
.article-card{display:block; border:1px solid var(--border); border-radius:6px; padding:22px 24px; background:#fff; transition:border-color .15s ease;}
.article-card:hover{border-color:var(--blue);}
.article-card h2{font-size:19px; margin-bottom:8px;}
.article-card p{font-size:14px; color:var(--text-gray); margin-bottom:10px;}
.article-card .link{font-size:13px;}
.article-body{max-width:720px; margin:0 auto;}
.article-body h2{font-size:20px; margin-top:32px; margin-bottom:10px;}
.article-body p{font-size:15px; color:var(--text-dark); margin-bottom:16px; text-align:left;}
.article-body ul{list-style:disc; padding-left:22px; margin-bottom:16px;}
.article-body ul li{font-size:15px; color:var(--text-dark); margin-bottom:8px;}
.article-meta{font-size:12.5px; color:var(--text-gray); margin-bottom:24px;}
.article-cta{background:var(--bg-alt); border:1px solid var(--border); border-radius:6px; padding:22px; text-align:center; margin-top:32px;}
.article-cta p{margin-bottom:14px;}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border); padding:18px 0;}
.faq-item h3{font-size:16px; margin-bottom:8px; color:var(--navy);}
.faq-item p{font-size:14px; color:var(--text-gray);}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.contact-item{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; font-size:14px;}
.contact-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.contact-info .label{font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-gray); margin-bottom:3px;}
.contact-info .value{font-weight:700; color:var(--text-dark);}
form{display:flex; flex-direction:column; gap:10px; background:var(--bg-alt); border:1px solid var(--border); padding:20px; border-radius:4px;}
form input, form textarea{
  background:#fff; border:1px solid var(--border);
  border-radius:4px; padding:11px 12px; color:var(--text-dark); font-size:14px; font-family:inherit;
}
form textarea{resize:vertical; min-height:80px;}
form .btn{width:100%;}
.map-embed{border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:24px;}
.map-embed iframe{width:100%; height:280px; border:0; display:block;}

/* Footer */
footer{background:var(--navy); color:#C7CFD6; padding:28px 0; font-size:13px;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.footer-links{display:flex; gap:14px; flex-wrap:wrap;}
.footer-links a{color:#B9C2CA;}
.footer-links a:hover{color:#fff;}

@media (max-width: 860px){
  .steps{grid-template-columns:1fr;}
  .step{border-right:none; border-bottom:1px solid var(--border);}
  .step:last-child{border-bottom:none;}
  .check-list{grid-template-columns:1fr;}
  .check-item{border-right:none !important;}
  .contact-grid, .about-grid{grid-template-columns:1fr;}
  .print-features{grid-template-columns:1fr;}
  .commitment-list{grid-template-columns:1fr;}
  .hero{padding:80px 0;}
}
@media (max-width: 600px){
  .wa-float{width:50px; height:50px; bottom:16px; right:16px;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; padding:16px 20px;
    border-bottom:1px solid var(--border); display:none; gap:14px; z-index:20;
  }
  .nav-links.open{display:flex;}
  .menu-toggle{display:block;}
  .nav-links .btn{width:100%; text-align:center;}
  .hero h1{font-size:24px;}
  .meta-list div{border-right:none; border-bottom:1px solid var(--border);}
  .compare-table, .price-table{font-size:12px;}
  .compare-table th, .compare-table td, .price-table th, .price-table td{padding:8px 8px;}
  section{padding:40px 0;}
}