/* PRATAMA — Human Touch Layer
   Direction: established local electrical supplier, warm counter-service feel.
   This intentionally softens the previous technical / AI-dashboard aesthetic.
*/

/* Partner registration: keep every label and control in an intact field group. */
#daftar .split-card{
  align-items:start;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:clamp(34px,6vw,88px);
}
#daftar .split-card>div:first-child{position:sticky;top:32px}
#daftar .lead-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 18px;
  width:100%;
  min-width:0;
}
#daftar .form-field{min-width:0;display:flex;flex-direction:column;gap:8px}
#daftar .form-field label{display:block;color:var(--hand-ink);font-size:12px;font-weight:750;line-height:1.2}
#daftar .form-field input,
#daftar .form-field select{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--warm-line);
  border-radius:9px;
  background:#fffdf9;
  color:var(--hand-ink);
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#daftar .form-field input::placeholder{color:#9b9187}
#daftar .form-field input:focus,
#daftar .form-field select:focus{border-color:var(--pratama-blue);box-shadow:0 0 0 3px rgba(10,73,139,.13);background:#fff}
#daftar .form-submit{grid-column:1/-1;margin-top:6px;min-height:56px}
@media(max-width:760px){
  #daftar .split-card{grid-template-columns:1fr;gap:28px}
  #daftar .split-card>div:first-child{position:static}
  #daftar .lead-form{grid-template-columns:1fr;gap:16px}
  #daftar .form-submit{grid-column:auto}
}

:root{
  --paper:#f7f2e9;
  --paper-2:#fbf8f2;
  --paper-3:#efe7da;
  --hand-ink:#1d2529;
  --warm-line:#ddd4c7;
  --pratama-blue:#0a498b;
  --pratama-blue-deep:#073a6d;
  --signal-orange:#ef6536;
  --soft-blue:#eaf2f7;
}

body{
  background:var(--paper-2);
  color:var(--hand-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Typography: editorial warmth instead of a system-dashboard feel */
h1,h2,.section-head h2,.audience-card h2,.retailer-band h2,.local-grid h2,.product-info h1,.hero-panel h2{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
  font-weight:700;
}

.eyebrow,
.hero-index,
.result-count,
.breadcrumb,
.microcopy,
.hours>div,
.product-info dt,
.footer h4,
.footer-legal{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.055em;
}

.eyebrow{
  display:inline-block;
  font-size:10px;
  padding:5px 8px 4px;
  background:var(--paper-3);
  color:#5d5145;
  transform:rotate(-.6deg);
  text-transform:uppercase;
  margin-bottom:14px;
}

/* Navigation feels like a real store, not translucent app chrome */
.top-strip{
  background:#f0e6d7;
  color:#41372f;
  border-bottom:1px solid #e1d4c3;
}
.top-strip a{color:var(--pratama-blue);font-weight:700}
.site-header{
  background:rgba(251,248,242,.98);
  backdrop-filter:none;
  border-bottom:1px solid var(--warm-line);
}
.nav>a,.nav-drop>button{font-weight:650;text-transform:none;letter-spacing:0}
.drop-menu{
  border-color:var(--warm-line);
  border-radius:10px;
  box-shadow:7px 8px 0 rgba(29,37,41,.07);
  background:var(--paper-2);
  max-height:calc(100vh - 130px);
  overflow-y:auto;
}
.drop-menu a{border-radius:6px}
.drop-menu a:hover{background:#eee6da}
.icon-btn,.nav-toggle{border-color:var(--warm-line);border-radius:9px;background:var(--paper-2)}

/* Buttons: conversational, no all-caps machine labels */
.btn{
  border-radius:9px;
  min-height:49px;
  padding:0 21px;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:750;
  box-shadow:none;
}
.btn-primary{box-shadow:3px 3px 0 #15334b}
.btn-primary:hover{box-shadow:1px 1px 0 #15334b;transform:translate(2px,2px)}
.btn-ghost{background:transparent;border-color:#b8aa98}
.text-link{text-transform:none;letter-spacing:0;font-size:13px}
.text-link:after{content:"→";font-size:14px}

/* Hero: warm paper, slightly imperfect composition */
.hero{
  background:
    radial-gradient(circle at 14% 18%,rgba(239,101,54,.07),transparent 25%),
    radial-gradient(circle at 86% 82%,rgba(10,73,139,.07),transparent 28%),
    var(--paper);
  border-bottom:1px solid var(--warm-line);
  padding:88px 0 96px;
}
.hero:before{display:none}
.hero-grid{gap:68px;align-items:center}
.hero-index{
  display:inline-block;
  color:#5a514a;
  font-size:11px;
  background:#fffaf3;
  border:1px solid #d8cbbb;
  padding:7px 10px;
  transform:rotate(-1deg);
  box-shadow:2px 3px 0 rgba(29,37,41,.06);
  letter-spacing:.03em;
  text-transform:none;
}
.pill{
  display:block;
  width:max-content;
  margin:18px 0 24px 8px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--signal-orange);
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:17px;
  font-weight:700;
  transform:rotate(-2deg);
}
.hero-copy h1{
  font-size:clamp(58px,7vw,102px);
  line-height:.92;
  letter-spacing:-.055em;
  margin-bottom:28px;
  max-width:850px;
}
.hero-copy h1 em{
  color:var(--hand-ink);
  font-style:italic;
  position:relative;
  white-space:nowrap;
}
.hero-copy h1 em:after{
  content:"";
  position:absolute;
  left:-2%;right:-2%;bottom:-4px;
  height:9px;
  background:linear-gradient(175deg,transparent 36%,rgba(239,101,54,.72) 38%,rgba(239,101,54,.72) 60%,transparent 62%);
  transform:rotate(-1.5deg);
  pointer-events:none;
}
.hero-copy>p{font-size:18px;line-height:1.72;color:#574f49;max-width:650px}
.trust-row{border-color:#d9cfc2;color:#675e56}
.trust-row strong{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:var(--hand-ink)}

/* Search card resembles a note left at the shop counter */
.hero-panel{
  background:#fffdf9;
  color:var(--hand-ink);
  border:1px solid #b8aa98;
  border-radius:14px;
  padding:36px 34px 32px;
  box-shadow:9px 10px 0 var(--pratama-blue);
  transform:rotate(.35deg);
}
.hero-panel:after{display:none}
.hero-panel:before{
  content:"tidak tahu nama barangnya? kirim foto lewat WhatsApp ↗";
  position:absolute;
  right:22px;
  top:-22px;
  max-width:210px;
  padding:6px 10px 5px;
  background:#fff1b8;
  color:#5b4a25;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:13px;
  line-height:1.15;
  transform:rotate(2.3deg);
  border:0;
  z-index:2;
}
.hero-panel-top{color:#6b625a;opacity:1;font-size:10px;letter-spacing:.04em;text-transform:none}
.hero-panel h2{font-size:35px;line-height:1.08;margin:38px 0 20px}
.hero-search{background:#fff;border:1px solid #cabdab;border-radius:9px;padding:5px}
.hero-search input{background:transparent;color:var(--hand-ink)}
/* Keep the catalog finder submit button identical in size to site-wide primary CTAs. */
.hero-search button{
  width:auto;
  min-height:49px;
  padding:0 21px;
  border-radius:9px;
  background:var(--pratama-blue);
  color:#fff;
  font-size:13px;
  font-weight:750;
  line-height:1;
  letter-spacing:0;
  box-shadow:3px 3px 0 #15334b;
  cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.hero-search button:hover,
.hero-search button:focus-visible{
  background:var(--pratama-blue-deep);
  color:#fff;
  box-shadow:1px 1px 0 #15334b;
  transform:translate(2px,2px);
}
.hero-search button:focus-visible{outline:3px solid rgba(10,73,139,.28);outline-offset:3px}
.search-suggestions a{
  border:1px solid #cfc2b0;
  color:#514840;
  border-radius:999px;
  background:#fffaf3;
}
.search-suggestions a:hover{background:#f2e8db;color:var(--hand-ink)}
.hero-shelf{background:transparent;gap:9px;margin-top:30px}
.shelf-box{
  background:#f4eee4;
  color:var(--hand-ink);
  border:1px solid #ddd0bf;
  border-radius:8px;
  min-height:88px;
  padding:15px 12px;
}
.shelf-box:nth-child(1){transform:rotate(-.7deg)}
.shelf-box:nth-child(2){transform:rotate(.6deg)}
.shelf-box:nth-child(3){transform:rotate(-.35deg)}
.shelf-box span{font-family:Inter,sans-serif;color:#786c60;opacity:1;letter-spacing:.04em}
.shelf-box b{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700}

/* Sections: less perfect grid, more editorial rhythm */
.section{background:var(--paper-2);padding:94px 0}
.section.soft{background:#f0ebe2}
.section-head{align-items:flex-end}
.section-head h2{line-height:1.02;letter-spacing:-.035em}
.section-head p{color:#655c54}
.section-head>div{position:relative}

.audience-grid{background:transparent;gap:20px}
.audience-card{
  border:1px solid #d5c8b8;
  border-radius:14px;
  padding:37px;
  min-height:315px;
  box-shadow:4px 5px 0 rgba(29,37,41,.05);
}
.audience-card:before{display:none}
.audience-card.consumer{background:#f4eadc;transform:rotate(-.35deg)}
.audience-card.retailer{background:#eaf2f7;transform:rotate(.32deg)}
.audience-card:hover{transform:translateY(-2px) rotate(0)}
.audience-card h2{font-size:32px;line-height:1.16}
.audience-card p{color:#5d554e}
.round-arrow{border-radius:50%;background:#fff;border-color:#b9aa98}
.audience-card.consumer:after,
.audience-card.retailer:after{
  position:absolute;
  top:18px;right:20px;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:13px;
  color:#78624d;
  transform:rotate(3deg);
}
.audience-card.consumer:after{content:"boleh tanya dulu"}
.audience-card.retailer:after{content:"kami biasa bantu toko mulai dari 1 karton";max-width:170px;text-align:right}

.category-grid{background:transparent;gap:14px}
.category-card{
  border:1px solid #ddd2c4;
  border-radius:12px;
  min-height:245px;
  padding:25px;
  background:#fffdf8;
  box-shadow:2px 3px 0 rgba(29,37,41,.035);
}
.category-card:after{height:3px;border-radius:3px;background:var(--signal-orange)}
.category-card:nth-child(4n+1){transform:translateY(4px) rotate(-.18deg)}
.category-card:nth-child(4n+2){transform:translateY(-2px) rotate(.18deg)}
.category-card:nth-child(4n+3){transform:translateY(2px) rotate(-.1deg)}
.category-card:nth-child(4n){transform:translateY(-4px) rotate(.12deg)}
.category-card:hover{transform:translateY(-3px);box-shadow:4px 6px 0 rgba(29,37,41,.06)}
.category-icon{color:var(--pratama-blue);margin-bottom:24px}
.category-card h3{font-family:Georgia,"Times New Roman",serif;font-size:20px}
.category-card p{color:#675e56}
.category-card span{text-transform:none;letter-spacing:0}

/* Partner section feels like a trusted wholesale counter, not a SaaS block */
.brand-feature{background:#20282c}
.brand-feature:before{display:none}
.brand-feature-grid{background:transparent;gap:18px}
.brand-block{
  border:1px solid #475157;
  border-radius:12px;
  background:#293237;
  min-height:280px;
  padding:36px;
}
.brand-block:nth-child(1){transform:rotate(-.25deg)}
.brand-block:nth-child(2){transform:rotate(.25deg)}
.brand-logo-text{font-family:Georgia,"Times New Roman",serif;font-size:44px;letter-spacing:-.025em}

/* Product cards: catalog-book feel */
.product-grid{background:transparent;gap:14px}
.product-card{
  border:1px solid #ddd2c4;
  border-radius:11px;
  overflow:hidden;
  background:#fffdf9;
  box-shadow:2px 3px 0 rgba(29,37,41,.035);
}
.product-card:hover{background:#fffaf3;box-shadow:4px 5px 0 rgba(29,37,41,.06);transform:translateY(-2px)}
.product-visual{height:218px;background:#f2eee7}
.product-visual:before{display:none}
.visual-brand{
  background:#fff5c8;
  color:#554822;
  padding:5px 7px;
  border-radius:3px;
  font-family:Inter,sans-serif;
  letter-spacing:.05em;
  transform:rotate(-1deg);
}
.product-card h3{font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700}
.product-meta{color:#746a61}
.product-card .quick-wa{text-transform:none;letter-spacing:0;font-size:12px;color:var(--pratama-blue)}
.quick-wa img{display:block;width:24px;height:24px;object-fit:contain;position:relative;top:-2px}
.product-card .quick-wa:after{content:"↗"}

/* Product detail */
.product-detail-visual{background:#f2eee7;border-color:#d9cec0;border-radius:10px}
.product-detail-visual:after{content:"cek stok aktual ke tim kami";font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:13px;letter-spacing:0;color:#76695d;right:18px;bottom:15px;transform:rotate(-1.5deg)}
.product-info h1{letter-spacing:-.035em}
.product-info dt{text-transform:none;letter-spacing:.03em;color:#73685e}

/* Retailer / B2B */
.retailer-band{
  background:#0d4f8b;
  border-top:0;
  position:relative;
}
.retailer-band:after{
  content:"hubungan dagang yang baik dibangun dari order ke order";
  position:absolute;
  right:5%;top:32px;
  width:230px;
  color:#fff2bd;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  font-size:15px;
  line-height:1.2;
  transform:rotate(2deg);
  opacity:.88;
}
.benefit-grid{background:transparent;gap:10px}
.benefit-grid>div{border:1px solid rgba(255,255,255,.24);border-radius:9px;background:rgba(2,35,67,.22)}
.benefit-grid>div b{font-size:23px;line-height:1.2}
.benefit-grid>div span{font-size:18px;line-height:1.55}
.why-grid{background:transparent;gap:12px}
.why-grid>div{border:1px solid #ddd2c4;border-radius:10px;background:#fffdf9}
.why-grid strong{font-family:Georgia,"Times New Roman",serif}

/* Local proof and FAQ */
.local-section{background:#f0ebe2}
.review-panel{
  border:1px solid #d8ccbd;
  border-left:1px solid #d8ccbd;
  border-radius:12px;
  background:#fffdf9;
  padding:40px;
  box-shadow:4px 5px 0 rgba(29,37,41,.05);
  position:relative;
}
.rating span{color:var(--signal-orange)}
.faq summary{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:700}

/* Internal pages */
.page-hero,.brand-hero,.b2b-hero,.partner-hero,.local-hero{background:#0b467f}
.page-hero:after,.brand-hero:after,.b2b-hero:after,.partner-hero:after,.local-hero:after{display:none}
.page-hero.compact{background:var(--paper)}
.catalog-toolbar{background:rgba(251,248,242,.97);border-color:#d8ccbd;border-radius:10px;box-shadow:4px 5px 0 rgba(29,37,41,.04)}
.catalog-search,.catalog-toolbar select,.partner-form input,.partner-form textarea,.partner-form select{border-color:#cfc2b2;border-radius:8px;background:#fffdf9}
.brand-pill-row a,.area-chips span,.variant-chip,.checkbox-grid label{border-radius:999px}
.partner-form,.contact-card,.visit-card{border-radius:12px;border-color:#d8ccbd;background:#fffdf9;box-shadow:3px 4px 0 rgba(29,37,41,.035)}

/* Footer: less black-tech, more established storefront */
.footer{background:#1d272d;border-top:0}
.footer h4{font-family:Inter,sans-serif;text-transform:none;letter-spacing:.03em;font-size:11px;color:#c6beb2}
.footer-legal{font-family:Inter,sans-serif;letter-spacing:0;font-size:10px!important}


/* Catalog product images: slightly closer framing without cropping the card shell. */
.product-visual{overflow:hidden!important;}
.product-visual .catalog-product-image{
  transform:scale(1.06)!important;
  transform-origin:center center!important;
  transition:transform .25s ease!important;
}
.product-visual:hover .catalog-product-image,
.product-visual:focus-visible .catalog-product-image{
  transform:scale(1.08)!important;
}

.benefit-grid>div>.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin:0 0 20px;
  padding:0;
  background:#fff0d8;
  color:#0b467f;
  border:1px solid rgba(11,70,127,.22);
  border-radius:8px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}

/* Small tactile details */
::selection{background:#ffe19c;color:#25201b}

/* Brand wall: one continuous logo line, using the site's own blue/paper palette. */
.brand-wall{
  position:relative;
  overflow:hidden;
  padding-top:58px;
  padding-bottom:58px;
  background:var(--paper-3);
  border:0;
}
.brand-wall .container{position:relative;z-index:1;max-width:none;padding:0}
.brand-logo-row{overflow:hidden;width:100%;background:transparent}
.brand-logo-track{display:flex;align-items:center;gap:24px;width:max-content;padding:18px 0;animation:brand-logo-marquee 42s linear infinite;will-change:transform}
.brand-logo-tile{display:flex;align-items:center;justify-content:center;width:auto;min-width:170px;height:90px;padding:6px 8px;background:transparent;transition:opacity .18s ease,transform .18s ease}
.brand-logo-tile:hover{background:transparent;opacity:.78;transform:translateY(-2px)}
.brand-logo-tile img{display:block;width:auto;max-width:220px;height:60px;object-fit:contain}
@keyframes brand-logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.brand-logo-track{animation:none}}
@media(max-width:560px){.brand-wall{padding-top:42px;padding-bottom:42px}.brand-logo-track{gap:24px}.brand-logo-tile{min-width:125px;height:70px;padding:6px}.brand-logo-tile img{max-width:145px;height:44px}}

/* Final floating-logo override: no panel, divider, outline, or shadow anywhere in this strip. */
.brand-wall,.brand-wall *,.brand-logo-row,.brand-logo-track,.brand-logo-tile,.brand-logo-tile img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.brand-wall,.brand-logo-row,.brand-logo-track,.brand-logo-tile{background:transparent!important}

/* Mitra hero: clear B2B hierarchy instead of dark text on a blue field. */
.b2b-hero{
  background:linear-gradient(118deg,#082f58 0%,#0b467f 62%,#0d568f 100%);
  padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,124px);
  overflow:hidden;
  position:relative;
}
.b2b-hero:before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  right:-130px;top:-180px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025);
  pointer-events:none;
}
.b2b-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(290px,.72fr);
  gap:clamp(42px,8vw,118px);
  align-items:center;
  position:relative;
  z-index:1;
}
.b2b-grid>div:first-child{max-width:760px}
.b2b-hero .eyebrow.signal{
  display:inline-flex;
  align-items:center;
  padding:9px 13px;
  margin:0 0 25px;
  background:#fff6e9;
  color:#c6532d;
  border-radius:3px;
  font-size:10px;
  letter-spacing:.16em;
}
.b2b-hero h1{
  max-width:720px;
  margin:0 0 24px;
  color:#fffdf8;
  font-size:clamp(48px,6.5vw,88px);
  line-height:.94;
  letter-spacing:-.06em;
}
.b2b-hero .b2b-grid>div:first-child>p{
  max-width:650px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.65;
}
.b2b-hero .hero-actions{margin-top:34px;gap:14px}
.b2b-hero .btn{min-height:50px;padding:0 20px}
.b2b-hero .btn-signal{background:#ef6536;color:#fff;border-color:#ef6536}
.b2b-hero .btn-signal:hover{background:#d95328;border-color:#d95328}
.b2b-hero .btn-ghost-light{color:#fff;border:1px solid rgba(255,255,255,.42);background:transparent}
.b2b-hero .btn-ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.mitra-panel{
  position:relative;
  padding:34px 34px 38px;
  background:#fff6e9;
  color:#172d3f;
  border:0;
  border-radius:16px;
  box-shadow:12px 12px 0 rgba(3,24,45,.32);
  transform:rotate(1.2deg);
}
.mitra-panel:before{
  content:"";
  display:block;
  width:46px;height:5px;
  margin-bottom:40px;
  background:#ef6536;
  border-radius:99px;
}
.mitra-panel span,.mitra-panel strong{display:block}
.mitra-panel span{
  margin-bottom:12px;
  color:#c6532d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
}
.mitra-panel strong{
  max-width:260px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  letter-spacing:-.045em;
}
.mitra-panel p{
  max-width:270px;
  margin:27px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(23,45,63,.2);
  color:#53616a;
  font-size:14px;
  line-height:1.6;
}
@media (max-width:760px){
  .b2b-hero{padding:52px 0 72px}
  .b2b-grid{grid-template-columns:1fr;gap:48px}
  .b2b-hero h1{font-size:clamp(45px,14vw,68px)}
  .b2b-hero .hero-actions{align-items:stretch;flex-direction:column;max-width:300px}
  .b2b-hero .hero-actions .btn{width:100%}
  .mitra-panel{max-width:360px;padding:28px 26px 32px;box-shadow:8px 8px 0 rgba(3,24,45,.32)}
}

@media (max-width:980px){
  .hero-grid{gap:54px}
  .hero-panel{transform:none;box-shadow:7px 8px 0 var(--pratama-blue)}
  .retailer-band:after{display:none}
}

@media (max-width:720px){
  .hero{padding:50px 0 66px}
  .hero-copy h1{font-size:52px;line-height:.94}
  .hero-copy>p{font-size:16px;line-height:1.65}
  .hero-index{font-size:10px;line-height:1.35}
  .pill{font-size:15px;margin-left:4px}
  .hero-panel{padding:28px 20px 22px;box-shadow:5px 6px 0 var(--pratama-blue)}
  .hero-panel:before{right:12px;top:-17px;max-width:185px;font-size:12px}
  .hero-panel h2{font-size:29px;margin-top:34px}
  .hero-shelf{grid-template-columns:1fr;gap:7px}
  .hero-shelf .shelf-box:last-child{grid-column:auto}
  .shelf-box{min-height:72px;transform:none!important}
  .audience-card.consumer,.audience-card.retailer{transform:none}
  .audience-card:after{display:none}
  .category-grid{gap:10px}
  .category-card{transform:none!important;min-height:210px}
  .product-grid{gap:10px}
  .brand-block{transform:none!important}
  .mobile-action-dock{border-radius:12px;background:rgba(29,39,45,.96)}
  .mobile-action-dock a:last-child{border-radius:8px}
}

/* Temporary catalog mode: no product photography, one readable list per page. */
.product-grid{
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.product-card{overflow:visible}
.product-card-body{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(150px,.7fr) auto;
  grid-template-areas:"title meta actions";
  align-items:center;
  gap:12px 24px;
  padding:18px 20px!important;
}
.product-card-body>.eyebrow{display:none}
.product-card-body h3{grid-area:title;margin:0!important}
.product-card-body .product-meta{grid-area:meta;margin:0!important}
.product-card-body .product-card-actions{grid-area:actions;margin:0!important;white-space:nowrap}
.product-detail-grid{grid-template-columns:1fr!important}
.product-detail .product-info{max-width:760px}
@media (max-width:720px){
  .product-card-body{
    grid-template-columns:1fr;
    grid-template-areas:"title" "meta" "actions";
    gap:9px;
    padding:16px!important;
  }
  .product-card-body .product-card-actions{white-space:normal}
}

/* Local supplier guidance on the homepage: useful paths for the three audiences. */
.seo-supplier{border-top:1px solid var(--warm-line);border-bottom:1px solid var(--warm-line)}
.seo-supplier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-supplier article{padding:24px;background:var(--paper-2);border:1px solid var(--warm-line);border-radius:11px}
.seo-supplier h3{margin:0 0 10px;color:var(--pratama-blue);font-size:20px}
.seo-supplier p{margin:0 0 16px;color:#514b43;line-height:1.65}
.seo-supplier a{color:var(--pratama-blue);font-weight:750;text-decoration-thickness:1px;text-underline-offset:3px}
.seo-supplier a:hover{color:var(--pratama-blue-deep)}
@media (max-width:760px){.seo-supplier-grid{grid-template-columns:1fr}.seo-supplier article{padding:20px}}

/* Brand-guide application — supplied Pratama Electrical Supply reference. */
:root{
  --paper:#f7f7f4;
  --paper-2:#fff;
  --paper-3:#eef1f3;
  --hand-ink:#151719;
  --warm-line:#d9dde0;
  --pratama-blue:#0a498b;
  --pratama-blue-deep:#073b70;
  --signal-orange:#f05a28;
  --soft-blue:#e8f0f7;
}
body{
  background:var(--paper);
  color:var(--hand-ink);
  font-family:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
}
h1,h2,h3,.section-head h2,.audience-card h2,.retailer-band h2,.local-grid h2,.product-info h1,.hero-panel h2,.category-card h3,.product-card h3,.faq summary,.why-grid strong,.brand-logo-text,.mitra-panel strong{
  font-family:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.035em;
}
.eyebrow,.hero-index,.result-count,.breadcrumb,.microcopy,.hours>div,.product-info dt,.footer h4,.footer-legal,.hero-panel-top,.visual-brand{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.055em;
}
.site-header{background:rgba(255,255,255,.98);border-bottom:1px solid var(--warm-line)}
.top-strip{background:var(--pratama-blue);color:#fff;border:0}
.top-strip a{color:#fff;font-weight:700}
.wordmark-final img{display:block;width:260px;height:auto;max-height:74px;object-fit:contain}
.nav>a,.nav-drop>button{font-size:13px;font-weight:700;color:var(--hand-ink)}
.nav-drop>button:hover,.nav>a:hover{color:var(--pratama-blue)}
.drop-menu{border:1px solid var(--warm-line);border-radius:6px;box-shadow:0 12px 28px rgba(21,23,25,.12);background:#fff}
.drop-menu a:hover{background:var(--soft-blue);color:var(--pratama-blue)}
.icon-btn,.nav-toggle{border-color:#c8d0d6;border-radius:6px;background:#fff}
.btn,.hero-search button{border-radius:6px;font-family:Manrope,Inter,sans-serif;font-weight:800;box-shadow:none}
.btn-primary,.hero-search button{background:var(--pratama-blue);border-color:var(--pratama-blue);box-shadow:none}
.btn-primary:hover,.hero-search button:hover{background:var(--pratama-blue-deep);border-color:var(--pratama-blue-deep);box-shadow:none;transform:translateY(-1px)}
.btn-ghost{border-color:var(--pratama-blue);color:var(--pratama-blue);background:#fff}
.btn-ghost:hover{background:var(--soft-blue);color:var(--pratama-blue)}
.hero{padding:78px 0 88px;background:linear-gradient(135deg,#f7f7f4 0%,#fff 62%,#e8f0f7 100%);border-bottom:1px solid var(--warm-line)}
.hero-grid{gap:56px}
.hero-index{padding:0;background:transparent;border:0;box-shadow:none;color:#5a626b;transform:none;font-size:10px}
.pill{margin:16px 0 20px;color:var(--signal-orange);font-family:Manrope,Inter,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transform:none}
.hero-copy h1{font-size:clamp(50px,6.2vw,90px);line-height:.98;letter-spacing:-.055em;margin-bottom:22px}
.hero-copy h1 em{color:var(--pratama-blue);font-style:normal}
.hero-copy h1 em:after{display:none}
.hero-copy>p{color:#4b535a;line-height:1.7}
.trust-row{border-color:#cfd7dc;color:#505961}.trust-row strong{font-family:Manrope,Inter,sans-serif;color:var(--pratama-blue)}
.hero-panel{padding:34px;background:var(--pratama-blue);color:#fff;border:0;border-radius:8px;box-shadow:12px 12px 0 var(--signal-orange);transform:none}
.hero-panel:before{display:none}.hero-panel:after{display:block;opacity:.18}
.hero-panel-top{color:rgba(255,255,255,.74);font-size:10px}.hero-panel h2{font-size:34px;line-height:1.08;margin:28px 0 20px;color:#fff}
.hero-search{border:0;border-radius:6px;background:#fff;padding:5px}.hero-search input{color:var(--hand-ink)}
.hero-search button{background:var(--signal-orange);border-color:var(--signal-orange);box-shadow:none}.hero-search button:hover,.hero-search button:focus-visible{background:#d9491c;border-color:#d9491c;box-shadow:none;transform:none}
.hero-shelf{gap:10px}.shelf-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:6px;color:#fff;transform:none!important}.shelf-box span{color:rgba(255,255,255,.68);font-family:"IBM Plex Mono",monospace}.shelf-box b{font-family:Manrope,Inter,sans-serif;color:#fff}
.section{background:var(--paper);padding:84px 0}.section.soft,.local-section{background:#eef1f3}.section-head h2{color:var(--hand-ink)}.section-head p,.category-card p,.audience-card p,.product-meta{color:#566069}
.audience-grid,.category-grid,.product-grid,.why-grid,.benefit-grid{gap:16px}.audience-card,.category-card,.product-card,.why-grid>div,.seo-supplier article{border:1px solid var(--warm-line);border-radius:8px;box-shadow:none;transform:none!important;background:#fff}.audience-card.consumer{background:#fff}.audience-card.retailer{background:var(--soft-blue)}.audience-card:hover,.category-card:hover,.product-card:hover{box-shadow:0 10px 24px rgba(10,73,139,.08);transform:translateY(-2px)!important}.category-card:after{background:var(--signal-orange);height:4px}.category-icon{color:var(--pratama-blue)}
.retailer-band{background:var(--pratama-blue)}.retailer-band:after{display:none}.benefit-grid>div{border-color:rgba(255,255,255,.24);border-radius:6px;background:rgba(0,0,0,.12)}.benefit-grid>div>.eyebrow{background:var(--signal-orange);color:#fff;border:0;border-radius:5px}
.brand-feature{background:var(--hand-ink)}.brand-block{background:#202326;border:1px solid #3e444a;border-radius:8px;transform:none!important}.brand-logo-text{font-family:Manrope,Inter,sans-serif}
.page-hero,.brand-hero,.b2b-hero,.partner-hero,.local-hero{background:var(--pratama-blue)}.b2b-hero{background:linear-gradient(120deg,#073b70 0%,#0a498b 65%,#1461a8 100%)}.mitra-panel{background:#fff;color:var(--hand-ink);border-radius:8px;box-shadow:12px 12px 0 var(--signal-orange);transform:none}.mitra-panel strong{font-family:Manrope,Inter,sans-serif}.mitra-panel:before{background:var(--signal-orange)}
.footer{background:var(--hand-ink)}.footer-logo{display:block;width:260px;max-width:100%;height:auto;margin:0 0 16px;object-fit:contain}.footer-brand{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:.09em;color:#fff}.footer-descriptor{font-family:"IBM Plex Mono",monospace;letter-spacing:.16em}.footer h4{color:#cbd4db}
::selection{background:var(--signal-orange);color:#fff}
@media(max-width:720px){.wordmark-final img{width:210px;max-height:60px}.hero{padding:52px 0 64px}.hero-panel{padding:26px 20px;box-shadow:7px 7px 0 var(--signal-orange)}.hero-copy h1{font-size:clamp(42px,13vw,62px)}.section{padding:62px 0}}

/* Contrast repairs: keep Pratama orange accents readable on both paper and dark surfaces. */
.pill,.eyebrow.signal,.b2b-hero .eyebrow.signal{color:#a83d1d}
.final-cta .eyebrow{background:transparent;color:var(--signal-orange);border:0;padding:0;transform:none}
.hero-search button,.benefit-grid>div>.eyebrow{background:#c8421c;border-color:#c8421c;color:#fff}
.hero-search button:hover,.hero-search button:focus-visible{background:#aa3517;border-color:#aa3517;color:#fff}
.hero-panel-top,.shelf-box span,.b2b-hero .b2b-grid>div:first-child>p{color:#fff}
.why-grid p,.local-grid p,.faq p,.faq details p,details p{color:#5b636a}
.nav-toggle{color:var(--hand-ink)}

/* Homepage contrast pass: retain Pratama blue/orange; darken supporting copy so it stays distinct from white and pale-blue cards. ENERGY 2 / RHYTHM 2 / MOTION 1. */
.homepage .hero-copy>p,
.homepage .section-head p,
.homepage .audience-card p,
.homepage .category-card p,
.homepage .seo-supplier p,
.homepage .why-grid p,
.homepage .local-grid p,
.homepage .review-panel p,
.homepage .faq p,
.homepage .faq details p,
.homepage details p,
.homepage .product-meta,
.homepage .trust-row,
.homepage .hero-index{color:#3f484f}
.homepage .rating span{color:#a63717}
.homepage .hero-search button,
.homepage .benefit-grid>div>.eyebrow{background:#b13c19;border-color:#b13c19;color:#fff}
.homepage .hero-search button:hover,
.homepage .hero-search button:focus-visible{background:#8e3015;border-color:#8e3015;color:#fff}
.homepage .hero-search button:focus-visible{outline:3px solid #151719;outline-offset:3px}
.homepage ::selection{background:#a63717;color:#fff}

/* Desktop-only WhatsApp action: preserve the supplied mark, keep a generous target, and leave the existing mobile dock in place. */
.wa-float{
  position:fixed;
  right:12px;
  bottom:16px;
  z-index:130;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:3px;
  border:2px solid #25d366;
  border-radius:50%;
  background:#25d366;
  box-shadow:0 6px 18px rgba(21,23,25,.28);
  font-size:0;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-float:before{content:none!important;display:none!important}
.wa-float img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.wa-float:hover{background:#25d366;transform:translateY(-3px);box-shadow:0 9px 22px rgba(21,23,25,.32)}
.wa-float:focus-visible{outline:3px solid #151719;outline-offset:4px}
@media(max-width:1023px){.wa-float{display:none!important}}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}