*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8faff;--bg2:#ffffff;--card:#eef3fc;
  --border:rgba(26,86,219,0.15);--accent:#1a56db;--accent2:#0ea66e;
  --text:#0d1b3e;--muted:#5f6e8c;--glow:rgba(26,86,219,0.08);
}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;margin:0;padding:0}
/* Heading & elemen display tetap Montserrat (teks isi = Inter) */
h1,h2,h3,h4,h5,h6,.section-title,.stat-num,.value-num,.avatar,.logo,.footer-brand-name{font-family:'Montserrat',sans-serif}
/* NAV */
nav.site-nav{position:sticky;top:0;z-index:999;background:rgba(248,250,255,0.97);backdrop-filter:blur(12px);border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:56px}
.logo{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text)}
.logo span{color:var(--accent)}
.logo-icon{width:30px;height:30px;flex-shrink:0}
.nav-links{display:flex;gap:1.5rem;align-items:center}
.nav-links a{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:none;letter-spacing:0.04em;padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color 0.2s,border-color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-cta{padding:7px 16px;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;border:none;border-radius:4px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em}
/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--bg);z-index:998;flex-direction:column;padding:1.5rem;border-top:0.5px solid var(--border);overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:600;color:var(--text);text-decoration:none;padding:1rem 0;border-bottom:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.mobile-menu a span{color:var(--accent)}
/* PAGES */
.page{display:none}
.page.active{display:block}
/* SHARED */
.section-label{font-family:'Inter',sans-serif;font-size:11px;color:var(--accent);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.5rem}
.section-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--text);letter-spacing:-0.02em;margin-bottom:2rem;line-height:1.1}
section{padding:4rem 2rem}
.alt-bg{background:var(--card);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}
.btn-primary{padding:11px 26px;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;border:none;border-radius:4px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;transition:background 0.2s}
.btn-primary:hover{background:#1246c0}
.btn-outline{padding:11px 26px;background:transparent;color:var(--accent);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;border:1px solid var(--accent);border-radius:4px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;transition:all 0.2s}
.btn-outline:hover{background:var(--glow)}
/* FOOTER */
footer{padding:1.5rem 2rem;border-top:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
footer p{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400}
/* footer span{color:var(--accent2)} — sisa footer lama, dihapus:
   diam-diam mewarnai hijau nama merek di footer baru */
/* HOME HERO */
.hero{padding:5rem 2rem 4rem;position:relative;overflow:hidden;background:var(--bg)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(26,86,219,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,219,0.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero-tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11px;color:var(--accent);border:0.5px solid rgba(26,86,219,0.3);padding:3px 12px;border-radius:20px;margin-bottom:1.25rem;letter-spacing:0.06em}
.hero-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.2}}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.07;letter-spacing:-0.03em;color:var(--text);max-width:600px;margin-bottom:1rem;position:relative}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{font-family:'Inter',sans-serif;font-size:13px;font-weight:400;color:var(--muted);max-width:480px;line-height:1.75;margin-bottom:2rem;position:relative}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.08;pointer-events:none}
/* STATS */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);background:var(--bg2)}
.stat{padding:1.5rem 2rem;border-right:0.5px solid var(--border)}
.stat:last-child{border-right:none}
.stat-num{font-size:1.8rem;font-weight:700;color:var(--text);letter-spacing:-0.02em;line-height:1}
.stat-num span{color:var(--accent)}
.stat-label{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);letter-spacing:0.06em;margin-top:4px;text-transform:uppercase}
/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);border:0.5px solid var(--border)}
.service-card{background:var(--bg2);padding:1.75rem;transition:background 0.2s;position:relative;overflow:hidden}
.service-card:hover{background:var(--card)}
.service-top-line{position:absolute;top:0;left:0;width:0;height:2px;background:var(--accent);transition:width 0.3s}
.service-card:hover .service-top-line{width:100%}
.service-icon{width:42px;height:42px;border:0.5px solid rgba(26,86,219,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:1rem;transition:border-color 0.2s}
.service-card:hover .service-icon{border-color:var(--accent)}
.service-card h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.service-card p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);line-height:1.65;font-weight:400}
/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-card{border-radius:8px;overflow:hidden;border:0.5px solid var(--border);aspect-ratio:4/3;position:relative}
.gallery-card img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-caption{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;background:linear-gradient(transparent,rgba(5,10,20,0.85))}
.gallery-caption h4{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:#fff}
.gallery-caption p{font-family:'Inter',sans-serif;font-size:10px;color:rgba(255,255,255,0.75)}
.gallery-wide{grid-column:span 2}
.gallery-stack{display:flex;flex-direction:column;gap:1rem}
.gallery-stack .gallery-card{flex:1;aspect-ratio:unset;min-height:120px}
/* WHY US */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.why-text p{font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);line-height:1.8;font-weight:400;margin-bottom:0.75rem}
.why-list{list-style:none;margin-top:1rem}
.why-list li{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:12px;color:var(--text);padding:9px 0;border-bottom:0.5px solid var(--border);font-weight:400}
.why-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent2);flex-shrink:0}
.topo-box{background:#0d1b3e;border-radius:10px;border:0.5px solid rgba(26,86,219,0.3);padding:1.25rem}
.topo-label{font-family:'Inter',sans-serif;font-size:10px;color:rgba(100,180,255,0.7);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.5rem}
/* CONTACT */
.contact-box{background:var(--card);border:0.5px solid var(--border);border-radius:12px;padding:2.5rem 2rem;max-width:760px;margin:0 auto;text-align:center}
.contact-box h2{font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:0.4rem}
.contact-box p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);margin-bottom:1.5rem;font-weight:400}
.contact-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}
.contact-link{display:flex;align-items:center;gap:16px;background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:16px 20px;text-decoration:none;transition:border-color 0.2s,background 0.2s}
.contact-link:hover{border-color:var(--accent);background:var(--card)}
.contact-link-icon{width:44px;height:44px;flex-shrink:0;object-fit:contain;border-radius:10px}
.contact-link-text h4{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px}
.contact-link-text p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);font-weight:400}
.contact-link-arrow{margin-left:auto;font-family:'Inter',sans-serif;font-size:12px;color:var(--accent)}
/* ABOUT */
.page-hero{padding:5rem 2rem 3rem;position:relative;overflow:hidden;border-bottom:0.5px solid var(--border);background:var(--bg)}
.page-hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(26,86,219,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,219,0.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.page-hero h1{position:relative;z-index:1;font-size:clamp(1.8rem,4vw,3rem);font-weight:700;color:var(--text);letter-spacing:-0.025em;line-height:1.1;max-width:580px;margin-bottom:1rem;position:relative}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero p{position:relative;z-index:1;font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);max-width:480px;line-height:1.8;font-weight:400;position:relative}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.about-text p{font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);line-height:1.8;font-weight:400;margin-bottom:0.75rem}
.vision-cards{display:flex;flex-direction:column;gap:0.75rem}
.vision-card{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:1.25rem}
.vision-card h3{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.5rem}
.vision-card p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);line-height:1.7;font-weight:400}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.value-item{padding:1.25rem;border:0.5px solid var(--border);border-radius:6px;background:var(--bg2);transition:background 0.2s,border-color 0.2s}
.value-item:hover{background:var(--card);border-color:rgba(26,86,219,0.3)}
.value-num{font-family:'Inter',sans-serif;font-size:10px;color:var(--accent);letter-spacing:0.1em;margin-bottom:0.6rem}
.value-item h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.value-item p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);line-height:1.65;font-weight:400}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.team-card{background:var(--card);border:0.5px solid var(--border);border-radius:8px;padding:1.5rem;text-align:center;transition:background 0.2s,border-color 0.2s}
.team-card:hover{background:var(--bg2);border-color:rgba(26,86,219,0.3)}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--bg2);border:1px solid rgba(26,86,219,0.25);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--accent);margin:0 auto 0.75rem}
.team-card h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.team-card .role{font-family:'Inter',sans-serif;font-size:10px;color:var(--accent);letter-spacing:0.04em;margin-bottom:0.4rem}
.team-card p{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);line-height:1.6;font-weight:400}
/* PARTNERS */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.partner-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem;transition:border-color 0.2s,background 0.2s}
.partner-card:hover{background:var(--card);border-color:rgba(26,86,219,0.35)}
.partner-icon{width:52px;height:52px;border-radius:8px;background:var(--card);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px}
.partner-card h3{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:var(--text);text-align:center}
.partner-card span{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);text-align:center;letter-spacing:0.04em}
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.client-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:1.25rem;display:flex;align-items:center;gap:1rem;transition:border-color 0.2s}
.client-card:hover{border-color:rgba(26,86,219,0.35)}
.client-icon{width:44px;height:44px;border-radius:6px;background:var(--card);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.client-card h3{font-size:13px;font-weight:600;color:var(--text)}
.client-card p{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.status-badge{margin-left:auto;font-family:'Inter',sans-serif;font-size:10px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.status-active{color:var(--accent2);border:0.5px solid rgba(14,166,110,0.25)}
.status-done{color:var(--accent);border:0.5px solid rgba(26,86,219,0.25)}
/* PROJECTS */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2rem}
.filter-btn{padding:5px 14px;background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0.06em;border:0.5px solid var(--border);border-radius:20px;cursor:pointer;text-transform:uppercase;transition:all 0.2s}
.filter-btn:hover,.filter-btn.on{border-color:var(--accent);color:var(--accent);background:var(--glow)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.project-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color 0.2s,background 0.2s}
.project-card:hover{border-color:rgba(26,86,219,0.35);background:var(--card)}
.project-thumb{height:130px;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--card);border-bottom:0.5px solid var(--border);position:relative;overflow:hidden}
.project-thumb-bg{position:absolute;inset:0;opacity:0.08;background-image:linear-gradient(rgba(26,86,219,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,219,0.5) 1px,transparent 1px);background-size:20px 20px}
.project-thumb-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.25}
.project-body{padding:1.25rem}
.project-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:0.6rem}
.project-tag{font-family:'Inter',sans-serif;font-size:9px;color:var(--accent2);border:0.5px solid rgba(14,166,110,0.25);padding:2px 7px;border-radius:10px}
.project-body h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:0.4rem}
.project-body p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);line-height:1.65;font-weight:400}
.project-meta{display:flex;align-items:center;justify-content:space-between;margin-top:0.75rem;padding-top:0.75rem;border-top:0.5px solid var(--border)}
.project-status{display:flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-size:10px}
.dot{width:5px;height:5px;border-radius:50%}
.dot-green{background:var(--accent2)}
.dot-blue{background:var(--accent);animation:pulse 2s infinite}
.project-year{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted)}
/* BLOG */
.featured{display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:2rem}
.featured:hover{border-color:rgba(26,86,219,0.3)}
.featured-thumb{background:var(--card);display:flex;align-items:center;justify-content:center;font-size:48px;border-right:0.5px solid var(--border);min-height:220px;position:relative;overflow:hidden}
.featured-thumb-bg{position:absolute;inset:0;opacity:0.06;background-image:linear-gradient(rgba(26,86,219,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(26,86,219,0.5) 1px,transparent 1px);background-size:20px 20px}
.featured-body{padding:2rem}
.featured-label{font-family:'Inter',sans-serif;font-size:10px;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;border:0.5px solid rgba(26,86,219,0.3);display:inline-block;padding:2px 8px;border-radius:10px;margin-bottom:0.75rem}
.featured-body h2{font-size:1.15rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:0.6rem}
.featured-body p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);line-height:1.75;font-weight:400;margin-bottom:0.75rem}
.post-meta{display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap}
.post-date{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted)}
.post-read{font-family:'Inter',sans-serif;font-size:10px;color:var(--accent)}
.post-cat{font-family:'Inter',sans-serif;font-size:9px;color:var(--accent2);border:0.5px solid rgba(14,166,110,0.25);padding:2px 7px;border-radius:10px}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.post-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color 0.2s,background 0.2s}
.post-card:hover{border-color:rgba(26,86,219,0.3);background:var(--card)}
.post-card-thumb{height:90px;display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--card);border-bottom:0.5px solid var(--border)}
.post-card-body{padding:1rem}
.post-card-body h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:0.4rem;line-height:1.35}
.post-card-body p{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);line-height:1.65;font-weight:400;margin-bottom:0.6rem}
.post-card-body .post-meta{border-top:0.5px solid var(--border);padding-top:0.6rem;margin-top:0.6rem}
.newsletter{background:var(--card);border:0.5px solid var(--border);border-radius:8px;padding:2rem;max-width:500px;margin:0 auto;text-align:center}
.newsletter h2{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:0.4rem}
.newsletter p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);margin-bottom:1.25rem;font-weight:400}
.newsletter-form{display:flex;gap:8px}
.newsletter-form input{flex:1;background:var(--bg2);border:0.5px solid var(--border);border-radius:4px;padding:10px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:12px;font-weight:400;outline:none}
.newsletter-form input:focus{border-color:rgba(26,86,219,0.5)}
/* RESPONSIVE */
/* ─── RESPONSIVE: TABLET (≤ 768 px) ─── */
@media(max-width:768px){
  /* NAV */
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
  nav{padding:0 1rem}

  /* LAYOUT */
  section{padding:2.5rem 1rem}
  .hero,.page-hero{padding:3rem 1rem 2.5rem}

  /* HERO */
  .hero h1{font-size:clamp(1.9rem,7vw,2.8rem)}
  .hero-sub{font-size:12px}
  .hero-cta{gap:8px}
  .hero-cta .btn-primary,.hero-cta .btn-outline{padding:10px 18px;font-size:11px;flex:1;text-align:center}

  /* STATS */
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.1rem 1.25rem}
  .stat:nth-child(2){border-right:none}

  /* GRIDS */
  .why-grid,.about-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-bottom-row{grid-template-columns:1fr 1fr}
  .gallery-wide{grid-column:span 1}
  .partner-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .posts-grid{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .featured-thumb{min-height:140px;border-right:none;border-bottom:0.5px solid var(--border)}

  /* TOPO BOX — hide on mobile, takes too much space */
  .why-grid .topo-box{display:none}

  /* CONTACT */
  .contact-box{padding:1.5rem 1rem}
  .contact-links{grid-template-columns:1fr}

  /* ABOUT PAGE */
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .team-member-pic{width:64px;height:64px}

  /* PRICING TABS */
  .price-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .price-tab{padding:10px 14px;font-size:11px}

  /* PRICING CARDS */
  .pricing-grid{grid-template-columns:1fr}
  .price-card{padding:1.25rem}

  /* PACKAGE SCROLL CARDS */
  .pkg-scroll-container{margin:0 -1rem;padding:8px 0}
  .pkg-row-cards{padding:0 1rem}
  .pkg-card{width:200px}
  .pkg-price{font-size:1.1rem}

  /* BRAND / PRODUCTS */
  .brand-card-header{padding:0.9rem 1rem}
  .prod-type-sub{padding:6px 0 10px 14px}

  /* FOOTER */
  footer{flex-direction:column;text-align:center;gap:6px;padding:1.25rem 1rem}

  /* SECTION TITLE */
  .section-title{font-size:clamp(1.25rem,5vw,1.7rem);margin-bottom:1.5rem}

  /* FILTER BUTTONS */
  .filter-bar,.cat-filter{gap:6px}
  .filter-btn,.cat-btn{padding:6px 12px;font-size:10px}

  /* PROJECT CARDS */
  .project-thumb{height:100px}

  /* TEAM SECTION */
  .team-member{padding:1.25rem}
}

/* ─── RESPONSIVE: MOBILE (≤ 480 px) ─── */
@media(max-width:480px){
  /* GENERAL */
  section{padding:2rem 0.875rem}
  .hero,.page-hero{padding:2.5rem 0.875rem 2rem}
  nav{padding:0 0.875rem}

  /* HERO */
  .hero h1{font-size:clamp(1.65rem,8.5vw,2.2rem);line-height:1.1}
  .hero-sub{font-size:11.5px;line-height:1.7}
  .hero-tag{font-size:10px;padding:3px 10px}

  /* STATS */
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1rem 0.875rem}
  .stat-num{font-size:1.35rem}
  .stat-label{font-size:9px}

  /* GRIDS → single column */
  .values-grid{grid-template-columns:1fr 1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .partner-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:1fr}
  .contact-links{grid-template-columns:1fr}

  /* SERVICE CARDS */
  .service-card{padding:1.25rem}
  .service-icon{width:36px;height:36px;font-size:16px}
  .service-card h3{font-size:13px}
  .service-card p{font-size:11px}

  /* PARTNER GRID */
  .partner-logo{padding:0.6rem}

  /* GALLERY */
  .gallery-card{border-radius:6px}
  .gallery-caption h4{font-size:11px}
  .gallery-caption p{font-size:9px}

  /* CONTACT */
  .contact-box{padding:1.25rem 0.875rem}
  .contact-box h2{font-size:1.2rem}
  .contact-link{padding:12px 14px;gap:12px}
  .contact-link-icon{width:36px;height:36px}
  .contact-link-text h4{font-size:13px}
  .contact-link-arrow{font-size:11px}

  /* PAGE HERO */
  .page-hero h1{font-size:clamp(1.5rem,7vw,2.2rem)}

  /* ABOUT STATS */
  .about-stats{grid-template-columns:1fr 1fr}

  /* PRICING TABS — full width scrollable */
  .price-tabs{gap:0}
  .price-tab{flex:0 0 auto;padding:9px 12px;font-size:10px}

  /* PACKAGE CARDS */
  .pkg-card{width:185px;padding:1rem}
  .pkg-price{font-size:1rem}
  .pkg-spec{font-size:9.5px}
  .pkg-row{font-size:10.5px}
  .pkg-badge{font-size:10px;padding:3px 10px}

  /* BRAND CARDS */
  .brand-card-header{padding:0.85rem 0.875rem}
  .brand-card-header div{font-size:13px}
  .prod-type-label{font-size:11px}

  /* PRICING CARDS */
  .price-card-header h3{font-size:13px}
  .price-item span:first-child{font-size:10.5px}
  .price-val{font-size:10.5px}

  /* BUTTONS */
  .btn-primary,.btn-outline{padding:10px 16px;font-size:11px}

  /* FILTER BUTTONS */
  .filter-btn,.cat-btn{padding:5px 10px;font-size:10px}

  /* PROJECT CARDS */
  .project-body{padding:0.875rem}
  .project-body h3{font-size:13px}
  .project-body p{font-size:11px}
  .project-tag{font-size:9px;padding:2px 7px}

  /* SECTION LABEL */
  .section-label{font-size:10px}
  .section-title{font-size:clamp(1.1rem,6vw,1.5rem)}

  /* FOOTER */
  footer{padding:1rem 0.875rem}
  footer p{font-size:10px}

  /* TEAM */
  .team-member-pic{width:56px;height:56px}
  .team-member h3{font-size:13px}
  .team-member p{font-size:11px}
}

/* ─── RESPONSIVE: VERY SMALL (≤ 360 px) ─── */
@media(max-width:360px){
  .services-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
  .stats-bar{grid-template-columns:1fr 1fr}
  .hero h1{font-size:1.55rem}
  nav{padding:0 0.75rem}
  section{padding:1.75rem 0.75rem}
  .pkg-card{width:170px}
}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.price-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:1.5rem;display:flex;flex-direction:column;transition:border-color 0.2s,box-shadow 0.2s;position:relative}
.price-card:hover{border-color:rgba(26,86,219,0.35);box-shadow:0 4px 20px rgba(26,86,219,0.08)}
.price-card-featured{border-color:rgba(26,86,219,0.4);background:linear-gradient(135deg,rgba(26,86,219,0.04),var(--bg2))}
.price-featured-badge{position:absolute;top:-10px;right:16px;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;letter-spacing:0.06em;text-transform:uppercase}
.price-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:1rem}
.price-icon{width:42px;height:42px;border:0.5px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;background:var(--card)}
.price-card-header h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}
.price-cat{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);font-weight:400}
.price-items{display:flex;flex-direction:column;gap:0;flex:1}
.price-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:0.5px solid var(--border);gap:8px}
.price-item span:first-child{font-family:'Inter',sans-serif;font-size:11px;color:var(--text);font-weight:400;flex:1}
.price-val{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;flex-shrink:0}
.contact-price{color:var(--accent) !important;font-weight:600 !important}
.price-tab-content{display:block}

.cat-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0.5rem}
.cat-btn{padding:7px 16px;background:transparent;border:0.5px solid var(--border);border-radius:20px;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);cursor:pointer;transition:all 0.2s;letter-spacing:0.03em}
.cat-btn:hover,.cat-btn.active{background:var(--glow);border-color:var(--accent);color:var(--accent)}
.brand-grid{display:flex;flex-direction:column;gap:8px}
.brand-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color 0.2s}
.brand-card:hover{border-color:rgba(26,86,219,0.3)}
.brand-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;user-select:none}
.brand-card-header:hover{background:var(--card)}
.brand-arrow{font-size:12px;color:var(--muted);transition:transform 0.2s}
.brand-card-body{padding:0 1.25rem 1rem;border-top:0.5px solid var(--border)}
.prod-type-row{border-bottom:0.5px solid var(--border)}
.prod-type-row:last-child{border-bottom:none}
.prod-type-label{display:flex;align-items:center;gap:8px;padding:10px 0;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:var(--text)}
.prod-type-label:hover{color:var(--accent)}
.prod-type-arrow{font-size:9px;color:var(--muted);transition:transform 0.2s;display:inline-block}
.prod-type-sub{padding:8px 0 12px 20px}
.prod-type-desc{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400;line-height:1.65;margin-bottom:10px}
.prod-package-list{display:flex;flex-direction:column;gap:0}
.prod-package{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid var(--border);font-family:'Inter',sans-serif;font-size:11px;color:var(--text);font-weight:400}
.prod-package:last-child{border-bottom:none}

.pkg-scroll-container{overflow-x:auto;margin:0 -8px;padding:8px 0}
.pkg-row-cards{display:flex;gap:12px;padding:0 8px;width:max-content}
.pkg-card{background:var(--bg);border:0.5px solid var(--border);border-radius:10px;padding:1.25rem;width:220px;flex-shrink:0;display:flex;flex-direction:column;transition:border-color 0.2s,box-shadow 0.2s}
.pkg-card:hover{border-color:rgba(26,86,219,0.4);box-shadow:0 4px 16px rgba(26,86,219,0.08)}
.pkg-badge{display:inline-block;background:var(--accent);color:#fff;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:0.75rem;text-align:center;width:fit-content}
.pkg-price{font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text);letter-spacing:-0.02em;margin-bottom:4px}
.pkg-spec{font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);margin-bottom:1rem;font-weight:400}
.pkg-includes{display:flex;flex-direction:column;gap:6px;flex:1}
.pkg-row{display:flex;align-items:flex-start;gap:8px;font-family:'Inter',sans-serif;font-size:11px;color:var(--text);font-weight:400;line-height:1.4}
.pkg-row span:first-child{flex-shrink:0;font-size:12px}
.pkg-row-check span:last-child{color:var(--accent2);font-weight:400}

.pkg-img-placeholder{width:100%;height:100px;background:var(--card);border-radius:8px;border:0.5px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-bottom:0.75rem}
.pkg-img-label{font-family:'Inter',sans-serif;font-size:9px;color:var(--muted);font-weight:400;letter-spacing:0.05em}

/* Floating WA button — smaller on mobile */
@media(max-width:480px){
  a[title="Chat on WhatsApp"]{bottom:16px!important;right:16px!important;width:46px!important;height:46px!important}
  a[title="Chat on WhatsApp"] img{width:46px!important;height:46px!important}
}

/* Ensure images inside project/gallery cards never overflow */
img{max-width:100%;height:auto}

/* Smooth scrolling site-wide */
html{scroll-behavior:smooth}

/* Touch-friendly tap targets on mobile */
@media(max-width:768px){
  .mobile-menu a{min-height:48px}
  .btn-primary,.btn-outline,.nav-cta,.filter-btn,.cat-btn{min-height:40px}
  .contact-link{min-height:60px}
}

/* Fix horizontal overflow on very small screens */
body{overflow-x:hidden}

/* Price tab bar — horizontal scroll on mobile */
.price-tabs{display:flex;gap:0;border-bottom:0.5px solid var(--border);margin-bottom:1.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.price-tabs::-webkit-scrollbar{display:none}

/* Filter bar wrap on mobile */
@media(max-width:480px){
  .filter-bar{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE UPGRADE — v11 (Agustus 2026)
   Tambahan untuk konversi SPA → multi-page + blog
   ═══════════════════════════════════════════════════════════ */

/* Halaman kini dokumen sendiri — .page tidak lagi disembunyikan */
.page{display:block}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}

/* Aksesibilitas: focus ring yang jelas (SEO/UX) */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* Skip-link untuk screen reader */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--accent);color:#fff;padding:10px 16px;font-family:'Inter',sans-serif;font-size:12px;border-radius:0 0 4px 0}
.skip-link:focus{left:0}

/* Nav: link sekarang <a href>, samakan tampilannya dengan versi lama */
.nav-links a{text-decoration:none}
.logo{text-decoration:none;color:var(--text)}
a.nav-cta{display:inline-block;text-decoration:none;line-height:1.25}
@media(max-width:768px){a.nav-cta{display:none}}
/* CTA di dalam mobile menu jangan ikut gaya link menu */
.mobile-menu a.btn-primary{display:block;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:#fff;border-bottom:none;padding:12px 26px}
a.btn-primary,a.btn-outline{display:inline-block;text-decoration:none;line-height:1.25}

/* BREADCRUMB */
.breadcrumb{padding:0.9rem 2rem 0;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:'/';color:var(--border);color:rgba(13,27,62,0.3)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--text)}

/* FOOTER BARU — 4 kolom, bagus untuk internal linking & SEO */
.site-footer{display:block;background:var(--card);border-top:0.5px solid var(--border);padding:3rem 2rem 1.25rem;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;max-width:1200px;margin:0 auto 2.5rem}
.site-footer h4{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:0.9rem;font-weight:700}
.site-footer p,.site-footer li,.site-footer a{font-family:'Inter',sans-serif;font-size:12px;font-weight:400;color:var(--muted);line-height:1.9}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{text-decoration:none;transition:color 0.2s}
.site-footer a:hover{color:var(--accent)}
.footer-about{max-width:320px;line-height:1.8}
.footer-social{display:flex;gap:10px;margin-top:1rem}
.footer-social a{width:32px;height:32px;border:0.5px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.footer-social a:hover{border-color:rgba(26,86,219,0.4)}
.footer-social img{width:16px;height:16px;object-fit:contain}
.footer-bottom{border-top:0.5px solid var(--border);padding-top:1.25rem;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:11px}
.footer-bottom .heart{color:var(--accent2)}

/* ═══ BLOG ═══ */
.article-wrap{max-width:760px;margin:0 auto;padding:2.5rem 2rem 4rem}
.article-head{max-width:760px;margin:0 auto;padding:2.5rem 2rem 0}
.article-head h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-0.025em;color:var(--text);margin:0.75rem 0 1rem}
.article-lede{font-family:'Inter',sans-serif;font-size:14px;font-weight:400;color:var(--muted);line-height:1.85;margin-bottom:1.5rem}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400;border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);padding:0.85rem 0}
.article-meta .post-cat{margin:0}
.article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:0.5px solid var(--border);margin:0 0 2rem;display:block}
.prose{color:var(--text)}
.prose h2{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-0.015em;margin:2.5rem 0 0.9rem;line-height:1.25;scroll-margin-top:72px}
.prose h3{font-size:1rem;font-weight:600;margin:1.8rem 0 0.6rem;line-height:1.35;scroll-margin-top:72px}
.prose p,.prose li{font-size:16px;line-height:1.8;color:#33415c}
.prose p{margin-bottom:1.1rem}
.prose ul,.prose ol{margin:0 0 1.3rem 1.25rem}
.prose li{margin-bottom:0.5rem}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:700;color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--accent);background:var(--card);padding:1rem 1.25rem;margin:1.6rem 0;border-radius:0 6px 6px 0}
.prose blockquote p{margin:0;font-family:'Inter',sans-serif;font-size:13px;font-weight:400;line-height:1.8}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:13px}
.prose th,.prose td{border:0.5px solid var(--border);padding:0.65rem 0.8rem;text-align:left;vertical-align:top}
.prose th{background:var(--card);font-weight:600;font-size:12px;letter-spacing:0.02em}
.prose td{color:#33415c;line-height:1.7}
.prose figure{margin:1.8rem 0}
.prose figure img{width:100%;border-radius:8px;border:0.5px solid var(--border);display:block}
.prose figcaption{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400;margin-top:0.5rem;text-align:center}
.prose hr{border:none;border-top:0.5px solid var(--border);margin:2.5rem 0}
.callout{background:var(--card);border:0.5px solid var(--border);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:1.1rem 1.25rem;margin:1.6rem 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--accent)}

/* Daftar isi artikel */
.toc{background:var(--bg2);border:0.5px solid var(--border);border-radius:8px;padding:1.1rem 1.35rem;margin:0 0 2rem}
.toc h4{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:0.7rem;font-weight:400}
.toc ol{margin:0;padding-left:1.1rem}
.toc li{font-family:'Inter',sans-serif;font-size:12px;font-weight:400;line-height:1.9}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent)}

/* CTA di dalam artikel */
.article-cta{background:linear-gradient(135deg,rgba(26,86,219,0.06),var(--card));border:0.5px solid rgba(26,86,219,0.2);border-radius:10px;padding:1.75rem;margin:2.5rem 0 0;text-align:center}
.article-cta h3{font-size:1.05rem;font-weight:700;margin-bottom:0.5rem;color:var(--text)}
.article-cta p{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);font-weight:400;line-height:1.8;margin-bottom:1.2rem;max-width:420px;margin-left:auto;margin-right:auto}

/* Kartu blog: thumbnail gambar + tag */
.post-card{display:flex;flex-direction:column}
.post-card a.post-card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.post-card-thumb img{width:100%;height:100%;object-fit:cover}
.post-card-thumb{height:150px;overflow:hidden;padding:0}
.post-card-body{display:flex;flex-direction:column;flex:1}
.post-card-body .post-meta{margin-top:auto}
.post-cat{display:inline-block;font-family:'Inter',sans-serif;font-size:10px;color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;border:0.5px solid rgba(26,86,219,0.3);padding:2px 8px;border-radius:10px;margin-bottom:0.6rem}
.post-meta{display:flex;justify-content:space-between;align-items:center;font-family:'Inter',sans-serif;font-size:10px;color:var(--muted);font-weight:400}
.post-read{color:var(--accent)}

/* Artikel terkait */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}

/* Filter kategori blog */
.blog-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem}

/* Halaman layanan (services/) */
.faq-item{border:0.5px solid var(--border);border-radius:8px;background:var(--bg2);margin-bottom:0.75rem;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1rem 1.25rem;font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q:hover{background:var(--card)}
.faq-q .faq-arrow{color:var(--accent);transition:transform 0.2s;flex-shrink:0}
.faq-a{padding:0 1.25rem 1.15rem;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.85}

/* Touch up visual minor */
.service-card,.value-item,.vision-card,.team-card,.partner-card,.client-card,.project-card,.gallery-card,.post-card{box-shadow:0 1px 2px rgba(13,27,62,0.03)}
.service-card:hover,.project-card:hover,.post-card:hover,.gallery-card:hover{box-shadow:0 6px 20px rgba(26,86,219,0.08)}
.gallery-card img,.post-card-thumb img{transition:transform 0.45s ease}
.gallery-card:hover img,.post-card:hover .post-card-thumb img{transform:scale(1.04)}
.stats-bar .stat-num{font-variant-numeric:tabular-nums}
section{scroll-margin-top:64px}

@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  .breadcrumb{padding:0.8rem 1.25rem 0}
  .article-wrap,.article-head{padding-left:1.25rem;padding-right:1.25rem}
  .site-footer{padding:2.25rem 1.25rem 1.25rem}
}


/* ── v11.1 — topology dihapus, section "Kami beda." jadi satu kolom ── */
.why-grid--solo{grid-template-columns:1fr;gap:1.75rem}
.why-grid--solo .why-text p{max-width:78ch}
.why-grid--solo .why-list{columns:2;column-gap:2.5rem;margin-top:1.25rem}
.why-grid--solo .why-list li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media(max-width:700px){
  .why-grid--solo .why-list{columns:1}
}

/* ═══════════════════════════════════════════════════════════
   v11.2 — Perbaikan desain
   Hero & page-hero gelap · section jangkar gelap · ikon SVG ·
   galeri grid bervariasi · JetBrains Mono untuk aksen pendek
   ═══════════════════════════════════════════════════════════ */

/* ── Aksen mono: label, tag, angka. Paragraf tetap Inter. ── */
.section-label,.hero-tag,.stat-label,.project-tag,.project-year,.project-status span,
.post-cat,.post-meta,.post-date,.post-read,.breadcrumb,.featured-label,.price-cat,
.status-badge,.article-meta,.toc h4,.site-footer h4,.filter-btn,.cat-btn,
.pkg-badge,.pkg-img-label,.prod-type-desc,.topo-label,.value-num,
.prose figcaption,.gallery-caption p{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.section-label{font-size:10.5px;letter-spacing:0.12em}
.hero-tag{font-size:10.5px;letter-spacing:0.05em}
.stat-label{font-size:9.5px;letter-spacing:0.08em}

/* ── Ikon garis SVG (pengganti emoji) ── */
.ico{width:20px;height:20px;display:block;flex-shrink:0}
.service-icon,.client-icon,.partner-icon{color:var(--accent)}
.service-icon .ico{width:20px;height:20px}
.cat-btn .ico,.faq-q .ico{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:5px}
.cat-btn{display:inline-flex;align-items:center;gap:2px}

/* ══ HERO GELAP ══ */
.hero,.page-hero{background:#0a1730;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero{padding:6.5rem 2rem 5rem}
.page-hero{padding:4.5rem 2rem 4rem}
.hero-bg-img,.page-hero .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.85;z-index:0}
/* Scrim pekat di kolom teks, hampir bening di kanan supaya fotonya terbaca */
.hero::after,.page-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,rgba(10,23,48,0.93) 0%,rgba(10,23,48,0.80) 30%,rgba(10,23,48,0.40) 66%,rgba(10,23,48,0.16) 100%)}
.hero .grid-bg,.page-hero .grid-bg{z-index:2;opacity:0.85;
  background-image:linear-gradient(rgba(120,170,255,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,0.10) 1px,transparent 1px)}
.hero-logo,.hero-tag,.hero h1,.hero-sub,.hero-cta,
.page-hero h1,.page-hero p,.page-hero .hero-tag{position:relative;z-index:3}

.hero h1,.page-hero h1{color:#fff}
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-0.03em;max-width:900px;line-height:1.12}
.hero h1 em,.page-hero h1 em{color:#78b0ff}
.hero-sub{color:rgba(255,255,255,0.88);font-size:13.5px;max-width:500px;text-shadow:0 1px 12px rgba(10,23,48,0.7)}
.page-hero p{color:rgba(255,255,255,0.88);text-shadow:0 1px 12px rgba(10,23,48,0.7)}
.hero-tag{color:#9cc6ff;border-color:rgba(156,198,255,0.35);background:rgba(120,170,255,0.10)}
.hero-tag::before{background:#78b0ff}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,0.45)}
.hero .btn-outline:hover{background:rgba(255,255,255,0.10);border-color:#fff}

/* ══ SECTION JANGKAR GELAP ══ */
.section-dark{background:#0a1730;border-top:none;border-bottom:none;position:relative;overflow:hidden}
.section-dark .section-title{color:#fff}
.section-dark .section-label{color:#78b0ff}
.section-dark .why-text p{color:rgba(255,255,255,0.74)}
.section-dark .why-list li{color:#fff;border-bottom-color:rgba(255,255,255,0.13)}
.section-dark .why-list li::before{background:#3ddc9a}
.section-dark .btn-outline{color:#fff;border-color:rgba(255,255,255,0.45)}

/* ══ GALERI GRID BERVARIASI ══ */
.gallery-grid--varied{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:186px;gap:1rem}
.gallery-grid--varied .gallery-card{aspect-ratio:auto}
.gallery-grid--varied .g-hero{grid-column:span 2;grid-row:span 2}
.gallery-grid--varied .g-tall{grid-row:span 2}
.gallery-grid--varied .g-hero .gallery-caption h4{font-size:14px}
@media(max-width:820px){
  .gallery-grid--varied{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gallery-grid--varied .g-hero{grid-column:span 2;grid-row:span 2}
  .gallery-grid--varied .g-tall{grid-row:span 1}
}
@media(max-width:560px){
  .gallery-grid--varied{grid-template-columns:1fr;grid-auto-rows:180px}
  .gallery-grid--varied .g-hero{grid-column:span 1;grid-row:span 1}
}

@media(max-width:640px){
  .hero{padding:4rem 1.25rem 3.25rem}
  .page-hero{padding:3rem 1.25rem 2.75rem}
}

/* ── v11.4 — Galeri beranda: 4 tile, seluruhnya tautan ── */
.gallery-grid--four{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;gap:1rem}
.gallery-grid--four .gallery-card{aspect-ratio:auto}
.gallery-grid--four .g-wide{grid-column:span 2}
a.gallery-card{display:block;text-decoration:none;color:inherit}
a.gallery-card:hover{border-color:rgba(26,86,219,0.4)}
.gallery-cta{display:block;margin-top:5px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;color:#9cc6ff;letter-spacing:0.05em;opacity:0;transform:translateY(3px);
  transition:opacity 0.25s,transform 0.25s}
a.gallery-card:hover .gallery-cta,a.gallery-card:focus-visible .gallery-cta{opacity:1;transform:none}
.gallery-caption{background:linear-gradient(transparent,rgba(5,10,20,0.35) 35%,rgba(5,10,20,0.9))}
@media(hover:none){.gallery-cta{opacity:1;transform:none}}
@media(max-width:820px){
  .gallery-grid--four{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gallery-grid--four .g-wide{grid-column:span 2}
}
@media(max-width:560px){
  .gallery-grid--four{grid-template-columns:1fr;grid-auto-rows:200px}
  .gallery-grid--four .g-wide{grid-column:span 1}
}

/* ═══════════════════════════════════════════════════════════
   v11.5 — Pass mobile-first
   Mayoritas pengunjung dari HP: teks dinaikkan, target sentuh
   diperbesar ke ambang 44px, katalog harga dibuat terbaca.
   ═══════════════════════════════════════════════════════════ */

/* ── Target sentuh (berlaku di semua ukuran) ── */
.hamburger{width:44px;height:44px;padding:10px;justify-content:center;margin-right:-10px}
.footer-social a{width:40px;height:40px}
.footer-social img{width:18px;height:18px}
.breadcrumb a,.breadcrumb [aria-current]{display:inline-block;padding:7px 0}
.breadcrumb ol{align-items:center}
.toc li a{display:inline-block;padding:5px 0}
.site-footer li{padding:1px 0}
.site-footer a{display:inline-block;padding:5px 0}
.contact-link{min-height:64px}

@media(max-width:640px){
  /* ── Keterbacaan: teks isi naik ke 14px ── */
  .hero-sub,.page-hero p{font-size:14.5px;line-height:1.75}
  .service-card p,.why-text p,.client-card p,.project-body p,.post-card-body p,
  .vision-card p,.value-item p,.team-card p,.about-text p,.contact-box p{font-size:14px;line-height:1.7}
  .why-list li{font-size:13.5px}
  .site-footer p,.site-footer li,.site-footer a,.footer-about{font-size:13px;line-height:1.8}
  .contact-link-text h4{font-size:14px}
  .contact-link-text p{font-size:12.5px}
  .service-card h3,.project-body h3,.post-card-body h3,.client-card h3{font-size:15px}
  .section-label{font-size:11px}
  .stat-label{font-size:10px}
  .gallery-caption h4{font-size:13px}
  .gallery-caption p{font-size:11px}
  .article-lede{font-size:15px}
  .prose p,.prose li{font-size:16.5px;line-height:1.8}
  .prose h2{font-size:1.35rem}
  .prose h3{font-size:1.08rem}
  .faq-q{font-size:14.5px;padding:1.1rem}
  .faq-a{font-size:14px}

  /* ── Katalog harga: dari 9–11px jadi terbaca ── */
  .price-cat,.prod-type-desc,.pkg-spec,.pkg-row,.pkg-img-label,.prod-package{font-size:12.5px;line-height:1.65}
  .pkg-badge{font-size:12px;padding:3px 9px}
  .site-footer a{padding:7px 0}
  .price-item span:first-child,.price-val{font-size:13px}
  .prod-type-label{font-size:14px;padding:0.85rem 0}
  .brand-card-header{padding:0.9rem 1rem}
  .brand-card-header h3{font-size:15px}

  /* ── Tombol filter lebih mudah disentuh ── */
  .filter-btn,.cat-btn{min-height:42px;padding-left:14px;padding-right:14px}
  .filter-bar,.cat-filter,.blog-filter{gap:7px}

  /* ── Tombol utama selebar layar ── */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn-primary,.hero-cta .btn-outline{text-align:center;min-height:46px;
    display:flex;align-items:center;justify-content:center}

  /* ── Tombol WhatsApp melayang jangan menutupi konten ── */
  a[title="Chat on WhatsApp"]{bottom:16px;right:16px;width:52px;height:52px}
  a[title="Chat on WhatsApp"] img{width:52px;height:52px}
  .site-footer{padding-bottom:5rem}
}

/* ── v11.6 — Section "Kenapa pilih kami": bullet di latar gelap ── */
.why-intro{font-size:14.5px;color:rgba(255,255,255,0.78);line-height:1.8;max-width:68ch;margin:-1.2rem 0 2rem}
.why-points{list-style:none;margin:0;padding:0;max-width:78ch}
.why-points li{position:relative;padding:0 0 1.1rem 1.45rem;font-size:14.5px;line-height:1.8;
  color:rgba(255,255,255,0.74)}
.why-points li:last-child{padding-bottom:0}
.why-points li::before{content:'';position:absolute;left:0;top:0.75em;width:6px;height:6px;
  border-radius:50%;background:#3ddc9a}
.why-points strong{display:block;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;
  color:#fff;margin-bottom:0.2rem}
@media(max-width:640px){
  .why-intro{font-size:14px;margin-bottom:1.6rem}
  .why-points li{font-size:14px;padding-bottom:1.25rem}
}

/* ── v11.7 — Footer versi mobile ──────────────────────────────
   Masalah: aturan lama `footer{text-align:center}` di media query
   ikut mengenai footer baru, dan 4 kolom menumpuk jadi satu
   sehingga tingginya 1.277px (1,5 layar). */
@media(max-width:640px){
  footer.site-footer{text-align:left;padding:2.25rem 1.25rem 4.5rem}

  /* Halaman & Layanan berdampingan; brand dan kontak selebar penuh */
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem 1.25rem;margin-bottom:1.6rem}
  .footer-grid > div:first-child,
  .footer-grid > div:last-child{grid-column:1 / -1}

  .footer-about{font-size:13px;line-height:1.7;max-width:none}
  .footer-brand-name{margin-bottom:0.7rem}
  .site-footer h4{margin-bottom:0.45rem}
  .site-footer p,.site-footer li,.site-footer a{line-height:1.65}
  .site-footer a{padding:5px 0}
  .site-footer li{padding:0}
  .footer-social{margin-top:0.9rem;gap:12px}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:3px;
    padding-top:1rem;text-align:left}
  .footer-bottom p{font-size:11px;line-height:1.6}
}

/* ── Perbaikan: ikon sosmed footer kembali ke tengah ──────────
   Aturan `.site-footer a{display:inline-block;padding:5px 0}`
   (untuk memperbesar area sentuh link teks) ikut menimpa
   `display:flex` pada kotak ikon, sehingga ikonnya menempel
   di kiri-atas. Dikembalikan dengan selektor yang lebih spesifik. */
.site-footer .footer-social a{display:flex;align-items:center;justify-content:center;
  padding:0;width:40px;height:40px;flex-shrink:0}
.site-footer .footer-social img{width:18px;height:18px;object-fit:contain;display:block}

/* ═══════════════════════════════════════════════════════════
   v11.8 — Bottom navigation untuk HP
   Menu hamburger di pojok kanan atas jauh dari jempol dan
   tersembunyi. Bar ini menaruh 5 tujuan utama permanen di
   bawah layar; tombol WhatsApp melayang dilebur ke dalamnya.
   ═══════════════════════════════════════════════════════════ */
.mnav{display:none}

@media(max-width:768px){
  .mnav{position:fixed;left:0;right:0;bottom:0;z-index:9998;display:grid;
    grid-template-columns:repeat(5,1fr);
    background:rgba(255,255,255,0.97);backdrop-filter:blur(14px);
    border-top:0.5px solid rgba(26,86,219,0.18);
    box-shadow:0 -2px 16px rgba(13,27,62,0.07);
    padding:6px 0 calc(8px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none;color:var(--muted);padding:5px 2px;min-height:48px}
  .mnav a svg,.mnav a .ico{width:21px;height:21px}
  .mnav a span{font-family:'Inter',sans-serif;font-size:9.5px;font-weight:500;letter-spacing:0.02em}
  .mnav a.on{color:var(--accent)}
  .mnav a.wa{color:#25d366}
  .mnav a:active{background:var(--card)}

  /* tombol WhatsApp melayang dilebur ke bar */
  a[title="Chat on WhatsApp"]{display:none!important}

  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:1.5rem}
}

/* ═══════════════════════════════════════════════════════════
   v11.9 — Tombol filter & kategori: tab garis bawah
   Sebelumnya: HURUF BESAR monospace, garis 0,5px pucat,
   tinggi 24px, status aktif nyaris tak terlihat.
   ═══════════════════════════════════════════════════════════ */
.filter-bar,.blog-filter,.cat-filter{display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;
  border-bottom:1px solid rgba(26,86,219,0.16);margin-bottom:2.25rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-bar::-webkit-scrollbar,.blog-filter::-webkit-scrollbar,
.cat-filter::-webkit-scrollbar{display:none}
.cat-filter{margin-bottom:1.5rem}

.filter-btn,.cat-btn{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;
  letter-spacing:0;text-transform:none;padding:10px 16px 12px;border:none;
  border-bottom:2px solid transparent;border-radius:0;background:transparent;
  color:var(--muted);white-space:nowrap;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;margin-bottom:-1px;
  transition:color 0.2s,border-color 0.2s}
.filter-btn:hover,.cat-btn:hover{color:var(--accent);background:transparent}
.filter-btn.on,.cat-btn.active{color:var(--accent);border-bottom-color:var(--accent);
  background:transparent;font-weight:600}

.filter-btn .fc{font-size:11px;font-weight:600;color:#93a1ba;font-variant-numeric:tabular-nums}
.filter-btn.on .fc{color:var(--accent)}
.cat-btn .ico{width:16px;height:16px;margin-right:0;vertical-align:0}

@media(max-width:640px){
  .filter-btn,.cat-btn{min-height:44px;font-size:13px;padding:10px 14px 12px}
  .filter-bar,.blog-filter,.cat-filter{margin-bottom:1.75rem}
}

/* ── v12.0 — Halaman About: nilai di latar gelap + kartu kapabilitas ── */
.section-dark .value-item{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.13)}
.section-dark .value-item:hover{background:rgba(255,255,255,0.08);border-color:rgba(120,176,255,0.4)}
.section-dark .value-item h3{color:#fff}
.section-dark .value-item p{color:rgba(255,255,255,0.72)}
.section-dark .value-num{color:#78b0ff}

.cap-icon{width:46px;height:46px;border:1px solid rgba(26,86,219,0.22);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  margin:0 auto 0.85rem;background:var(--bg2);transition:border-color 0.2s,background 0.2s}
.cap-icon .ico{width:22px;height:22px}
.team-card:hover .cap-icon{border-color:var(--accent);background:var(--glow)}
.team-card h3{font-size:14px}
.team-card p{font-size:12px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}}
@media(max-width:640px){.team-card p{font-size:13.5px;line-height:1.7}.team-card h3{font-size:15px}}

/* ── v12.1 — Halaman Klien: kartu jadi tautan + paragraf pengantar ── */
a.client-card{text-decoration:none;color:inherit;cursor:pointer}
a.client-card:hover{border-color:rgba(26,86,219,0.35);background:var(--bg2)}
a.client-card:hover h3{color:var(--accent)}
.lead-text{font-size:14.5px;line-height:1.85;color:var(--muted);max-width:76ch;margin-bottom:1rem}
.lead-text:last-of-type{margin-bottom:2rem}
@media(max-width:640px){.lead-text{font-size:14px}}

/* ══ v12.2 — kartu tarif jasa (harga.html: jaringan/IT/PBX/ME) ══════════ */
.rate-wrap{margin-top:1.75rem}
.rate-intro{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.8;max-width:64ch;margin:0.85rem 0 1.35rem}
.rate-scope{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.75rem}
.rate-scope span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);border:0.5px solid var(--border);border-radius:99px;padding:5px 11px;white-space:nowrap}
.rate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.rate-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:1.6rem 1.4rem}
.rate-card--accent{background:#0a1730;border-color:transparent}
.rate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;margin-bottom:1rem}
.rate-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--text);line-height:1.35}
.rate-card--accent .rate-name{color:#fff}
.rate-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.04em;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:rgba(26,86,219,0.10);color:var(--accent);white-space:nowrap;flex-shrink:0}
.rate-card--accent .rate-badge{background:rgba(255,255,255,0.13);color:#a8c6ff}
.rate-price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;color:var(--accent);line-height:1.3;margin-bottom:1.1rem}
.rate-card--accent .rate-price{color:#7aabff}
.rate-price span{font-family:'Inter',sans-serif;font-weight:500;font-size:12.5px;color:var(--muted);margin-left:4px;letter-spacing:0}
.rate-card--accent .rate-price span{color:rgba(255,255,255,0.62)}
.rate-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.65rem}
.rate-list li{position:relative;padding-left:1.05rem;font-family:'Inter',sans-serif;font-size:13px;font-weight:400;line-height:1.7;color:var(--muted)}
.rate-list li strong{color:var(--text);font-weight:600}
.rate-card--accent .rate-list li{color:rgba(255,255,255,0.76)}
.rate-card--accent .rate-list li strong{color:#fff}
.rate-list li::before{content:'';position:absolute;left:0;top:0.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.rate-card--accent .rate-list li::before{background:#7aabff}
.rate-note{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.75;margin:1.5rem 0 1.65rem;padding-left:0.95rem;border-left:2px solid rgba(26,86,219,0.28);max-width:70ch}
@media(max-width:768px){
  .rate-grid{grid-template-columns:1fr}
  .rate-price{font-size:20px}
  .rate-head{flex-direction:column;gap:0.5rem}
  .rate-scope{gap:5px}
  .rate-scope span{font-size:10.5px;padding:4px 9px}
  .rate-wrap .btn-primary{display:block;text-align:center}
}

/* ══ v12.3 — tombol CTA di navbar: teks putih ══════════════════════════
   `.nav-links a` (0,1,1) mengalahkan `.nav-cta` (0,1,0), jadi warnanya
   ikut var(--muted). Ditegaskan ulang dengan selector yang lebih spesifik. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus,
.nav-links a.nav-cta:active{color:#fff;border-bottom-color:transparent}
.nav-links a.nav-cta:hover{background:#1447b8}

/* ══ v12.4 — halaman layanan per kota (services/) ══════════════════════ */
.svc-note{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.85;max-width:68ch}
.svc-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.svc-links li{border-bottom:1px solid rgba(26,86,219,0.12)}
.svc-links li:last-child{border-bottom:none}
.svc-links a{display:flex;align-items:center;gap:10px;padding:14px 2px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;line-height:1.55;transition:color .15s}
.svc-links a::after{content:'\2192';margin-left:auto;color:var(--accent);flex-shrink:0;font-size:15px;transition:transform .15s}
.svc-links a:hover{color:var(--accent)}
.svc-links a:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.svc-links a::after{transition:none}}
/* 6 kartu → 3 kolom, supaya tidak menyisakan sel kosong di baris kedua */
.services-grid--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.services-grid--three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid--three{grid-template-columns:1fr}}
.gallery-grid--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.gallery-grid--two{grid-template-columns:1fr}}
/* lokasi proyek di kartu portofolio */
.project-loc{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:0.02em;margin:4px 0 0}
.project-loc::before{content:'\1F4CD\00a0';opacity:.55;font-family:inherit}
/* tombol outline di page-hero berlatar foto: samakan dengan hero beranda */
.page-hero .btn-outline{color:#fff;border-color:rgba(255,255,255,0.45)}
.page-hero .btn-outline:hover{background:rgba(255,255,255,0.10);border-color:#fff}
/* tab filter (portofolio & blog) disamakan dengan tab katalog harga */
.filter-btn{display:inline-flex;align-items:center;gap:7px}
.filter-btn .ico,.cat-btn .ico{width:16px;height:16px;flex-shrink:0;margin-right:0;vertical-align:0}
.cat-btn{gap:7px}

/* ══ v12.5 — tabel ringkas harga paket CCTV (halaman layanan) ══════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pkg-table-scroll{overflow-x:auto;border:0.5px solid var(--border);border-radius:10px;background:var(--bg2);-webkit-overflow-scrolling:touch}
.pkg-table{border-collapse:collapse;width:100%;min-width:640px;font-family:'Inter',sans-serif;font-size:13px}
.pkg-table th,.pkg-table td{padding:12px 14px;text-align:left;border-bottom:0.5px solid var(--border);vertical-align:middle}
.pkg-table thead th{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);background:var(--card);white-space:nowrap}
.pkg-table tbody tr:last-child td,.pkg-table tbody tr:last-child th{border-bottom:none}
.pkg-table td{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.pkg-brand{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--text);background:var(--card);border-right:0.5px solid var(--border);white-space:nowrap;vertical-align:top;padding-top:16px}
.pkg-type{min-width:190px;white-space:normal;font-weight:600}
.pkg-type span{display:block;font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.pkg-table tbody tr:hover td{background:rgba(26,86,219,0.035)}
/* petunjuk geser mendatar di layar sempit */
.pkg-hint{display:none;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:0.04em;margin:8px 0 0}
@media(max-width:768px){
  .pkg-hint{display:block}
  .pkg-table{font-size:12px;min-width:520px}
  .pkg-table th,.pkg-table td{padding:9px 9px}
  .pkg-table thead th{font-size:9.5px;letter-spacing:0.03em}
  .pkg-type{min-width:0;font-size:12.5px}
  .pkg-type span{display:none}          /* keterangan tipe disembunyikan, lihat versi desktop */
  .pkg-brand{font-size:12.5px;padding-top:12px}
}

/* ══ v12.6 — kartu paket CCTV per merek, bisa dibuka-tutup ════════════ */
.bpk-list{display:flex;flex-direction:column;gap:0.85rem}
.bpk-card{position:relative;background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;overflow:visible}
.bpk-head{position:relative;display:flex;align-items:center;gap:14px;padding:1.25rem 1.4rem;border-radius:12px}
.bpk-head:hover{background:rgba(26,86,219,0.03)}
/* tombol hanya membungkus nama merek (judul bersih untuk mesin pencari),
   tapi area kliknya direntangkan ke seluruh baris lewat ::after */
.bpk-toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.bpk-toggle::after{content:'';position:absolute;inset:0;border-radius:12px}
.bpk-toggle:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px}
.bpk-head img{width:52px;height:52px;object-fit:contain;border-radius:8px;background:#fff;padding:5px;border:0.5px solid var(--border);flex-shrink:0}
.bpk-id{flex:1;min-width:0}
.bpk-name{margin:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;color:var(--text);line-height:1.3}
.bpk-note{margin:2px 0 0;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.5}
.bpk-from{text-align:right;flex-shrink:0}
.bpk-from>span:first-child{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.bpk-from strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:var(--accent);white-space:nowrap}
.bpk-count{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:2px}
.bpk-arrow{color:var(--accent);font-size:13px;flex-shrink:0;transition:transform 0.2s;line-height:1}
.bpk-badge{position:absolute;top:-9px;left:1.4rem;z-index:2;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;background:var(--accent);color:#fff;padding:3px 9px;border-radius:99px}

.bpk-body{padding:0 1.4rem 1.35rem}
.bpk-tier{padding:0.95rem 0}
.bpk-tier:first-child{padding-top:0.35rem;border-top:0.5px solid var(--border);margin-top:0}
.bpk-tier + .bpk-tier{border-top:0.5px solid rgba(26,86,219,0.10)}
.bpk-tier-head{display:flex;align-items:flex-start;gap:9px;margin-bottom:0.7rem}
.bpk-tier-head .ico{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:1px}
.bpk-tier-head strong{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}
.bpk-tier-head span{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.5}
.bpk-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bpk-pill{background:var(--card);border-radius:8px;padding:9px 11px;text-align:left}
.bpk-qty{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.04em;color:var(--muted);text-transform:uppercase;margin-bottom:2px}
.bpk-amt{display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.bpk-arrow{transition:none}}
@media(max-width:760px){
  .bpk-pills{grid-template-columns:repeat(2,1fr)}
  .bpk-head{padding:1.1rem;gap:11px}
  .bpk-head img{width:44px;height:44px}
  .bpk-name{font-size:15.5px}
  .bpk-note{display:none}
  .bpk-from strong{font-size:15px}
  .bpk-count{display:none}
  .bpk-body{padding:0 1.1rem 1.1rem}
  .bpk-tier-head span{display:none}
  .bpk-amt{font-size:12.5px}
}

/* ══ v12.7 — galeri sebelum/sesudah di artikel ═════════════════════════ */
.ba-list{display:flex;flex-direction:column;gap:1.1rem;margin:1.5rem 0}
.ba{margin:0!important}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.ba-pair--solo{grid-template-columns:1fr;max-width:50%}
.ba-side{position:relative;background:var(--card);border-radius:10px;padding:34px 10px 10px}
.ba-tag{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:3px 8px;border-radius:99px;color:#fff}
.ba-tag--b{background:rgba(13,27,62,0.82)}
.ba-tag--a{background:var(--accent)}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,132px));justify-content:start;gap:6px}
.ba-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:6px;background:#fff}
.ba figcaption{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.7;margin-top:0.6rem;max-width:66ch;text-align:left}
.ba figcaption strong{color:var(--text);font-weight:600}
@media(max-width:600px){
  .ba-pair{grid-template-columns:1fr;gap:8px}
  .ba-pair--solo{max-width:100%}
  .ba-side{padding:30px 8px 8px}
  .ba-grid{grid-template-columns:repeat(auto-fit,minmax(72px,104px));gap:5px}
  .ba figcaption{font-size:12px;margin-top:0.7rem}
}

/* ═══ v12.8 — grid layanan dengan jumlah kartu berapa pun ═══
   Grid biasa memakai background garis + gap 1px, jadi sel yang tersisa
   kosong ikut terwarnai dan tampak seperti blok kosong besar. Di sini
   garisnya digambar per kartu memakai outline (tidak memengaruhi layout),
   sehingga baris terakhir yang belum penuh tidak meninggalkan blok warna. */
.services-grid--any{background:transparent;border:0}
.services-grid--any .service-card{outline:0.5px solid var(--border)}

/* ═══ v12.9 — kotak unduh company profile ═══ */
.pdfbox{
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  background:var(--bg2); border:0.5px solid var(--border); border-radius:12px;
  padding:1.5rem 1.6rem; max-width:720px; margin:0 auto;
}
.pdfbox-ico{
  width:54px; height:54px; flex-shrink:0; border-radius:10px;
  border:0.5px solid rgba(26,86,219,0.2); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.pdfbox-ico .ico{width:26px; height:26px}
.pdfbox-txt{flex:1 1 240px; text-align:left}
.pdfbox-txt h3{font-size:15px; font-weight:600; color:var(--text); margin:0 0 0.3rem}
.pdfbox-txt p{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:400;
  color:var(--muted); line-height:1.65; margin:0;
}
.pdfbox-meta{
  display:block; margin-top:0.5rem; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
}
.pdfbox .btn-primary{flex-shrink:0; display:inline-flex; align-items:center; gap:8px}
.pdfbox .btn-primary .ico{width:16px; height:16px}
@media(max-width:560px){
  .pdfbox{padding:1.25rem; gap:1rem}
  .pdfbox .btn-primary{width:100%; justify-content:center}
}

/* ═══ v13.0 — logo bitmap di navbar & footer ═══ */
.logo-icon img{width:100%; height:100%; object-fit:contain; display:block}

/* ═══ v13.1 — perbaikan footer, kartu kontak, dan tombol WhatsApp ═══ */

/* 1 — paragraf profil di footer dibuat rata kiri-kanan */
.footer-about{text-align:justify; hyphens:auto; -webkit-hyphens:auto}

/* 2 — teks kartu kontak: sebelumnya mewarisi margin-bawah 24px dari
   `.contact-box p`, sehingga blok teksnya lebih tinggi daripada isinya dan
   tulisannya tampak naik ~12px dibanding logo. Sekarang benar-benar
   setinggi isinya dan terpusat vertikal terhadap logo. */
.contact-link-text{display:flex; flex-direction:column; justify-content:center}
.contact-link-text p{margin-bottom:0}

/* 3 — tombol WhatsApp melayang.
   Bayangannya memakai drop-shadow (mengikuti bentuk logo, termasuk ekor
   gelembungnya) bukan box-shadow yang selalu berbentuk kotak/lingkaran. */
.wa-fab{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:56px; height:56px; display:block; line-height:0; text-decoration:none;
  filter:drop-shadow(0 4px 14px rgba(37,211,102,0.45));
  transition:transform 0.2s ease, filter 0.2s ease;
}
.wa-fab img{width:56px; height:56px; display:block}
.wa-fab:hover{transform:scale(1.06); filter:drop-shadow(0 6px 18px rgba(37,211,102,0.55))}
.wa-fab:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:50%}
@media(prefers-reduced-motion:reduce){.wa-fab{transition:none}.wa-fab:hover{transform:none}}
/* Di HP tombol ini disembunyikan: navigasi bawah (.mnav) sudah punya
   tombol WhatsApp sendiri, jadi dua-duanya tampil hanya menutupi konten
   dan menawarkan hal yang sama dua kali. Ambang batasnya disamakan
   dengan ambang munculnya .mnav (768px) supaya tidak pernah ada celah
   di mana keduanya hilang atau keduanya muncul. */
@media(max-width:768px){.wa-fab{display:none}}

/* ═══ v13.2 — nama merek di footer ═══
   Sebelumnya aturannya ditulis `.footer-brand-name` (spesifisitas 0,1,0),
   padahal elemennya <a> di dalam footer sehingga `.site-footer a` (0,2,0)
   selalu menang. Akibatnya nama merek diam-diam tampil sebagai Inter 12px
   bobot 400 — bukan Montserrat 14px bobot 800 seperti yang dimaksud.
   Selektornya sekarang disamakan tingkatannya. */
.site-footer a.footer-brand-name{
  display:flex; align-items:center; gap:9px;
  font-family:'Montserrat',sans-serif; font-size:14px; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase; line-height:1.15;
  color:var(--text); margin-bottom:0.9rem; text-decoration:none;
}
.site-footer a.footer-brand-name:hover{color:var(--accent)}
.footer-brand-text{display:block}
.footer-brand-text .hl{color:var(--accent)}
/* logo dibuat display:block supaya tidak duduk di garis baris teks —
   itu yang bikin lambangnya naik 4px dibanding tulisannya */
.footer-brand-logo{width:30px; height:30px; flex-shrink:0; display:block}
.footer-brand-logo img,.footer-brand-logo svg{width:30px; height:30px; display:block}
.site-footer .footer-brand-text{color:var(--text)}

/* ═══ v13.3 — tautan navbar ditebalkan ═══
   Dikecualikan .nav-cta: `.nav-links a` (0,2,0) mengalahkan `.nav-cta` (0,1,0),
   jadi tanpa :not() tombolnya justru ikut turun bobot dari 700 ke 600. */
.nav-links a:not(.nav-cta){font-weight:600}
.nav-links a.active{font-weight:700}