/*
Theme Name: Offio
Theme URI: https://offio.co.id
Author: Offio
Description: Tema WordPress ringan untuk Offio — cartridge laserjet compatible & solusi printer korporat. Fokus kecepatan akses dan lead generation (WhatsApp/Email), bukan e-commerce.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: offio
*/

:root{
  --ink:#1C2029;
  --ink-soft:#3A404C;
  --paper:#F4F4F1;
  --panel:#E9E8E2;
  --panel-dark:#DEDDD5;
  --line:#D3D1C7;
  --cyan:#146B7A;
  --cyan-dark:#0E4E59;
  --moss:#4B7355;
  --moss-dark:#37563F;
  --white:#FFFFFF;
  --display:'Archivo', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.screen-reader-text{position:absolute; left:-9999px;}

/* ---------- Utility bar ---------- */
.utilitybar{background:var(--ink); color:#B9BEC9; font-family:var(--mono); font-size:12px; letter-spacing:.02em;}
.utilitybar .wrap{display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px;}
.utilitybar a{color:#E9E8E2; border-bottom:1px solid transparent;}
.utilitybar a:hover{border-color:#E9E8E2;}
.utilitybar .seg{display:flex; gap:22px; flex-wrap:wrap;}

/* ---------- Registration mark ---------- */
.regmark{width:14px; height:14px; display:inline-block; position:relative; flex-shrink:0;}
.regmark svg{width:100%; height:100%;}
.eyebrow{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-dark); margin-bottom:14px;}
.eyebrow.moss{color:var(--moss-dark);}
.eyebrow.onlight{color:#9BE0E8;}

/* ---------- Calibration bar (signature divider) ---------- */
.calbar{display:flex; height:6px; width:100%;}
.calbar span{flex:1;}
.calbar .c1{background:var(--cyan);}
.calbar .c2{background:var(--moss);}
.calbar .c3{background:#A6742A;}
.calbar .c4{background:var(--ink);}

/* ---------- Header ---------- */
.site-header{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:20px;}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.01em; margin-left:0;}
.logo .mark{width:30px; height:30px; flex-shrink:0;}
.logo img{max-height:56px; max-width:260px; width:auto; height:auto; display:block;}
.logo .logo-text{font-size:28px; font-weight:900; line-height:1.1; letter-spacing:-.01em; color:var(--ink); white-space:nowrap;}
@media (max-width:640px){
  .logo{gap:8px;}
  .logo img{max-height:42px; max-width:170px;}
  .logo .logo-text{font-size:20px;}
}

nav.mainnav{display:flex; align-items:center; gap:34px;}
nav.mainnav ul{display:flex; gap:30px; font-size:14.5px; font-weight:500;}
nav.mainnav ul ul{
  position:absolute; top:100%; left:-16px; margin-top:4px;
  background:var(--white); border:1px solid var(--line); min-width:230px; padding:10px; display:none; flex-direction:column; gap:0;
  box-shadow:0 12px 24px rgba(28,32,41,.08); z-index:60;
}
nav.mainnav li{position:relative; padding:8px 0;}
nav.mainnav li:hover > ul{display:flex;}
nav.mainnav ul ul li{padding:0;}
nav.mainnav ul ul a{display:flex; padding:9px 10px; font-size:13.5px; border-radius:2px;}
nav.mainnav ul ul a:hover{background:var(--panel);}
nav.mainnav a:hover{color:var(--cyan);}

.menu-toggle{display:none; background:none; border:1px solid var(--ink); padding:8px 12px; font-family:var(--mono); font-size:12px; cursor:pointer;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; font-family:var(--body); font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--cyan); color:var(--white);}
.btn-primary:hover{background:var(--cyan-dark);}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--white);}
.btn-outline-light{border:1px solid rgba(255,255,255,.4); color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,.1);}

/* ---------- Hero ---------- */
.hero{background:var(--ink); color:var(--white); position:relative; overflow:hidden;}
.hero .wrap{padding-top:96px; padding-bottom:80px; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; position:relative;}
.hero-corner{position:absolute; width:22px; height:22px; opacity:.55;}
.hero-corner.tl{top:36px; left:32px;}
.hero-corner.tr{top:36px; right:32px;}
h1.hero-title{font-family:var(--display); font-weight:900; font-size:52px; line-height:1.04; letter-spacing:-.015em; margin-bottom:22px;}
h1.hero-title em{font-style:normal; color:#7FD4DE;}
.hero-sub{font-size:17px; color:#C7CBD3; max-width:480px; margin-bottom:34px; line-height:1.6;}
.hero-ctas{display:flex; gap:14px; margin-bottom:44px; flex-wrap:wrap;}
.hero-meta{display:flex; gap:36px; font-family:var(--mono); font-size:12px; color:#8B92A0; border-top:1px solid #333A47; padding-top:20px; flex-wrap:wrap;}
.hero-meta b{color:var(--white); display:block; font-family:var(--display); font-size:20px; font-weight:800; margin-bottom:2px;}
.hero-visual{background:#242A36; border:1px solid #3A4150; padding:22px;}
.patch-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:#8B92A0; letter-spacing:.08em; margin-bottom:16px; text-transform:uppercase;}
.patchgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.patch{aspect-ratio:1; display:flex; align-items:flex-end; padding:8px; font-family:var(--mono); font-size:10px; color:#EFEFEA;}
.cardpreview{background:linear-gradient(135deg,#1C2029,#2E3644); border:1px solid #3A4150; padding:20px; display:flex; justify-content:space-between; align-items:flex-end;}
.cardpreview .name{font-family:var(--display); font-weight:800; font-size:15px;}
.cardpreview .code{font-family:var(--mono); font-size:11px; color:#7FD4DE;}

/* ---------- Trust strip ---------- */
.trust{background:var(--panel); border-bottom:1px solid var(--line);}
.trust .wrap{padding:26px 32px; display:flex; align-items:center; gap:34px; flex-wrap:wrap;}
.trust-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-soft); white-space:nowrap;}
.trust-logos{display:flex; gap:30px; flex:1; flex-wrap:wrap; align-items:center;}
.trust-logos img{max-height:32px; width:auto; filter:grayscale(1); opacity:.7;}
.trust-logos .chip{font-family:var(--display); font-weight:700; font-size:13px; color:#8D8B80; border:1px solid var(--line); padding:8px 14px; background:var(--paper);}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
h2.section-title{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.01em; margin-bottom:14px;}
.section-desc{color:var(--ink-soft); font-size:15.5px; line-height:1.65;}

/* ---------- Product cards ---------- */
.products{background:var(--paper);}
.productgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pcard{background:var(--paper); padding:30px 26px; display:flex; flex-direction:column; min-height:290px;}
.pcard .thumb{margin-bottom:16px; aspect-ratio:16/10; background:var(--panel); overflow:hidden;}
.pcard .thumb img{width:100%; height:100%; object-fit:cover;}
.pcard .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; display:inline-block; padding:4px 8px; margin-bottom:16px; width:fit-content;}
.pcard.premium .tag{background:rgba(20,107,122,.12); color:var(--cyan-dark);}
.pcard.eco .tag{background:rgba(75,115,85,.14); color:var(--moss-dark);}
.pcard.rent .tag, .pcard.hybrid .tag{background:var(--panel); color:var(--ink-soft);}
.pcard h3{font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:10px;}
.pcard p{font-size:14px; color:var(--ink-soft); line-height:1.6; flex:1;}
.pcard .go{margin-top:20px; font-family:var(--mono); font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:6px; color:var(--ink); border-top:1px solid var(--line); padding-top:16px;}
.pcard:hover{background:var(--panel);}

/* ---------- Value props ---------- */
.values{background:var(--ink); color:var(--white);}
.valuegrid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
.vitem .regmark{margin-bottom:16px;}
.vitem h4{font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:8px;}
.vitem p{font-size:13.5px; color:#AEB3BE; line-height:1.6;}

/* ---------- Compare table ---------- */
.comparetable{width:100%; border-collapse:collapse; border:1px solid var(--line);}
.comparetable th, .comparetable td{text-align:left; padding:18px 22px; border-bottom:1px solid var(--line); font-size:14px;}
.comparetable th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:var(--panel); font-weight:500;}
.comparetable td.rowlabel{font-family:var(--mono); font-size:12px; color:var(--ink-soft); width:26%;}
.comparetable td.offio{font-weight:600; border-left:3px solid var(--cyan);}
.comparetable td.eco{border-left:3px solid var(--moss);}

/* ---------- Corporate CTA ---------- */
.corp{background:var(--panel);}
.corp .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.corp-list{margin-top:26px; display:grid; gap:14px;}
.corp-list li{display:flex; gap:12px; font-size:14.5px; align-items:flex-start;}
.corp-list .num{font-family:var(--mono); font-size:12px; color:var(--cyan-dark); padding-top:2px;}
.corp-form{background:var(--white); border:1px solid var(--line); padding:32px;}
.corp-form h4{font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:4px;}
.corp-form .hint{font-size:12.5px; color:var(--ink-soft); margin-bottom:22px;}
.corp-form label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase;}
.corp-form input, .corp-form select, .corp-form textarea{
  width:100%; border:1px solid var(--line); background:var(--paper); padding:10px 12px; font-family:var(--body); font-size:13px; margin-bottom:16px;
}
.corp-form textarea{min-height:70px;}
.corp-form button{width:100%; justify-content:center;}

/* ---------- Testimonial ---------- */
.testi{background:var(--cyan-dark); color:var(--white);}
.testi .wrap{max-width:760px; text-align:left;}
.testi blockquote{font-family:var(--display); font-weight:600; font-size:26px; line-height:1.4; letter-spacing:-.01em; margin-bottom:26px;}
.testi .who{font-family:var(--mono); font-size:12.5px; color:#9BE0E8;}

/* ---------- Final CTA ---------- */
.finalcta{background:var(--paper); text-align:center;}
.finalcta h2{font-family:var(--display); font-weight:800; font-size:32px; margin-bottom:16px;}
.finalcta p{color:var(--ink-soft); max-width:480px; margin:0 auto 30px; font-size:15px;}
.finalcta .hero-ctas{justify-content:center;}

/* ---------- Generic page content (Tentang, Kontak, Blog, dll) ---------- */
.page-hero{background:var(--ink); color:var(--white); padding:64px 0;}
.page-hero h1{font-family:var(--display); font-weight:800; font-size:38px;}
.page-content{padding:72px 0;}
.page-content .wrap{max-width:800px;}
.page-content h2{font-family:var(--display); font-weight:700; font-size:26px; margin:32px 0 14px;}
.page-content p{margin-bottom:16px; line-height:1.7; color:var(--ink-soft);}
.page-content ul, .page-content ol{margin:0 0 16px 20px; color:var(--ink-soft);}
.page-content ul{list-style:disc;}
.page-content ol{list-style:decimal;}
.page-content img{margin:20px 0;}
.page-content table{width:100%; border-collapse:collapse; margin-bottom:20px;}
.page-content table th, .page-content table td{border:1px solid var(--line); padding:10px 14px; font-size:14px;}

/* ---------- Blog list ---------- */
.bloggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.blogcard{border:1px solid var(--line); background:var(--paper);}
.blogcard .thumb{aspect-ratio:16/10; background:var(--panel); overflow:hidden;}
.blogcard .thumb img{width:100%; height:100%; object-fit:cover;}
.blogcard .body{padding:20px;}
.blogcard .date{font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-bottom:10px;}
.blogcard h3{font-family:var(--display); font-size:17px; font-weight:700; margin-bottom:10px;}
.blogcard p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.blogcard a.readmore{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--cyan-dark);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#AEB3BE;}
.site-footer .top{padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.site-footer .logo{color:var(--white); margin-bottom:14px;}
.site-footer p.desc{font-size:13.5px; line-height:1.6; max-width:260px;}
.site-footer h5{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7B818E; margin-bottom:16px;}
.site-footer ul li{margin-bottom:10px; font-size:13.5px;}
.site-footer ul a:hover{color:var(--white);}
.site-footer .bottom{border-top:1px solid #333A47; padding:22px 0; display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:#7B818E; flex-wrap:wrap; gap:8px;}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:80;
  background:var(--moss); color:var(--white); width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.wa-float:hover{background:var(--moss-dark);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; padding-top:56px;}
  h1.hero-title{font-size:38px;}
  .productgrid{grid-template-columns:repeat(2,1fr);}
  .valuegrid{grid-template-columns:repeat(2,1fr); gap:28px;}
  .corp .wrap{grid-template-columns:1fr;}
  .bloggrid{grid-template-columns:repeat(2,1fr);}
  .site-footer .top{grid-template-columns:1fr 1fr; row-gap:32px;}
  nav.mainnav ul{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column; padding:16px 32px; border-bottom:1px solid var(--line);}
  nav.mainnav.open ul{display:flex;}
  nav.mainnav ul ul{position:static; border:none; box-shadow:none; display:flex; margin-top:6px; padding-left:10px;}
  .menu-toggle{display:inline-block;}
  nav.mainnav{position:relative; width:100%; justify-content:space-between;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .productgrid{grid-template-columns:1fr;}
  .valuegrid{grid-template-columns:1fr;}
  .bloggrid{grid-template-columns:1fr;}
  .comparetable{font-size:12.5px;}
  .comparetable th, .comparetable td{padding:12px;}
  .site-footer .top{grid-template-columns:1fr;}
  .site-footer .bottom{flex-direction:column; gap:8px;}
}