/* ============================================================
   IndoNetwork Clone - Stylesheet
   Palet: biru korporat + oranye aksen (khas marketplace B2B)
   ============================================================ */
:root{
  --biru:#0b4da2; --biru-tua:#083a7c; --biru-muda:#e8f1fb;
  --oranye:#f47b20; --oranye-tua:#d96712;
  --teks:#1f2733; --teks-lembut:#5b6675; --garis:#e3e8ef;
  --bg:#f5f7fa; --putih:#fff; --hijau:#12996b; --merah:#d93636;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.08); --shadow-lg:0 8px 24px rgba(16,24,40,.12);
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--teks);font-size:15px;line-height:1.6}
a{color:var(--biru);text-decoration:none}
a:hover{color:var(--oranye)}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{background:var(--biru-tua);color:#cfe0f5;font-size:13px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar-nav a{color:#cfe0f5;margin-left:16px}
.topbar-nav a:hover{color:#fff}

/* Header */
.header{background:var(--putih);border-bottom:1px solid var(--garis)}
.header-inner{display:flex;align-items:center;gap:24px;padding:14px 16px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{background:var(--biru);color:#fff;font-weight:800;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;letter-spacing:-.5px}
.logo-text{font-size:21px;color:var(--biru);font-weight:400}
.logo-text strong{color:var(--oranye)}
.searchbar{flex:1;display:flex;border:2px solid var(--biru);border-radius:var(--radius);overflow:hidden;background:#fff}
.searchbar input{flex:1;border:0;padding:11px 14px;font-size:15px;outline:none}
.searchbar button{border:0;background:var(--biru);color:#fff;padding:0 26px;font-size:15px;cursor:pointer;font-weight:600}
.searchbar button:hover{background:var(--biru-tua)}
.header-cta{display:flex;gap:8px}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:var(--radius);font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;text-align:center;transition:.15s}
.btn-primary{background:var(--oranye);color:#fff}
.btn-primary:hover{background:var(--oranye-tua);color:#fff}
.btn-outline{background:#fff;color:var(--biru);border-color:var(--biru)}
.btn-outline:hover{background:var(--biru-muda);color:var(--biru)}
.btn-light{background:#fff;color:var(--biru)}
.btn-block{display:block;width:100%}

/* Main nav + megamenu */
.mainnav{background:var(--putih);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.mainnav-inner{display:flex;align-items:center;gap:24px}
.megamenu{position:relative}
.megamenu-btn{background:var(--biru);color:#fff;border:0;padding:13px 18px;font-size:14px;font-weight:600;cursor:pointer}
.megamenu-panel{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--garis);box-shadow:var(--shadow-lg);width:min(1000px,92vw);padding:20px;grid-template-columns:repeat(4,1fr);gap:18px;border-radius:0 0 var(--radius) var(--radius);z-index:60}
.megamenu:hover .megamenu-panel,.megamenu.open .megamenu-panel{display:grid}
.mm-title{display:block;font-weight:700;color:var(--teks);margin-bottom:6px;font-size:14px}
.mm-link{display:block;color:var(--teks-lembut);font-size:13px;padding:2px 0}
.mainnav-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
.mainnav-links a{display:block;padding:13px 0;color:var(--teks);font-weight:500;font-size:14px}
.mainnav-links a:hover{color:var(--oranye)}

.page{padding:22px 16px 50px;min-height:60vh}
.breadcrumb{font-size:13px;color:var(--teks-lembut);margin-bottom:16px}

/* Alerts */
.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:14px}
.alert-success{background:#e6f7f0;color:#0c7551;border:1px solid #b7e6d3}
.alert-error{background:#fdeaea;color:#b32626;border:1px solid #f5c2c2}

/* Hero */
.hero{background:linear-gradient(120deg,var(--biru) 0%,var(--biru-tua) 100%);color:#fff;border-radius:14px;padding:38px;display:grid;grid-template-columns:1.6fr 1fr;gap:30px;align-items:center;margin-bottom:32px}
.hero h1{font-size:32px;line-height:1.25;margin-bottom:10px}
.hero p{color:#d5e4f7;margin-bottom:18px}
.hero-search{display:flex;gap:8px;background:#fff;padding:6px;border-radius:var(--radius)}
.hero-search input{flex:1;border:0;padding:11px 12px;outline:none;font-size:15px}
.hero-tags{margin-top:14px;font-size:13px;color:#cfe0f5}
.hero-tags a{color:#fff;background:rgba(255,255,255,.15);padding:4px 10px;border-radius:20px;margin-right:6px;display:inline-block}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-stats .stat{background:rgba(255,255,255,.12);border-radius:var(--radius);padding:14px;text-align:center}
.hero-stats b{display:block;font-size:24px}
.hero-stats span{font-size:12px;color:#d5e4f7}

/* Sections */
.section{margin-bottom:34px}
.section h2{font-size:20px;margin-bottom:14px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;border-bottom:2px solid var(--garis);padding-bottom:8px}
.section-head h2{margin:0;border-left:4px solid var(--oranye);padding-left:10px}
.section-head a{font-size:13px;font-weight:600}

/* Kategori grid */
.grid-kategori{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kat-card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:18px;text-align:center;transition:.15s}
.kat-card:hover{border-color:var(--biru);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.kat-icon{font-size:28px;display:block;margin-bottom:8px}
.kat-nama{display:block;font-weight:600;color:var(--teks);font-size:14px}
.kat-sub{display:block;font-size:12px;color:var(--teks-lembut);margin-top:2px}

/* Produk grid */
.grid-produk{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card-produk{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.card-produk:hover{box-shadow:var(--shadow-lg);border-color:#c9d8ec}
.cp-img{position:relative;display:block;background:#f0f3f7;aspect-ratio:4/3;overflow:hidden}
.cp-img img{width:100%;height:100%;object-fit:cover}
.cp-kondisi{position:absolute;top:8px;left:8px;background:var(--biru);color:#fff;font-size:11px;padding:2px 8px;border-radius:20px}
.cp-body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.cp-nama{font-size:14px;font-weight:600;line-height:1.35}
.cp-nama a{color:var(--teks);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-nama a:hover{color:var(--biru)}
.cp-harga{color:var(--oranye);font-weight:700;font-size:16px}
.cp-harga small{color:var(--teks-lembut);font-weight:400;font-size:12px}
.cp-meta{margin-top:auto;font-size:12px;color:var(--teks-lembut);display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--garis);padding-top:8px}
.cp-pt{color:var(--biru);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Perusahaan */
.grid-perusahaan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-perusahaan.wide{grid-template-columns:repeat(3,1fr)}
.pt-card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:16px;display:flex;gap:12px;transition:.15s}
.pt-card:hover{box-shadow:var(--shadow-lg);border-color:#c9d8ec}
.pt-card h3{font-size:15px;color:var(--teks);margin-bottom:2px}
.pt-logo{width:48px;height:48px;flex:0 0 48px;border-radius:8px;background:var(--biru-muda);color:var(--biru);font-weight:800;display:grid;place-items:center;text-transform:uppercase}
.pt-logo.big{width:80px;height:80px;flex:0 0 80px;font-size:26px}
.pt-lokasi,.pt-desc{font-size:12px;color:var(--teks-lembut);margin-bottom:6px}
.verified{color:var(--hijau)}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;margin-right:4px}
.badge-gold{background:#fff3d6;color:#96700a}
.badge-silver{background:#eef1f5;color:#5b6675}
.badge-free{background:#eaf3ff;color:#2b6cb0}
.badge-verified{background:#e6f7f0;color:#0c7551}
.badge-count{background:#f1f4f8;color:#5b6675}

/* Artikel */
.grid-artikel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.art-card{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:18px}
.art-card:hover{box-shadow:var(--shadow-lg)}
.art-card h3{font-size:16px;color:var(--teks);margin-bottom:8px}
.art-card p{font-size:13px;color:var(--teks-lembut)}
.art-date{font-size:12px;color:var(--teks-lembut);display:block;margin-top:10px}
.artikel-single{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:28px;max-width:820px}
.artikel-single h1{font-size:26px;margin-bottom:6px}

/* CTA */
.cta-banner{background:var(--oranye);color:#fff;border-radius:14px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-banner h2{font-size:22px}

/* Layout sidebar */
.layout-sidebar{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:16px}
.side-box{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:16px}
.side-box h4{margin-bottom:10px;font-size:15px}
.side-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.side-box label{display:block;font-size:13px;margin:10px 0 4px;color:var(--teks-lembut)}
.side-box select,.side-box input{width:100%;padding:9px;border:1px solid var(--garis);border-radius:8px;font-size:14px;background:#fff}
.side-box .btn{margin-top:14px}

.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.list-head h1{font-size:22px}
.list-head small{font-weight:400;font-size:13px;color:var(--teks-lembut);margin-left:8px}
.sort-form select,.filter-bar select,.filter-bar input{padding:9px;border:1px solid var(--garis);border-radius:8px;background:#fff;font-size:14px}
.filter-bar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.filter-bar input{flex:1;min-width:200px}
.kat-header{margin-bottom:18px}
.kat-header h1{font-size:26px}
.kat-header p{color:var(--teks-lembut);font-size:14px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{background:#fff;border:1px solid var(--garis);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--teks)}
.chip:hover{border-color:var(--biru);color:var(--biru)}
.kosong{background:#fff;border:1px dashed var(--garis);border-radius:var(--radius);padding:34px;text-align:center;color:var(--teks-lembut)}

/* Detail produk */
.detail-wrap{display:grid;grid-template-columns:400px 1fr 300px;gap:22px;align-items:start;margin-bottom:30px}
.detail-galeri{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:10px}
.detail-galeri img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#f0f3f7}
.detail-info h1{font-size:24px;margin-bottom:8px}
.detail-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--teks-lembut);margin-bottom:14px}
.detail-harga{background:var(--biru-muda);border-radius:var(--radius);padding:14px 18px;font-size:26px;font-weight:800;color:var(--oranye);margin-bottom:14px}
.detail-harga small{font-size:13px;color:var(--teks-lembut);font-weight:400}
.detail-aksi{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.spek{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden}
.spek th{text-align:left;background:#f7f9fc;padding:10px 12px;width:180px;font-weight:600;color:var(--teks-lembut);border-bottom:1px solid var(--garis)}
.spek td{padding:10px 12px;border-bottom:1px solid var(--garis)}
.spek.wide{margin-top:16px}
.pt-info{list-style:none;font-size:13px;color:var(--teks-lembut);display:flex;flex-direction:column;gap:6px;margin:12px 0}
.prose{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:18px;font-size:14.5px;color:#333d4b}

/* Perusahaan detail */
.pt-hero{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:22px;display:grid;grid-template-columns:80px 1fr 240px;gap:18px;align-items:center;margin-bottom:24px}
.pt-hero h1{font-size:24px}
.pt-hero-info p{color:var(--teks-lembut);font-size:13px;margin:6px 0}
.pt-hero-kontak{display:flex;flex-direction:column;gap:8px}

/* Forms */
.form-inquiry{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px;max-width:900px}
.form-inquiry label{display:block;font-size:13px;color:var(--teks-lembut);margin:12px 0 5px;font-weight:600}
.form-inquiry input,.form-inquiry select,.form-inquiry textarea{width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
.form-inquiry input:focus,.form-inquiry textarea:focus,.form-inquiry select:focus{outline:2px solid var(--biru-muda);border-color:var(--biru)}
.form-inquiry .btn{margin-top:16px}
.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kontak-wrap{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}

/* Auth */
.auth-wrap{display:grid;place-items:center;padding:20px 0}
.auth-card{background:#fff;border:1px solid var(--garis);border-radius:14px;padding:30px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-card.wide{max-width:720px}
.auth-card h1{font-size:23px}
.auth-sub{color:var(--teks-lembut);font-size:14px;margin-bottom:10px}
.auth-card label{display:block;font-size:13px;margin:12px 0 5px;color:var(--teks-lembut);font-weight:600}
.auth-card input{width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:8px;font-size:14px}
.auth-card .btn{margin-top:18px}
.auth-alt{text-align:center;font-size:13px;margin-top:12px}
.auth-demo{margin-top:16px;background:#f7f9fc;border:1px dashed var(--garis);border-radius:8px;padding:12px;font-size:12.5px;color:var(--teks-lembut);line-height:1.7}

/* Dashboard */
.dash{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.dash-nav{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column}
.dash-nav a{padding:10px 12px;border-radius:8px;color:var(--teks);font-size:14px;font-weight:500}
.dash-nav a:hover{background:#f4f7fb}
.dash-nav a.active{background:var(--biru);color:#fff}
.dash-main{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:22px;min-height:400px}
.dash-main h1{font-size:22px;margin-bottom:6px}
.dash-main h2{font-size:17px;margin:22px 0 10px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.stat-card{background:var(--biru-muda);border-radius:var(--radius);padding:16px;text-align:center}
.stat-card b{display:block;font-size:24px;color:var(--biru)}
.stat-card span{font-size:12px;color:var(--teks-lembut)}
.muted{color:var(--teks-lembut);font-size:13px}
.tabel{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.tabel th{background:#f7f9fc;text-align:left;padding:10px;border-bottom:2px solid var(--garis);font-size:13px;color:var(--teks-lembut)}
.tabel td{padding:10px;border-bottom:1px solid var(--garis);vertical-align:middle}
.tabel .aksi a{margin-right:10px;font-size:13px}
.danger{color:var(--merah)!important}
.inq-card{border:1px solid var(--garis);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.inq-head{display:flex;justify-content:space-between;font-size:14px;margin-bottom:4px}
.inq-head span{color:var(--teks-lembut);font-size:12px}
.inq-card .btn{margin-top:10px}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.pagination a{background:#fff;border:1px solid var(--garis);border-radius:8px;padding:8px 13px;font-size:14px;color:var(--teks)}
.pagination a:hover,.pagination a.active{background:var(--biru);color:#fff;border-color:var(--biru)}
.pagination .dots{padding:8px 4px;color:var(--teks-lembut)}

/* Footer */
.footer{background:#0f1a2b;color:#a9b6c8;margin-top:40px;padding-top:36px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;padding-bottom:28px}
.footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.footer a,.footer span{display:block;color:#a9b6c8;padding:3px 0;font-size:13.5px}
.footer a:hover{color:var(--oranye)}
.footer-desc{font-size:13.5px;margin-top:12px;max-width:380px}
.footer-logo .logo-text{color:#fff}
.footer-bottom{border-top:1px solid #1e2c42;padding:16px 0;font-size:13px;color:#7d8ba0}

/* Responsive */
@media(max-width:1024px){
  .grid-kategori,.grid-produk,.grid-perusahaan,.grid-perusahaan.wide{grid-template-columns:repeat(3,1fr)}
  .detail-wrap{grid-template-columns:1fr 1fr}
  .detail-supplier{grid-column:1/-1}
  .hero{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .header-inner{flex-wrap:wrap}
  .searchbar{order:3;width:100%;flex:none}
  .header-cta{margin-left:auto}
  .layout-sidebar,.dash,.kontak-wrap{grid-template-columns:1fr}
  .grid-artikel{grid-template-columns:1fr 1fr}
  .megamenu-panel{grid-template-columns:1fr 1fr}
  .pt-hero{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .grid-kategori,.grid-produk,.grid-perusahaan,.grid-perusahaan.wide,.grid-artikel{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .detail-wrap{grid-template-columns:1fr}
  .hero{padding:24px}
  .hero h1{font-size:24px}
  .hero-search{flex-direction:column}
  .topbar-inner span{display:none}
  .mainnav-links{gap:14px;overflow-x:auto}
  .footer-grid{grid-template-columns:1fr}
  .megamenu-panel{grid-template-columns:1fr}
}