/* Dirandra Electric - Blueprint Spec (industri)
   Warna dari admin: --primary (tombol, footer, item highlight), --secondary (hover, blok gelap, item non-highlight). */
:root{
  --line:#B8C4D4;
  --line-soft:#D8E1EC;
  --muted:#5B6D88;
  --ph:#7D8DA6;
  --font-head:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--body-text-color);background:var(--section-alt-bg);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--heading-color);margin:0;line-height:1;}
p{margin:0 0 1em;}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 40px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.mono{font-family:var(--font-mono);}

/* ---------- Topbar ---------- */
.topbar{background:var(--secondary);color:#C7D3E4;font-family:var(--font-mono);font-size:13px;}
.topbar-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 32px;padding-top:10px;padding-bottom:10px;}

/* ---------- Header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;}
.brand{display:flex;align-items:center;}
.brand-lockup{display:flex;align-items:center;gap:12px;}
.brand-logo{max-height:48px;width:auto;}
.brand-mark{width:44px;height:44px;flex:none;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:28px;line-height:1;}
.brand-text{font-family:var(--font-head);font-weight:700;font-size:25px;line-height:1;text-transform:uppercase;color:var(--heading-color);display:flex;flex-direction:column;gap:4px;}
.brand-text small{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--muted);}
.main-nav{display:flex;align-items:center;gap:36px;}
.main-nav a:not(.btn-nav-cta){font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--heading-color);padding:30px 0;border-bottom:4px solid transparent;transition:border-color .15s;}
.main-nav a:not(.btn-nav-cta):hover{border-bottom-color:var(--secondary);}
.main-nav a.active{border-bottom-color:var(--primary);}
.btn-nav-cta{background:var(--primary);color:#fff;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;transition:background .15s;}
.btn-nav-cta:hover{background:var(--secondary);}
.nav-toggle{display:none;width:48px;height:48px;border:1.5px solid var(--heading-color);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--heading-color);}
.nav-backdrop{display:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:17px 32px;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-align:center;line-height:1.2;}
.btn-sm{padding:12px 22px;font-size:14px;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--secondary);}
.btn-accent{background:var(--accent);color:var(--secondary);}
.btn-accent:hover{background:#fff;}
.btn-ghost{border-color:#fff;color:#fff;background:transparent;}
.btn-ghost:hover{background:#fff;color:var(--secondary);}
.btn-light{background:#fff;color:var(--secondary);}
.btn-light:hover{background:var(--accent);}
.site-footer .btn-light:hover{background:var(--secondary);color:#fff;}

/* ---------- Section heading ---------- */
.section{padding:96px 0;}
.section-white{background:var(--card-bg);}
.section-dark{background:var(--secondary);color:var(--text-on-dark);}
.sec-head{margin-bottom:44px;max-width:760px;}
.sec-head h2,.about-text h2,.contact-form-wrap h2{font-size:52px;}
.sec-head p{margin:14px 0 0;color:var(--muted);font-size:18px;}
.sec-head.on-dark h2{color:var(--text-on-dark);}
.sec-tag{display:flex;align-items:center;gap:14px;margin-bottom:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);}
.sec-tag b{background:var(--secondary);color:#fff;padding:5px 10px;font-weight:500;}
.sec-tag i{flex:1;height:1px;background:var(--line);}
.on-dark .sec-tag{color:var(--accent);}
.on-dark .sec-tag b{background:var(--accent);color:var(--secondary);}
.on-dark .sec-tag i{background:rgba(255,255,255,.25);}

/* ---------- Hero ---------- */
.hero{background-color:var(--secondary);color:var(--text-on-dark);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;}
.hero.has-bg{background-size:cover;background-position:center;position:relative;}
.hero.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,31,60,.92),rgba(10,31,60,.6));}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;padding-top:88px;padding-bottom:96px;}
.hero.has-bg .hero-grid{grid-template-columns:1fr;}
.eyebrow-mono{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;}
.hero h1{font-size:92px;line-height:.94;color:var(--text-on-dark);margin-bottom:24px;}
.hero-lead{font-size:19px;line-height:1.65;color:#B4C2D8;max-width:540px;margin-bottom:34px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero-frame{position:relative;padding:14px;}
.hero-frame img{width:100%;aspect-ratio:5/4;object-fit:cover;}
.corner{position:absolute;width:36px;height:36px;border:0 solid var(--accent);pointer-events:none;}
.corner.tl{left:0;top:0;border-left-width:3px;border-top-width:3px;}
.corner.br{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;}

/* ---------- Stats ---------- */
.stats-strip{background:var(--primary);color:#fff;}
.stats-grid{display:flex;flex-wrap:wrap;padding-top:0;padding-bottom:0;}
.stat{flex:1 1 220px;padding:28px 24px;border-left:1px solid rgba(255,255,255,.25);}
.stat:first-child{border-left:0;padding-left:0;}
.stat strong{display:block;font-family:var(--font-head);font-size:44px;line-height:1;text-transform:uppercase;}
.stat span{display:block;font-size:14px;color:#D5E3F6;margin-top:4px;}

/* ---------- Kategori ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.cat-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--line);border-top:4px solid var(--primary);padding:24px;transition:border-color .15s,transform .15s;}
.cat-card:hover{border-top-color:var(--secondary);transform:translateY(-3px);}
.cat-no{font-family:var(--font-mono);font-size:12px;color:var(--primary);margin-bottom:10px;}
.cat-name{font-family:var(--font-head);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;color:var(--heading-color);margin-bottom:10px;}
.cat-desc{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:18px;}
.cat-more{margin-top:auto;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);}
.cat-card:hover .cat-more,.brand-card:hover .cat-more{color:var(--secondary);}

/* ---------- Keunggulan ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.feat-card{padding:28px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);}
.feat-no{display:block;font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-bottom:14px;}
.feat-card h3{font-size:28px;line-height:1.05;color:var(--text-on-dark);margin-bottom:10px;}
.feat-card p{margin:0;color:#B4C2D8;font-size:15px;line-height:1.6;}

/* ---------- Merek ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.brand-card{display:flex;gap:24px;align-items:center;background:var(--card-bg);border:1px solid var(--line);padding:28px;transition:border-color .15s;}
.brand-card:hover{border-color:var(--secondary);}
.brand-card-logo{width:96px;height:96px;flex:none;background:var(--section-alt-bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.brand-card-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:8px;}
.brand-card-logo b{font-family:var(--font-head);font-size:44px;color:var(--primary);}
.brand-card-body{display:flex;flex-direction:column;gap:6px;min-width:0;}
.brand-card-name{font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1;text-transform:uppercase;color:var(--heading-color);}
.brand-card-desc{font-size:15px;color:var(--muted);line-height:1.5;}

/* ---------- Alur ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;}
.step{border-top:4px solid var(--primary);padding:20px 24px 0 0;}
.step-no{display:block;font-family:var(--font-mono);font-size:13px;color:var(--primary);margin-bottom:8px;}
.step h3{font-size:28px;margin-bottom:8px;}
.step p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}

/* ---------- CTA ---------- */
.cta-band{background:var(--secondary);color:var(--text-on-dark);}
.cta-inner{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;padding-top:64px;padding-bottom:64px;}
.cta-copy{flex:1 1 520px;}
.cta-band h2{font-size:46px;line-height:1.02;color:var(--text-on-dark);}
.cta-band p{margin:14px 0 0;color:#B4C2D8;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- Page banner ---------- */
.page-banner{background-color:var(--secondary);color:var(--text-on-dark);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;position:relative;}
.page-banner.has-bg{background-size:cover;background-position:center;}
.page-banner.has-bg::before{content:"";position:absolute;inset:0;background:rgba(10,31,60,.78);}
.banner-inner{position:relative;padding:56px 0 60px;}
.breadcrumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.breadcrumb a:hover{text-decoration:underline;}
.page-banner h1{font-size:72px;line-height:.95;color:var(--text-on-dark);}
.banner-subtitle{margin:16px 0 0;color:#B4C2D8;font-size:19px;max-width:640px;}
.banner-text{margin:12px 0 0;color:#B4C2D8;max-width:640px;}
.banner-btn{margin-top:24px;}

/* ---------- Katalog ---------- */
.catalog{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}
.filters{position:sticky;top:104px;}
.search-box{display:flex;margin-bottom:28px;}
.search-box input{flex:1;min-width:0;border:1.5px solid var(--heading-color);border-right:0;background:#fff;padding:12px 14px;font-family:inherit;font-size:15px;border-radius:0;}
.search-box button{border:1.5px solid var(--primary);background:var(--primary);color:#fff;font-weight:600;padding:0 16px;cursor:pointer;text-transform:uppercase;font-size:13px;letter-spacing:.04em;font-family:inherit;}
.search-box button:hover{background:var(--secondary);border-color:var(--secondary);}
.filter-group{margin-bottom:28px;}
.filter-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:12px;}
.filter-item{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--line);margin-bottom:-1px;background:#fff;font-size:15px;color:var(--heading-color);transition:background .15s,color .15s;}
.filter-item em{font-style:normal;font-family:var(--font-mono);font-size:12px;opacity:.7;align-self:center;}
.filter-item:hover{background:var(--secondary);color:#fff;border-color:var(--secondary);}
.filter-item.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.catalog-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--muted);text-transform:uppercase;margin-bottom:14px;}
.catalog-meta a{color:var(--primary);}
.catalog-meta a:hover{color:var(--secondary);}
.ptable{border:1px solid var(--heading-color);background:#fff;}
.p-head,.p-row{display:grid;grid-template-columns:56px minmax(0,3fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) 110px;align-items:center;column-gap:8px;}
.p-head{background:var(--secondary);color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:14px 16px;}
.p-item{border-top:1px solid var(--line);}
.p-item:first-of-type{border-top:0;}
.p-row{list-style:none;cursor:pointer;padding:16px;transition:background .15s;}
.p-row::-webkit-details-marker{display:none;}
.p-row:hover{background:#F3F6FA;}
.p-item[open] > .p-row{background:#F3F6FA;}
.p-no{font-family:var(--font-mono);font-size:13px;color:var(--ph);}
.p-name strong{display:block;font-weight:600;font-size:17px;color:var(--heading-color);line-height:1.3;}
.p-name small{display:block;color:var(--muted);font-size:14px;}
.p-cell{font-size:15px;}
.p-cell.mono{font-family:var(--font-mono);font-size:14px;}
.p-act{text-align:right;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);white-space:nowrap;}
.p-act i{font-style:normal;display:inline-block;width:20px;text-align:center;}
.p-row:hover .p-act{color:var(--secondary);}
.p-item[open] .p-act i{transform:rotate(45deg);}
.p-detail{display:flex;gap:28px;padding:8px 16px 24px 72px;background:#F3F6FA;}
.p-detail-img{flex:0 0 220px;}
.p-detail-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);}
.p-detail-body{flex:1;min-width:0;}
.p-detail-body p{font-size:16px;}
.spec-list{margin:0 0 20px;border-top:1px solid var(--line);}
.spec-list div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;}
.spec-list dt{color:var(--muted);}
.spec-list dd{margin:0;font-family:var(--font-mono);font-size:14px;text-align:right;color:var(--heading-color);}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px;}
.pager a{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;font-family:var(--font-mono);font-size:14px;}
.pager a:hover{background:var(--secondary);color:#fff;}
.pager a.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.empty-state{background:#fff;border:1px dashed var(--line);padding:40px 24px;text-align:center;color:var(--muted);}
.empty-state a{color:var(--primary);text-decoration:underline;}
.help-note{margin-top:32px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);padding:20px 24px;display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;}

/* ---------- Tentang ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
.about-text p{font-size:18px;line-height:1.75;color:var(--body-text-color);}
.about-text h2{margin-bottom:22px;}
.about-media{position:relative;padding:14px;}
.about-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.about-media .corner{border-color:var(--primary);}
.vm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.vm-card{background:var(--card-bg);border:1px solid var(--line);border-top:4px solid var(--primary);padding:32px;}
.vm-card:nth-child(2){border-top-color:var(--secondary);}
.vm-tag{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:10px;}
.vm-card p{margin:0;font-size:18px;line-height:1.65;color:var(--heading-color);}
.kv-table{margin:0;border-top:1px solid var(--heading-color);background:#fff;}
.kv-table div{display:flex;gap:24px;padding:18px 24px;border-bottom:1px solid var(--line);}
.kv-table dt{flex:0 0 180px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
.kv-table dd{margin:0;font-size:17px;color:var(--heading-color);}

/* ---------- Kontak ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;}
.contact-form-wrap{background:var(--card-bg);border:1px solid var(--line);border-top:4px solid var(--primary);padding:36px;}
.contact-form-wrap h2{font-size:38px;margin-bottom:22px;}
.contact-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.contact-form input,.contact-form textarea{border:1.5px solid var(--heading-color);background:#fff;padding:13px 14px;font-family:var(--font-body);font-size:16px;color:var(--heading-color);border-radius:0;letter-spacing:0;text-transform:none;}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);outline:3px solid rgba(46,125,215,.25);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.alert{padding:14px 18px;margin-bottom:18px;font-weight:600;font-size:15px;border-left:4px solid;}
.alert-success{background:#E8F5EC;color:#14602E;border-color:#14602E;}
.alert-error{background:#FDECEC;color:#A32020;border-color:#A32020;}
.contact-card{background:var(--secondary);color:var(--text-on-dark);}
.ci{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.18);}
.ci:last-child{border-bottom:0;}
.ci span{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.ci p{margin:0;font-size:17px;line-height:1.5;}
.ci a:hover{color:var(--accent);}
.map-wrap{display:block;margin-top:20px;height:240px;border:1px solid var(--line);background:repeating-linear-gradient(135deg,#DCE4EF,#DCE4EF 12px,#D0DAE8 12px,#D0DAE8 24px);}
.map-wrap iframe{width:100%;height:100%;border:0;}
.map-link{display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;font-size:14px;}
.map-link:hover{color:var(--secondary);}

/* ---------- Footer ---------- */
.site-footer{background:var(--primary);color:#C9D7EB;border-top:6px solid var(--secondary);overflow:hidden;}
.footer-inner{display:flex;flex-wrap:wrap;gap:40px;padding-top:64px;padding-bottom:48px;}
.footer-brand{flex:1.5 1 280px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.footer-lockup{display:flex;align-items:center;gap:12px;}
.footer-brand .brand-mark{background:#fff;color:var(--primary);}
.footer-logo{max-height:48px;width:auto;}
.footer-name{font-family:var(--font-head);font-weight:700;font-size:30px;text-transform:uppercase;color:#fff;line-height:1;}
.footer-company{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.footer-tagline{margin:0;max-width:300px;line-height:1.65;}
.footer-col{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:10px;}
.footer-col.wide{flex:1.5 1 260px;}
.footer-col h4{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.footer-col a{width:fit-content;max-width:100%;transition:background .15s,color .15s,box-shadow .15s;}
.footer-col a:hover{background:var(--secondary);color:#fff;box-shadow:-8px 0 0 var(--secondary),8px 0 0 var(--secondary);}
.footer-contact{display:flex;gap:12px;align-items:flex-start;margin:0;line-height:1.55;}
.footer-contact svg{flex:none;margin-top:2px;color:var(--accent);}
.footer-bottom{background:var(--secondary);color:#9FB1CC;}
.footer-bottom-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:20px;padding-bottom:20px;font-family:var(--font-mono);font-size:12px;}
.footer-bottom a:hover{color:#fff;}
.whatsapp-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:90;transition:transform .15s;}
.whatsapp-float:hover{transform:scale(1.07);}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal[data-d="1"]{transition-delay:.08s;}
.js .reveal[data-d="2"]{transition-delay:.16s;}
.js .reveal[data-d="3"]{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .cat-card:hover{transform:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hero h1{font-size:76px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .catalog{grid-template-columns:220px 1fr;gap:28px;}
  .p-head,.p-row{grid-template-columns:44px minmax(0,3fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) 90px;}
  .p-head span:nth-child(4),.p-row .p-cell:nth-of-type(2){display:none;}
}
@media (max-width:900px){
  .container{padding:0 24px;}
  .section{padding:72px 0;}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px;}
  .catalog{grid-template-columns:1fr;}
  .filters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
  .search-box{grid-column:1 / -1;}
  .sec-head h2,.about-text h2{font-size:42px;}
  .page-banner h1{font-size:58px;}
  .cta-band h2{font-size:38px;}
}
@media (max-width:760px){
  .topbar-contact{display:none;}
  .header-inner{min-height:68px;}
  .nav-toggle{display:flex;}
  .main-nav{position:fixed;left:0;right:0;top:68px;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:4px solid var(--primary);transform:translateY(-120%);visibility:hidden;transition:transform .2s ease,visibility .2s;z-index:120;max-height:calc(100vh - 68px);overflow-y:auto;}
  .main-nav.open{transform:none;visibility:visible;}
  .main-nav a:not(.btn-nav-cta){padding:16px 0;border-bottom:1px solid var(--line-soft);}
  .main-nav a.active{border-bottom-color:var(--primary);}
  .btn-nav-cta{margin-top:16px;text-align:center;}
  .nav-backdrop{display:block;position:fixed;left:0;right:0;top:68px;bottom:0;background:rgba(10,31,60,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:110;}
  .nav-backdrop.show{opacity:1;pointer-events:auto;}
  .brand-text{font-size:20px;}
  .brand-mark{width:38px;height:38px;font-size:24px;}
  .brand-text small{display:none;}
  .hero-grid{padding-top:48px;padding-bottom:52px;}
  .hero h1{font-size:54px;}
  .hero-lead{font-size:17px;}
  .hero-actions .btn{flex:1 1 100%;}
  .stat{flex:1 1 50%;padding:18px 16px;border-left:0;border-top:1px solid rgba(255,255,255,.25);}
  .stat:first-child{padding-left:16px;}
  .stat strong{font-size:34px;}
  .section{padding:56px 0;}
  .sec-head h2,.about-text h2{font-size:36px;}
  .contact-form-wrap h2{font-size:32px;}
  .page-banner h1{font-size:46px;}
  .banner-inner{padding:36px 0 40px;}
  .brand-card{padding:20px;gap:16px;}
  .brand-card-logo{width:72px;height:72px;}
  .brand-grid{grid-template-columns:1fr;}
  .filters{grid-template-columns:1fr;}
  /* tabel -> kartu */
  .p-head{display:none;}
  .p-row,.p-head{grid-template-columns:1fr 1fr;row-gap:10px;}
  .p-row{padding:16px;}
  .p-no{display:none;}
  .p-name{grid-column:1 / -1;}
  .p-row .p-cell{display:block !important;font-size:14px;}
  .p-row .p-cell::before{content:attr(data-l);display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ph);}
  .p-act{grid-column:1 / -1;text-align:left;}
  .p-detail{flex-direction:column;padding:8px 16px 20px;}
  .p-detail-img{flex:none;}
  .kv-table div{flex-direction:column;gap:4px;padding:16px;}
  .kv-table dt{flex:none;}
  .form-row{grid-template-columns:1fr;}
  .contact-form-wrap{padding:24px 20px;}
  .cta-band h2{font-size:32px;}
  .cta-actions .btn{flex:1 1 100%;}
  .footer-inner{padding-top:48px;}
}