/* ============================================================
   pilar-civic.css  (21 Sep 2026)
   Gaya beranda meniru susunan dprd-diy.nugrohosetiawan.com:
   Inter, spasi huruf normal, judul tengah + garis aksen, pita
   warna solid, kartu ikon rata tengah. Brand TETAP ungu.
   Dimuat PALING AKHIR (setelah pilar-it.css).
   ============================================================ */
:root{
  --pc-brand:#6d28d9; --pc-brand-dark:#4c1d95; --pc-brand-soft:#f3effc; --pc-accent:#fbbf24;
  --pc-ink:#1f2937; --pc-text:#374151; --pc-muted:#6b7280; --pc-line:#e5e7eb; --pc-r:8px;
}

/* ---------- Tipografi seluruh situs ---------- */
body,h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,textarea,select,label,div,td,th,small,strong,em,blockquote{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
}
pre,code,kbd,samp,pre *,code *{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }
h1,h2,h3,h4,h5,h6,.pilar-section-title,.pilar-hero-title{ letter-spacing:normal !important; }
body{ color:var(--pc-text); }

/* ---------- Kepala seksi: label kecil, judul, garis aksen ---------- */
.pc-section{ padding:80px 0; background:#fff; }
.pc-section.is-soft{ background:var(--pc-brand-soft); }
.pc-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.pc-head.is-left{ text-align:left; margin-left:0; }
.pc-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-brand); margin-bottom:10px; }
.pc-title{ font-size:40px; font-weight:700; line-height:1.2; color:var(--pc-ink); margin:0; }
.pc-title::after{ content:""; display:block; width:48px; height:4px; background:var(--pc-accent); border-radius:2px; margin:16px auto 0; }
.pc-head.is-left .pc-title::after{ margin-left:0; }
.pc-sub{ font-size:16px; line-height:1.6; color:var(--pc-muted); margin:16px 0 0; }

/* ---------- Tombol ---------- */
.pc-btn{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; padding:12px 24px; border-radius:var(--pc-r); text-decoration:none !important; border:1px solid transparent; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.pc-btn-primary{ background:var(--pc-brand); color:#fff !important; }
.pc-btn-primary:hover{ background:var(--pc-brand-dark); }
.pc-btn-light{ background:#fff; color:var(--pc-brand-dark) !important; }
.pc-btn-light:hover{ background:var(--pc-brand-soft); }
.pc-btn-outline{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.55); }
.pc-btn-outline:hover{ background:rgba(255,255,255,.12); }
.pc-more{ font-size:15px; font-weight:600; color:var(--pc-brand) !important; text-decoration:none !important; white-space:nowrap; }
.pc-more:hover{ color:var(--pc-brand-dark) !important; text-decoration:underline !important; }

/* ---------- Hero: pita ungu solid + kartu akses cepat ---------- */
.pc-hero{ background:var(--pc-brand-dark); color:#fff; padding:150px 0 0; position:relative; }
.pc-hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:end; }
.pc-hero-text{ padding-bottom:72px; }
.pc-hero-kicker{ font-size:26px; font-weight:400; color:rgba(255,255,255,.92); margin:0 0 6px; }
.pc-hero h1{ font-size:56px; font-weight:800; line-height:1.1; color:#fff; margin:0; letter-spacing:normal; }
.pc-hero-desc{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.9); margin:20px 0 0; max-width:560px; }
.pc-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pc-hero-img{ width:100%; border-radius:var(--pc-r) var(--pc-r) 0 0; display:block; }

.pc-quick{ background:#fff; color:var(--pc-ink); border-radius:16px; box-shadow:0 10px 30px rgba(31,41,55,.12); padding:24px 26px; margin-bottom:-56px; position:relative; z-index:2; }
.pc-quick-label{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-muted); margin-bottom:14px; }
.pc-quick-label i{ color:var(--pc-accent); margin-right:6px; }
.pc-quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.pc-quick-item{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--pc-r); text-decoration:none !important; color:inherit !important; }
.pc-quick-item:hover{ background:var(--pc-brand-soft); }
.pc-quick-ic{ width:40px; height:40px; flex:0 0 40px; border-radius:var(--pc-r); background:var(--pc-brand-soft); color:var(--pc-brand); display:flex; align-items:center; justify-content:center; font-size:16px; }
.pc-quick-item strong{ display:block; font-size:15px; font-weight:600; color:var(--pc-ink); line-height:1.3; }
.pc-quick-item span{ display:block; font-size:12px; color:var(--pc-muted); line-height:1.4; margin-top:2px; }
.pc-after-hero{ padding-top:120px; }

/* ---------- Grid produk: kartu ikon rata tengah ---------- */
.pc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pc-grid-3{ grid-template-columns:repeat(3,1fr); }
.pc-grid-5{ grid-template-columns:repeat(5,1fr); gap:16px; }
.pc-grid-5 .pc-tile{ padding:26px 14px 22px; }
.pc-tile{ display:block; background:#fff; border:1px solid var(--pc-line); border-radius:12px; padding:30px 20px 26px; text-align:center; text-decoration:none !important; color:inherit !important; transition:border-color .15s ease; height:100%; }
.pc-tile:hover{ border-color:var(--pc-brand); }
.pc-tile-ic{ width:52px; height:52px; margin:0 auto 18px; border-radius:var(--pc-r); background:var(--pc-brand-soft); color:var(--pc-brand); display:flex; align-items:center; justify-content:center; font-size:20px; }
.pc-tile h3{ font-size:17px; font-weight:600; color:var(--pc-ink); margin:0 0 8px; letter-spacing:normal; }
.pc-tile p{ font-size:13.5px; line-height:1.55; color:var(--pc-muted); margin:0; }

/* ---------- Artikel: satu utama + daftar ---------- */
.pc-headrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.pc-headrow .pc-head{ margin:0; }
.pc-news{ display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:start; }
.pc-feature{ background:#fff; border:1px solid var(--pc-line); border-radius:12px; overflow:hidden; }
.pc-feature-img{ display:block; aspect-ratio:16/9; background:var(--pc-brand-soft); overflow:hidden; }
.pc-feature-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pc-feature-body{ padding:24px 26px 28px; }
.pc-date{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-muted); margin-bottom:8px; }
.pc-feature h3{ font-size:24px; font-weight:700; line-height:1.3; margin:0 0 10px; letter-spacing:normal; }
.pc-feature h3 a,.pc-item h4 a{ color:var(--pc-ink) !important; text-decoration:none !important; }
.pc-feature h3 a:hover,.pc-item h4 a:hover{ color:var(--pc-brand) !important; }
.pc-feature p{ font-size:15px; line-height:1.6; color:var(--pc-muted); margin:0; }
.pc-list{ display:flex; flex-direction:column; gap:22px; }
.pc-item{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; }
.pc-item-img{ width:96px; height:96px; border-radius:var(--pc-r); overflow:hidden; background:var(--pc-brand-soft); display:block; }
.pc-item-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pc-item h4{ font-size:16px; font-weight:600; line-height:1.4; margin:0 0 6px; letter-spacing:normal; }
.pc-item p{ font-size:13.5px; line-height:1.5; color:var(--pc-muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Pita statistik + kartu keunggulan ---------- */
.pc-band{ background:var(--pc-brand); color:#fff; border-radius:16px; padding:40px 44px; }
.pc-band h2{ font-size:28px; font-weight:700; color:#fff; margin:0 0 10px; letter-spacing:normal; }
.pc-band > p{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); max-width:560px; margin:0 0 30px; }
.pc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); row-gap:26px; }
.pc-stat{ padding:0 24px; border-left:1px solid rgba(255,255,255,.25); }
.pc-stat:first-child{ padding-left:0; border-left:0; }
.pc-stat .v{ font-size:44px; font-weight:800; line-height:1; color:var(--pc-accent); }
.pc-stat .l{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:10px; }
.pc-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.pc-feat{ background:#fff; border:1px solid var(--pc-line); border-radius:12px; padding:26px 24px; }
.pc-feat-ic{ width:44px; height:44px; border-radius:var(--pc-r); background:var(--pc-brand-soft); color:var(--pc-brand); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:16px; }
.pc-feat h3{ font-size:17px; font-weight:600; color:var(--pc-ink); margin:0 0 8px; letter-spacing:normal; }
.pc-feat p{ font-size:14px; line-height:1.6; color:var(--pc-muted); margin:0; }
.pc-feat .pc-more{ display:inline-block; margin-top:14px; font-size:14px; }

/* ---------- Langkah kerja ---------- */
.pc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pc-step{ background:#fff; border:1px solid var(--pc-line); border-radius:12px; padding:28px 24px; }
.pc-step-n{ width:36px; height:36px; border-radius:50%; background:var(--pc-brand); color:#fff; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.pc-step h3{ font-size:17px; font-weight:600; color:var(--pc-ink); margin:0 0 8px; letter-spacing:normal; }
.pc-step p{ font-size:14px; line-height:1.6; color:var(--pc-muted); margin:0; }

/* ---------- Ajakan penutup ---------- */
.pc-cta{ background:var(--pc-brand-soft); padding:80px 0; text-align:center; }
.pc-cta h2{ font-size:36px; font-weight:700; color:var(--pc-ink); margin:0 0 14px; letter-spacing:normal; }
.pc-cta p{ font-size:16px; line-height:1.6; color:var(--pc-muted); max-width:560px; margin:0 auto 28px; }

/* ---------- Responsif ---------- */
@media(max-width:991.98px){
  .pc-hero{ padding-top:120px; }
  .pc-hero-inner{ grid-template-columns:1fr; gap:0; }
  .pc-hero-text{ padding-bottom:36px; }
  .pc-hero h1{ font-size:40px; } .pc-hero-kicker{ font-size:20px; }
  .pc-title{ font-size:30px; } .pc-cta h2{ font-size:28px; }
  .pc-grid,.pc-grid-3,.pc-grid-5{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .pc-news{ grid-template-columns:1fr; }
  .pc-feats,.pc-steps{ grid-template-columns:1fr; }
  .pc-stats{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .pc-stat:nth-child(odd){ padding-left:0; border-left:0; }
  .pc-band{ padding:30px 24px; }
  .pc-section,.pc-cta{ padding:60px 0; }
  .pc-after-hero{ padding-top:104px; }
}
@media(max-width:575.98px){
  .pc-hero h1{ font-size:32px; }
  .pc-quick-grid{ grid-template-columns:1fr; }
  .pc-tile{ padding:22px 12px 20px; } .pc-tile p{ font-size:12.5px; }
  .pc-stat .v{ font-size:34px; }
  .pc-item{ grid-template-columns:76px 1fr; } .pc-item-img{ width:76px; height:76px; }
}

/* ---------- Navbar: putih solid seperti header rujukan ---------- */
#site-nav,#site-nav.scrolled{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:1px solid var(--pc-line) !important; box-shadow:none !important; }
#site-nav .menu-btn,#site-nav .menu-link{ font-weight:500 !important; letter-spacing:normal !important; }
.btn-top{ border-radius:var(--pc-r) !important; box-shadow:none !important; font-weight:600 !important; }


/* ============================================================
   HALAMAN PRODUK (detail + indeks)
   ============================================================ */
.pc-hero.is-plain{ padding-bottom:8px; }
.pc-crumb{ font-size:13px; color:rgba(255,255,255,.7); margin:0 0 18px; }
.pc-crumb a{ color:rgba(255,255,255,.9) !important; text-decoration:underline !important; }
.pc-hero h1 strong{ font-weight:800; color:var(--pc-accent); }
.pc-hero-shot{ width:100%; display:block; border-radius:12px; border:4px solid #fff; box-shadow:0 10px 30px rgba(31,41,55,.18); margin-bottom:-90px; position:relative; z-index:2; background:#fff; }
.pc-after-shot{ padding-top:150px; }
.pc-title strong{ font-weight:700; color:var(--pc-brand); }
.pc-checks{ list-style:none; padding:0; margin:0; }
.pc-checks li{ position:relative; padding:5px 0 5px 24px; font-size:14px; line-height:1.5; color:var(--pc-text); }
.pc-checks li i{ position:absolute; left:0; top:9px; font-size:11px; color:var(--pc-brand); }
.pc-quick .pc-checks{ display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
.pc-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-16px 0 36px; }
.pc-tags span{ font-size:13px; font-weight:500; color:var(--pc-brand-dark); background:var(--pc-brand-soft); border-radius:999px; padding:6px 14px; }
.pc-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.pc-plan{ background:#fff; border:1px solid var(--pc-line); border-radius:12px; padding:26px 24px; display:flex; flex-direction:column; }
.pc-plan:hover{ border-color:var(--pc-brand); }
.pc-plan-img{ width:100%; height:150px; object-fit:cover; object-position:top; border-radius:var(--pc-r); margin-bottom:16px; border:1px solid var(--pc-line); }
.pc-plan-badge{ align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#78350f; background:#fef3c7; border-radius:4px; padding:3px 9px; margin-bottom:12px; }
.pc-plan h3{ font-size:19px; font-weight:700; color:var(--pc-ink); margin:0 0 8px; letter-spacing:normal; }
.pc-plan > p{ font-size:14px; line-height:1.6; color:var(--pc-muted); margin:0 0 14px; }
.pc-plan .pc-checks{ flex:1; margin-bottom:18px; }
.pc-plan .pc-more{ border-top:1px solid var(--pc-line); padding-top:14px; }
.pc-band-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-accent); margin-bottom:8px; }
.pc-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pc-shot{ display:block; border:1px solid var(--pc-line); border-radius:12px; overflow:hidden; text-decoration:none !important; background:#fff; }
.pc-shot:hover{ border-color:var(--pc-brand); }
.pc-shot img{ width:100%; height:190px; object-fit:cover; object-position:top; display:block; border-bottom:1px solid var(--pc-line); }
.pc-shot span{ display:block; padding:12px 14px; font-size:13.5px; font-weight:500; color:var(--pc-text); }
.pc-cta.is-white{ background:#fff; }

/* ============================================================
   HALAMAN DALAM LAIN: samakan dengan beranda
   (menimpa gaya inline tiap view, maka pakai !important)
   ============================================================ */
.about-hero,.pf-hero,.blog-hero,.pd-hero,.rd-hero,.rd-cover-empty,.contact-hero{ background:var(--pc-brand-dark) !important; color:#fff !important; }
.about-hero::before,.about-hero::after,.pf-hero::before,.blog-hero::before,.pd-hero::before,.contact-hero::before{ display:none !important; }
.about-title,.pf-hero h1,.blog-hero h1,.pd-title,.contact-hero h1{ font-size:44px !important; font-weight:800 !important; line-height:1.15 !important; letter-spacing:normal !important; color:#fff !important; }
.about-subtitle,.pf-hero p,.blog-hero p,.contact-hero p,.pd-client{ font-size:18px !important; line-height:1.6 !important; color:rgba(255,255,255,.9) !important; }
.about-badge,.pd-badge{ background:rgba(255,255,255,.14) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:4px !important; font-weight:600 !important; letter-spacing:normal !important; text-transform:none !important; }
.pf-hero .about-badge:empty{ display:none !important; }
.about-hero a.btn.about-cta,.about-cta{ background:#fff !important; border:1px solid #fff !important; color:var(--pc-brand-dark) !important; border-radius:var(--pc-r) !important; font-weight:600 !important; box-shadow:none !important; transform:none !important; }
.about-hero a.btn.about-cta-outline,.about-cta-outline{ background:transparent !important; border:1px solid rgba(255,255,255,.55) !important; color:#fff !important; border-radius:var(--pc-r) !important; transform:none !important; }
.about-hero .about-stat{ background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:var(--pc-r) !important; box-shadow:none !important; }
.about-hero .about-stat .value{ color:var(--pc-accent) !important; font-weight:800 !important; letter-spacing:normal !important; }
.about-hero .about-stat .label{ color:rgba(255,255,255,.85) !important; }
.about-hero-card{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.2) !important; border-radius:12px !important; box-shadow:none !important; backdrop-filter:none !important; }

.about-h2,.pilar-section-title{ font-size:40px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:normal !important; color:var(--pc-ink) !important; }
.about-h2::after{ content:''; display:block; width:48px; height:4px; background:var(--pc-accent); border-radius:2px; margin:16px auto 0; }
.about-p,.pilar-section-subtitle{ font-size:16px !important; line-height:1.6 !important; color:var(--pc-muted) !important; }

.about-card,.exp-card,.edu-card,.value-card,.team-card,.pf-card,.blog-card,.blog-featured,.rd-header-card,.rd-rel-card,.rd-profile-card,.rd-cmt-card,.pd-section,.pd-quote,.pd-result-highlight,.pilar-why-card,.pilar-article-card,.card{ border-radius:12px !important; box-shadow:none !important; }
.about-card:hover,.exp-card:hover,.edu-card:hover,.value-card:hover,.team-card:hover,.pf-card:hover,.blog-card:hover,.blog-featured:hover,.rd-rel-card:hover,.pilar-why-card:hover,.pilar-article-card:hover{ transform:none !important; box-shadow:none !important; border-color:var(--pc-brand) !important; }
.about-card-icon,.edu-icon,.value-ic{ border-radius:var(--pc-r) !important; background:var(--pc-brand-soft) !important; color:var(--pc-brand) !important; box-shadow:none !important; }
.pf-card-title,.blog-card h3,.rd-title,.rd-name{ letter-spacing:normal !important; font-weight:700 !important; }
.pf-stat-value{ letter-spacing:normal !important; color:var(--pc-brand) !important; font-weight:800 !important; }
.pf-card-img{ background:var(--pc-brand-soft) !important; }
.pf-card-img::after{ display:none !important; }
.pf-card-img i{ color:var(--pc-brand) !important; opacity:.45; }
.pf-filter-btn{ font-weight:500 !important; }
.pf-filter-btn:hover,.pf-filter-btn.active{ background:var(--pc-brand) !important; border-color:var(--pc-brand) !important; box-shadow:none !important; }
.pd-result-highlight{ background:var(--pc-brand) !important; }
.pd-quote{ background:var(--pc-brand-dark) !important; }
.rd-cover .overlay{ background:linear-gradient(to top, rgba(76,29,149,.55), transparent 60%) !important; }
.rd-content pre{ background:#1f2937 !important; border-radius:var(--pc-r) !important; }
.rd-content th{ text-transform:none !important; letter-spacing:normal !important; }
.btn-load-more,.blog-search-btn{ transform:none !important; box-shadow:none !important; border-radius:var(--pc-r) !important; }

.pilar-cta-partner{ background:var(--pc-brand-soft) !important; padding:72px 0 !important; }
.pilar-cta-partner::before,.pilar-cta-partner::after{ display:none !important; }
.pilar-cta-partner-box{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; padding:0 !important; }
.pilar-cta-title{ color:var(--pc-ink) !important; font-size:32px !important; font-weight:700 !important; letter-spacing:normal !important; }
.pilar-cta-subtitle{ color:var(--pc-muted) !important; font-size:16px !important; }
.pilar-cta-partner .btn,.pilar-cta-partner a.btn{ background:var(--pc-brand) !important; color:#fff !important; border:1px solid var(--pc-brand) !important; border-radius:var(--pc-r) !important; font-weight:600 !important; box-shadow:none !important; transform:none !important; }

.btn,.btn-primary{ border-radius:var(--pc-r) !important; }
.btn-primary,a.btn-primary,button.btn-primary{ background:var(--pc-brand) !important; border-color:var(--pc-brand) !important; box-shadow:none !important; transform:none !important; }
.btn-primary:hover{ background:var(--pc-brand-dark) !important; border-color:var(--pc-brand-dark) !important; }
.form-control{ border-radius:var(--pc-r) !important; box-shadow:none !important; }
.form-control:focus{ border-color:var(--pc-brand) !important; box-shadow:0 0 0 3px rgba(109,40,217,.14) !important; }

@media(max-width:991.98px){
  .pc-hero-shot{ margin-bottom:-60px; } .pc-after-shot{ padding-top:110px; }
  .pc-shots{ grid-template-columns:1fr 1fr; }
  .about-title,.pf-hero h1,.blog-hero h1,.pd-title,.contact-hero h1{ font-size:32px !important; }
  .about-h2,.pilar-section-title{ font-size:30px !important; }
}
@media(max-width:575.98px){
  .pc-shots{ grid-template-columns:1fr; } .pc-quick .pc-checks{ grid-template-columns:1fr; }
}