/* Gaya situs publik HTX — dipisah dari HTML agar bisa di-cache browser.
   Halaman dirender di server (Cloudflare Worker), berkas ini hanya tampilan. */

:root{
    --steel-900:#1b1e21;
    --steel-800:#25292c;
    --steel-700:#3a3f43;
    --paper:#ece8e0;
    --paper-dim:#dcd7cc;
    --amber:#e2a03a;
    --amber-dim:#c98a2c;
    --rust:#8a4a2e;
    --line:#4a4f53;
    --line-light:#c7c1b3;
    --ok-green:#5a7a52;

    --f-display:'Oswald', sans-serif;
    --f-body:'IBM Plex Sans', sans-serif;
    --f-mono:'IBM Plex Mono', monospace;

    /* Skala responsif dipakai ulang di seluruh halaman */
    --pad:clamp(16px, 4vw, 28px);
    --sec-pad:clamp(52px, 7.5vw, 88px);
    --gap-lg:clamp(28px, 5vw, 56px);
    --header-h:68px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  body{
    background:var(--paper);
    color:var(--steel-900);
    font-family:var(--f-body);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body.nav-open{overflow:hidden;}
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  ::selection{background:var(--amber); color:var(--steel-900);}
  :focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  h1,h2,h3,h4,p,li,span,div{overflow-wrap:break-word;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 var(--pad); width:100%;}
  section[id]{scroll-margin-top:calc(var(--header-h) + 8px);}
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--amber); color:var(--steel-900); padding:12px 18px; font-weight:600;
  }
  .skip-link:focus{left:0;}

  h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; letter-spacing:0.2px; line-height:1.08; text-transform:uppercase;}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:var(--steel-900);
    border-bottom:3px solid var(--amber);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px var(--pad); max-width:1180px; margin:0 auto;
    min-height:var(--header-h);
  }
  .logo{display:flex; align-items:center; gap:10px; color:var(--paper); min-width:0;}
  .logo-mark{width:clamp(26px,6vw,30px); height:auto; flex:none;}
  .logo-text{font-family:var(--f-display); font-size:clamp(16px,4.4vw,19px); letter-spacing:0.5px; text-transform:uppercase; font-weight:700; white-space:nowrap;}
  .logo-text span{color:var(--amber);}
  nav.menu{display:flex; gap:clamp(16px,2.6vw,30px);}
  nav.menu a{color:var(--paper-dim); font-size:clamp(13px,1.3vw,14.5px); font-weight:500; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s, color .15s;}
  nav.menu a:hover, nav.menu a.current{color:var(--paper); border-color:var(--amber);}
  .nav-cta{display:flex; align-items:center; gap:12px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 20px; font-size:14px; font-weight:600; min-height:44px;
    border:1.5px solid transparent; white-space:nowrap; text-align:center;
  }
  .btn-amber{background:var(--amber); color:var(--steel-900);}
  .btn-amber:hover{background:var(--amber-dim);}
  .btn-outline{border-color:var(--paper-dim); color:var(--paper);}
  .btn-outline:hover{border-color:var(--amber); color:var(--amber);}
  .menu-toggle{
    display:none; background:none; border:1.5px solid var(--line); color:var(--paper);
    width:44px; height:44px; flex:none; align-items:center; justify-content:center; font-size:22px; line-height:1;
  }
  .menu-toggle:hover{border-color:var(--amber); color:var(--amber);}

  /* Panel menu mobile — mengalir di bawah header, ikut sticky */
  .mobile-panel{
    display:none;
    border-top:1px solid var(--line);
    background:var(--steel-900);
    max-height:calc(100dvh - var(--header-h) - 3px);
    overflow-y:auto;
    padding:8px var(--pad) calc(20px + env(safe-area-inset-bottom));
  }
  .mobile-panel.open{display:block;}
  .mobile-panel a.m-link{
    display:block; color:var(--paper-dim); font-family:var(--f-display); text-transform:uppercase;
    font-size:18px; letter-spacing:0.4px; padding:14px 2px; border-bottom:1px solid var(--line);
  }
  .mobile-panel a.m-link:active{color:var(--amber);}
  .mobile-cta{display:grid; gap:10px; margin-top:18px;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--steel-900);
    color:var(--paper);
    padding:clamp(40px,6vw,70px) 0 0;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:var(--gap-lg);
    max-width:1180px; margin:0 auto; padding:0 var(--pad);
    align-items:center;
  }
  .hero-eyebrow{font-family:var(--f-mono); font-size:clamp(11.5px,2.8vw,13px); color:var(--amber); margin-bottom:16px; letter-spacing:0.3px;}
  .hero h1{font-size:clamp(30px,7.2vw,64px); color:var(--paper);}
  .hero h1 em{font-style:normal; color:var(--amber);}
  .hero p.lede{font-family:var(--f-body); font-size:clamp(15px,2.2vw,17px); color:var(--paper-dim); max-width:46ch; margin:20px 0 30px; line-height:1.6;}
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
  .hero-actions .btn{flex:1 1 auto; min-width:180px;}

  .hero-art{position:relative; min-width:0;}
  .hero-art svg{width:100%; height:auto;}
  .hero-art .unit-shot{
    width:100%; height:auto; display:block;
    filter:drop-shadow(0 26px 34px rgba(0,0,0,.55));
  }
  .hero-art .unit-tag{
    font-family:var(--f-mono); font-size:12px; color:var(--amber);
    border-top:1px solid var(--line); margin-top:10px; padding-top:8px;
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .hero-art .unit-tag span:last-child{color:var(--paper-dim);}

  .stat-strip{border-top:1px solid var(--line); margin-top:clamp(36px,5vw,56px);}
  .stat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);}
  .stat{background:var(--steel-900); padding:clamp(18px,3vw,26px) 14px;}
  .stat .num{font-family:var(--f-display); font-size:clamp(24px,5vw,34px); color:var(--amber); font-weight:600;}
  .stat .lbl{font-size:clamp(12px,2.6vw,13px); color:var(--paper-dim); margin-top:4px;}

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:var(--sec-pad) 0;}
  .section-dark{background:var(--steel-900); color:var(--paper);}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px,4vw,44px); flex-wrap:wrap;}
  .section-head h2{font-size:clamp(24px,5.2vw,42px);}
  .section-dark .section-head h2{color:var(--paper);}
  .section-num{font-family:var(--f-mono); font-size:clamp(11.5px,2.6vw,13px); color:var(--rust); margin-bottom:10px;}
  .section-dark .section-num{color:var(--amber);}
  .section-desc{max-width:52ch; color:var(--steel-700); font-size:clamp(14.5px,2vw,15.5px);}
  .section-dark .section-desc{color:var(--paper-dim);}

  /* ---------- TENTANG ---------- */
  .about-grid{display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:var(--gap-lg); align-items:start;}
  .about-grid p{color:var(--steel-700); font-size:clamp(15px,2vw,16px); margin-bottom:16px; max-width:56ch;}
  .about-figures{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
  .about-fig{background:var(--paper); padding:clamp(18px,3vw,24px);}
  .about-fig .num{font-family:var(--f-display); font-size:clamp(22px,4.4vw,28px); color:var(--rust);}
  .about-fig .lbl{font-size:13px; color:var(--steel-700); margin-top:4px;}
  .legal-list{margin-top:24px; font-family:var(--f-mono); font-size:12.5px; color:var(--steel-700); display:flex; gap:10px; flex-wrap:wrap;}
  .legal-list span{border:1px solid var(--line-light); padding:6px 10px;}

  /* ---------- KATALOG ---------- */
  .filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(24px,3.5vw,36px);}
  .filter-btn{
    padding:10px 18px; font-size:13.5px; font-weight:500; min-height:44px; flex:0 0 auto;
    border:1.5px solid var(--line-light); background:transparent; color:var(--steel-800);
  }
  .filter-btn.active, .filter-btn:hover{background:var(--steel-900); color:var(--paper); border-color:var(--steel-900);}

  .catalog-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line-light); border-left:1px solid var(--line-light);
  }
  .product-card{
    background:var(--paper); padding:clamp(18px,3vw,26px); display:flex; flex-direction:column;
    border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
    transition:background .15s;
  }
  .product-card:hover{background:#f3f0e8;}
  .catalog-empty{
    grid-column:1/-1; background:var(--paper); padding:40px 24px; text-align:center; color:var(--steel-700);
    border-right:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  }
  .product-media{
    /* Pelat foto terang supaya roda & track hitam unit tetap terbaca */
    background:
      radial-gradient(120% 90% at 50% 18%, #ffffff 0%, var(--paper) 58%, var(--paper-dim) 100%);
    aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; position:relative; overflow:hidden;
    border:1px solid var(--line-light);
  }
  .product-media img{
    width:100%; height:100%; object-fit:contain;
    padding:12px 14px 16px; transition:transform .25s ease;
  }
  .product-card:hover .product-media img{transform:scale(1.045);}
  @media (prefers-reduced-motion:reduce){ .product-media img{transition:none;} }
  .badge{
    position:absolute; top:10px; left:10px;
    font-family:var(--f-mono); font-size:11px; padding:4px 9px;
    background:var(--amber); color:var(--steel-900); font-weight:600;
  }
  .product-brand{font-family:var(--f-mono); font-size:12px; color:var(--rust); margin-bottom:4px;}
  .product-name{font-family:var(--f-display); font-size:clamp(18px,2.4vw,20px); text-transform:none; margin-bottom:2px;}
  .product-sub{font-size:13px; color:var(--steel-700); margin-bottom:12px; line-height:1.4;}
  .spec-list{font-family:var(--f-mono); font-size:12.5px; color:var(--steel-700); display:flex; flex-direction:column; gap:4px; margin-bottom:18px; flex:1;}
  .spec-list div{display:flex; justify-content:space-between; gap:10px; border-bottom:1px dotted var(--line-light); padding-bottom:4px;}
  .product-foot{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .wa-link{font-size:13.5px; font-weight:600; color:var(--steel-900); display:inline-flex; align-items:center; gap:6px; min-height:44px;}
  .wa-link:hover{color:var(--rust);}

  /* ---------- LAYANAN ---------- */
  .service-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);}
  .service-card{background:var(--steel-900); padding:clamp(24px,3.4vw,32px) clamp(18px,3vw,26px); color:var(--paper);}
  .service-card .idx{font-family:var(--f-mono); font-size:12px; color:var(--amber);}
  .service-card h3{font-size:clamp(17px,2.2vw,19px); margin:14px 0 10px; text-transform:none; color:var(--paper);}
  .service-card p{font-size:14px; color:var(--paper-dim);}

  /* ---------- PROYEK ---------- */
  .project-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
  .project-feature{background:var(--paper); padding:clamp(22px,3.6vw,34px);}
  .project-feature .tag{font-family:var(--f-mono); font-size:12px; color:var(--rust); margin-bottom:12px;}
  .project-feature h3{font-size:clamp(19px,3vw,24px); text-transform:none; margin-bottom:14px;}
  .project-feature p{color:var(--steel-700); font-size:clamp(14.5px,2vw,15px); max-width:52ch;}
  .project-side{display:flex; flex-direction:column;}
  .project-mini{background:var(--paper); padding:clamp(20px,3vw,26px) clamp(22px,3.6vw,34px); flex:1; border-top:1px solid var(--line-light);}
  .project-mini:first-child{border-top:none;}
  .project-mini h4{font-size:16px; text-transform:none; margin-bottom:6px;}
  .project-mini p{font-size:13.5px; color:var(--steel-700);}
  .quote-block{margin-top:24px; padding-top:22px; border-top:1px solid var(--line-light);}
  .quote-block p{font-size:15px; font-style:italic; color:var(--steel-800); max-width:50ch;}
  .quote-block .who{font-family:var(--f-mono); font-size:12.5px; color:var(--rust); margin-top:10px; font-style:normal;}

  /* ---------- KONTAK ---------- */
  .contact-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-lg);}
  .contact-info h3{font-size:clamp(19px,3vw,22px); text-transform:none; margin-bottom:16px; color:var(--paper);}
  .contact-info p{color:var(--paper-dim); font-size:15px; margin-bottom:24px; max-width:44ch;}
  .contact-row{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
  .contact-row:last-of-type{border-bottom:1px solid var(--line);}
  .contact-row .k{font-family:var(--f-mono); font-size:12px; color:var(--amber); width:110px; flex:none;}
  .contact-row .v{font-size:14.5px; color:var(--paper-dim); min-width:0;}
  .contact-row a.v:hover{color:var(--amber);}

  form.quote{display:flex; flex-direction:column; gap:14px;}
  form.quote input, form.quote select, form.quote textarea{
    background:var(--steel-800); border:1px solid var(--line); color:var(--paper);
    padding:13px 14px; font-family:var(--f-body); font-size:16px; width:100%;
    border-radius:0; -webkit-appearance:none; appearance:none;
  }
  form.quote select{
    background-image:linear-gradient(45deg,transparent 50%,var(--paper-dim) 50%),linear-gradient(135deg,var(--paper-dim) 50%,transparent 50%);
    background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
    background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  }
  form.quote input::placeholder, form.quote textarea::placeholder{color:#8a8d90;}
  form.quote label{font-family:var(--f-mono); font-size:11.5px; color:var(--paper-dim); margin-bottom:-8px;}
  form.quote textarea{resize:vertical; min-height:96px;}
  form.quote .btn{align-self:flex-start; margin-top:6px;}
  .form-status{font-family:var(--f-mono); font-size:12.5px; color:var(--amber); min-height:1.2em;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--steel-900); border-top:1px solid var(--line);
    padding:32px 0 calc(32px + env(safe-area-inset-bottom)); color:var(--paper-dim);
  }
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px;}
  .footer-row a{color:var(--paper-dim);}
  .footer-row a:hover{color:var(--amber);}

  /* ---------- WA FLOAT ---------- */
  .wa-float{
    position:fixed;
    bottom:calc(20px + env(safe-area-inset-bottom));
    right:calc(20px + env(safe-area-inset-right));
    z-index:60;
    background:var(--ok-green); color:#fff;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
    border:none;
  }
  .wa-float svg{width:26px; height:26px;}

  /* ---------- RESPONSIVE ---------- */
  /* Laptop kecil / tablet landscape */
  @media (max-width:1024px){
    .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .about-grid{gap:32px;}
  }

  /* Tablet portrait ke bawah — nav berubah jadi menu mobile */
  @media (max-width:900px){
    nav.menu, .nav-cta{display:none;}
    .menu-toggle{display:inline-flex;}
    .hero-grid{grid-template-columns:minmax(0,1fr);}
    .hero-art{order:-1; max-width:320px; margin:0 auto;}
    .about-grid, .contact-grid, .project-grid{grid-template-columns:minmax(0,1fr);}
    .contact-info p{max-width:none;}
  }

  /* Ponsel besar */
  @media (max-width:700px){
    .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .section-head{align-items:flex-start;}
    .hero-actions .btn{flex:1 1 100%; min-width:0;}
    /* Filter kategori jadi strip yang bisa digeser, bukan tumpukan tombol */
    .filters{
      flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
      margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); padding-bottom:8px;
      scrollbar-width:none;
    }
    .filters::-webkit-scrollbar{display:none;}
    .filter-btn{scroll-snap-align:start;}
    form.quote .btn{align-self:stretch;}
  }

  /* Ponsel kecil */
  @media (max-width:560px){
    .catalog-grid{grid-template-columns:minmax(0,1fr);}
    .service-grid{grid-template-columns:minmax(0,1fr);}
    .footer-row{justify-content:flex-start;}
    .wa-float{width:52px; height:52px; bottom:calc(14px + env(safe-area-inset-bottom)); right:calc(14px + env(safe-area-inset-right));}
  }

  @media (max-width:420px){
    .about-figures{grid-template-columns:minmax(0,1fr);}
    .contact-row{flex-direction:column; gap:4px;}
    .contact-row .k{width:auto;}
    .legal-list{gap:8px;}
  }

  /* Ponsel dalam posisi landscape — panel menu tetap muat */
  @media (max-height:480px) and (orientation:landscape){
    .mobile-panel{max-height:calc(100dvh - var(--header-h));}
    .hero{padding-top:28px;}
  }

  /* Layar sangat lebar */
  @media (min-width:1500px){
    .wrap, .nav, .hero-grid{max-width:1320px;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important; animation:none !important;}
  }

/* ===================== HALAMAN DETAIL UNIT (SSR) ====================== */
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--f-mono); font-size:12.5px; color:var(--steel-700); margin-bottom:24px;
}
.breadcrumb a{border-bottom:1px solid var(--line-light);}
.breadcrumb a:hover{color:var(--rust); border-color:var(--rust);}
.breadcrumb span{opacity:.6;}

.unit-page h1{font-size:clamp(28px,5vw,46px); margin:6px 0 4px;}
.unit-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--gap-lg); align-items:start;}
.unit-media{
  position:relative; background:var(--paper-dim); border:1px solid var(--line-light);
  display:grid; place-items:center; padding:24px; min-height:280px;
}
.unit-media img{width:100%; height:auto; object-fit:contain;}
.unit-media .badge{position:absolute; top:12px; right:12px;}
.unit-sub{font-family:var(--f-mono); font-size:14px; color:var(--steel-700); margin-bottom:14px;}

.unit-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line-light); border:1px solid var(--line-light); margin:22px 0;
}
.unit-meta > div{background:var(--paper); padding:12px 14px;}
.unit-meta span{
  display:block; font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:1px; color:var(--steel-700); margin-bottom:4px;
}
.unit-meta strong{font-family:var(--f-display); font-size:17px; font-weight:600; text-transform:uppercase;}

.btn-outline-dark{border-color:var(--steel-900); color:var(--steel-900);}
.btn-outline-dark:hover{background:var(--steel-900); color:var(--paper);}

.unit-specs, .unit-desc{margin-top:var(--gap-lg);}
.unit-specs h2, .unit-desc h2{font-size:clamp(20px,3vw,26px); margin-bottom:16px;}
.unit-specs .spec-list{
  columns:2; column-gap:40px; border-top:1px solid var(--line-light); padding-top:8px;
}
.unit-desc p{margin-bottom:12px; max-width:70ch;}

.product-name a{border-bottom:2px solid transparent;}
.product-name a:hover{border-color:var(--amber);}
.product-foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;}

@media (max-width:860px){
  .unit-grid{grid-template-columns:1fr;}
  .unit-specs .spec-list{columns:1;}
}