/* AFStudio — penyempurnaan tampilan (dimuat setelah CSS halaman, tanpa mengubah file HTML).
   Prinsip: satu aksen merah per layar, huruf kapital hanya untuk label, ritme spasi lega, foto seragam,
   animasi hemat, kartu & tombol konsisten (radius 8 / 12, border tipis). */

:root{
  --hair:rgba(244,243,238,.07);
  --af-r-sm:8px;
  --af-r-lg:12px;
  --af-lift:-2px;
}

/* 1. SATU AKSEN: merah hanya untuk tombol utama; sisanya netral */
.eyebrow,.section-num,.cms-eyebrow{color:rgba(244,243,238,.62)}
.eyebrow::before{background:rgba(244,243,238,.35)}
.ticker-label::before{background:rgba(244,243,238,.5);box-shadow:none}
.service-card .sc-icon svg,.service-detail-card .sd-icon svg{stroke:rgba(244,243,238,.82)}
.service-card:hover .sc-icon,.service-detail-card:hover .sd-icon{border-color:rgba(244,243,238,.3);background:rgba(244,243,238,.05)}
.service-card:hover .idx{-webkit-text-stroke-color:rgba(244,243,238,.55)}
.nav-links a::after{background:var(--white)}
.board-category,.mag-cat,.blog-cat,.post-cat{color:rgba(244,243,238,.6)!important}
.hero-video-scrim{background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(228,64,44,.06),transparent 60%),linear-gradient(180deg,rgba(11,12,15,.72) 0%,rgba(11,12,15,.5) 40%,rgba(11,12,15,.86) 100%)!important}
.testimonial-card::before{background:radial-gradient(circle,rgba(244,243,238,.05) 0%,transparent 70%)}
.testimonial-card .quote-mark{color:var(--white);opacity:.1}
/* tombol sekunder: tidak lagi terisi merah saat hover */
.btn-secondary::before,.section-cta .btn-secondary::before{background:rgba(244,243,238,.1)!important}
.btn-secondary:hover,.section-cta .btn-secondary:hover{color:var(--white)!important;border-color:rgba(244,243,238,.45)!important;box-shadow:none!important}

/* 2. KAPITAL HANYA UNTUK LABEL: judul memakai huruf biasa */
h1,h2,h3,.display,.cms-title,.cms-h1{text-transform:none;letter-spacing:-.01em}
.hero h1,.page-banner h1,.subpage-hero h1,.dir-hero h1{letter-spacing:-.015em;line-height:1.04}

/* 3. RITME SPASI: antar section jauh lebih besar dari isi di dalamnya */
.section{padding:96px 0}
.section-head{margin-bottom:48px}
.contact-section{padding:112px 0}
.service-card{padding:28px 24px}
@media(max-width:860px){
  .section{padding:56px 0}
  .section-head{margin-bottom:32px}
  .contact-section{padding:72px 0}
}

/* 4. FOTO SERAGAM: satu rasio dan satu grading warna untuk semua cover/thumbnail */
.work-card .thumb,.mag-card .mag-cover img,.blog-card .blog-cover img,.post-cover,.dir-card img.cover,.related-card img,.sidebar-article-card img,.cms-card img,.cms-media img{
  aspect-ratio:16/9;object-fit:cover;filter:saturate(.92) contrast(1.04) brightness(.97)
}
.mag-card .mag-cover,.blog-card .blog-cover{aspect-ratio:16/9;overflow:hidden}
.mag-card .mag-cover img,.blog-card .blog-cover img{width:100%;height:100%}

/* 5. ANIMASI HEMAT: fade-up halus sekali; tanpa parallax & pulse */
[data-reveal]{transition:opacity .5s ease,transform .5s ease}
[data-reveal]:not(.is-visible){transform:translateY(14px)}
[data-reveal].is-visible{transform:none}
[data-parallax]{transform:none!important}
.partner-card img{animation:none!important}
html{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 7. KARTU & TOMBOL KONSISTEN: radius 12 (kartu), 8 (elemen kecil), border tipis, hover naik 2px */
.service-card,.service-detail-card,.board-card,.testimonial-card,.mag-card,.blog-card,.dir-card,.work-card,.faq-item,.client-stat-card,.dir-stat-card,.pricing-card,.price-card,.tier-card,.related-card,.sidebar-article-card,.af-proof{
  border-radius:var(--af-r-lg);border:1px solid var(--hair);overflow:hidden
}
.service-card:hover,.service-detail-card:hover,.board-card:hover,.testimonial-card:hover,.mag-card:hover,.blog-card:hover,.dir-card:hover,.work-card:hover{
  transform:translateY(var(--af-lift));border-color:rgba(244,243,238,.2);box-shadow:0 8px 20px rgba(0,0,0,.28)
}
.service-card .sc-icon,.service-detail-card .sd-icon{border-radius:var(--af-r-sm)}
.btn-primary:hover{transform:translateY(var(--af-lift));box-shadow:0 6px 16px rgba(228,64,44,.3)}
.btn-secondary:hover{transform:translateY(var(--af-lift))}

/* 6. BUKTI SOSIAL di bawah hero (angka nyata dari database) */
.af-proof-wrap{position:relative;z-index:3;margin:-44px auto 0;max-width:1200px;padding:0 32px}
.af-proof{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.af-proof.n3{grid-template-columns:repeat(3,1fr)}
.af-proof div{padding:22px 20px;text-align:center;border-left:1px solid var(--hair)}
.af-proof div:first-child{border-left:0}
.af-proof b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1;color:var(--white)}
.af-proof span{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
@media(max-width:860px){
  .af-proof-wrap{margin-top:-28px;padding:0 20px}
  .af-proof,.af-proof.n3{grid-template-columns:repeat(2,1fr)}
  .af-proof div:nth-child(3){border-left:0}
  .af-proof div:nth-child(n+3){border-top:1px solid var(--hair)}
}