/*
Theme Name: Baja Perkasa
Theme URI: https://bajaperkasa.id
Author: Baja Perkasa
Description: Tema WordPress untuk jasa pemasangan atap baja ringan & kusen aluminium.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: baja-perkasa
*/

:root{
  --bg:#EEF0F0; --panel:#E3E7E8; --panel-2:#FFFFFF;
  --steel:#5B6266; --steel-dim:#8A9195;
  --ink:#1B1F22; --ink-dim:#525A5E;
  --accent:#E8622C; --accent-ink:#FFFFFF;
  --line:#D3D7D8;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit; margin:0; padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{height:100%;}
body{background:var(--bg); color:var(--ink); font-family:'Barlow',Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Barlow Condensed',Arial,sans-serif;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
table{border-collapse:collapse; width:100%;}

/* top bar */
.topbar{background:var(--panel); border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-dim);}
.topbar .wrap{display:flex; justify-content:space-between; padding:8px 28px; flex-wrap:wrap; gap:6px;}
@media(max-width:600px){ .topbar .wrap{justify-content:center; text-align:center;} }

/* header */
header{position:sticky; top:0; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(238,240,240,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:14px 28px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Barlow Condensed'; font-weight:800; font-size:22px;}

/* nav menu (wp_nav_menu output) */
header nav{display:flex;}
.nav-menu{display:flex; gap:26px; font-size:15px; color:var(--ink-dim);}
.nav-menu > li{position:relative;}
.nav-menu > li > a{color:var(--ink-dim);}
.nav-menu > li > a:hover{color:var(--ink);}
.nav-menu .sub-menu{display:none; position:absolute; top:28px; left:-12px; background:var(--panel-2); border:1px solid var(--line); min-width:230px; padding:8px 0; font-size:14px; z-index:30;}
.nav-menu li.menu-item-has-children:hover > .sub-menu{display:block;}
.nav-menu .sub-menu li a{display:block; padding:9px 16px; color:var(--ink-dim);}
.nav-menu .sub-menu li a:hover{color:var(--ink); background:var(--panel);}
.navcta{background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:14px; padding:9px 16px; border-radius:2px;}
@media(max-width:860px){ header nav{display:none;} }

/* hero */
.hero{position:relative; padding:70px 0 80px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media(max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
.eyebrow{color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.02em; margin-bottom:12px;}
.hero h1{font-size:clamp(34px,5.4vw,54px); font-weight:800; line-height:1.04;}
.hero p{margin-top:18px; font-size:17px; line-height:1.55; color:var(--ink-dim); max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.btn{padding:14px 24px; border-radius:2px; font-weight:700; font-size:15px; display:inline-block;}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-ghost{border:1px solid var(--line); color:var(--ink);}
.roof-art{width:100%; height:auto;}

.sec-head{max-width:58ch; margin-bottom:36px;}
.sec-head h2{font-size:clamp(26px,3.6vw,36px); font-weight:800;}
.sec-head p{margin-top:10px; color:var(--ink-dim); font-size:15px; line-height:1.6;}

section{padding:60px 0;}
section.alt{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* keunggulan */
.adv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){ .adv-grid{grid-template-columns:1fr 1fr;} }
.adv-item{background:var(--bg); padding:26px 22px;}
.adv-item b{display:block; font-family:'Barlow Condensed'; font-size:20px; font-weight:700; margin-bottom:6px;}
.adv-item p{font-size:13.5px; color:var(--ink-dim); line-height:1.55;}

/* services */
.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:760px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:var(--panel-2); border:1px solid var(--line); padding:30px; position:relative;}
.svc-card::before{content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--accent);}
.svc-card h3{font-size:24px; font-weight:800; margin-bottom:10px;}
.svc-card p{color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin-bottom:16px;}
.svc-list li{font-size:13.5px; color:var(--steel); padding-left:18px; position:relative; margin-bottom:8px;}
.svc-list li::before{content:"—"; position:absolute; left:0; color:var(--accent);}

/* pricing */
.price-table{font-size:14px;}
.price-table th{text-align:left; padding:12px 14px; background:var(--panel-2); color:var(--ink-dim); font-weight:600; border-bottom:1px solid var(--line);}
.price-table td{padding:14px; border-bottom:1px solid var(--line); color:var(--ink-dim);}
.price-table td:first-child{color:var(--ink); font-weight:600;}
.price-table td.price{color:var(--accent); font-weight:700;}
.price-note{margin-top:14px; font-size:13px; color:var(--steel-dim);}

/* portfolio */
.filter-row{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.filter-row span{font-size:13px; padding:7px 14px; border:1px solid var(--line); color:var(--ink-dim);}
.filter-row span.active{border-color:var(--accent); color:var(--accent);}
.port-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:860px){ .port-grid{grid-template-columns:1fr 1fr;} }
.port-item{aspect-ratio:4/3; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:flex-end; padding:12px; font-size:12.5px; color:var(--ink-dim); position:relative; overflow:hidden;}
.port-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.port-item::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 60%, rgba(232,98,44,.12)); z-index:1;}
.port-item span{position:relative; z-index:2; background:rgba(255,255,255,.85); padding:2px 4px;}

/* testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){ .testi-grid{grid-template-columns:1fr;} }
.testi-card{background:var(--panel-2); border:1px solid var(--line); padding:24px;}
.testi-stars{color:var(--accent); font-size:14px; margin-bottom:10px; letter-spacing:2px;}
.testi-card p{font-size:14px; color:var(--ink-dim); line-height:1.6; margin-bottom:14px;}
.testi-name{font-size:13px; font-weight:700; color:var(--ink);}
.testi-loc{font-size:12px; color:var(--steel-dim);}

/* process */
.proc-row{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.proc-item{display:grid; grid-template-columns:60px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line);}
.proc-num{font-family:'Barlow Condensed'; font-size:30px; font-weight:800; color:var(--accent);}
.proc-item h4{font-size:18px; font-weight:700; margin-bottom:4px;}
.proc-item p{font-size:13.5px; color:var(--ink-dim); line-height:1.55; max-width:60ch;}

/* cta band */
.cta-band{background:var(--accent); color:var(--accent-ink); padding:50px 0;}
.cta-flex{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;}
.cta-flex h2{font-size:clamp(24px,3.6vw,34px); font-weight:800; max-width:20ch;}
.btn-dark{background:var(--bg); color:var(--ink); padding:15px 26px; border-radius:2px; font-weight:700;}

/* footer */
footer{padding:44px 0 36px; font-size:13.5px; color:var(--ink-dim);}
.foot-cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:18px;}
@media(max-width:760px){ .foot-cols{grid-template-columns:1fr 1fr;} }
.foot-brand{font-family:'Barlow Condensed'; font-weight:800; font-size:19px; color:var(--ink); margin-bottom:8px;}
.foot-cols div{display:flex; flex-direction:column; gap:7px;}
.foot-cols b{color:var(--ink); font-weight:700; font-size:12.5px; margin-bottom:2px;}
.map-box{margin-top:6px; height:70px; border:1px solid var(--line); background:var(--panel-2); font-size:12px; display:flex; align-items:center; justify-content:center; color:var(--steel-dim);}