/* =============================================
   ARIES SOFTWARE — Website Publik (stylesheet bersama)
   Dipakai halaman selain Beranda (Produk, Portofolio, Blog, dst).

   PENTING: nilai-nilai di sini DISALIN dari mockup
   "AriesSoftware Landing v2.dc.html" (warna, radius, blur, shadow,
   easing, durasi) supaya halaman dalam terasa satu nafas dengan
   Beranda. Kalau mockup diperbarui, sesuaikan nilainya di sini juga.
   Beranda sendiri tidak memakai file ini — dia pakai inline style
   hasil port langsung dari mockup.
   ============================================= */

:root {
  /* Palet resmi (materi brand: Dark Water / Sonata / French Lime / Full White) */
  --c-primary:    #0C4968;
  --c-primary-d:  #082F42;
  --c-secondary:  #0F6091;
  --c-accent:     #A6FF57;
  --c-accent-d:   #4C8A16;
  --c-dark:       #0C4968;
  --c-surface:    #FBFDFE;
  --c-surface-2:  #EEF5F9;
  --c-white:      #FFFFFE;
  --c-text:       #1B3A4B;
  --c-text-mid:   #4A7288;
  --c-muted:      #6B92A6;
  --c-faint:      #8FB0C0;
  --c-nav-link:   #42708A;
  --c-hairline:   rgba(12,73,104,0.10);
  --c-border:     rgba(12,73,104,0.12);
  --glass:        rgba(255,255,255,0.60);
  --glass-edge:   rgba(255,255,255,0.90);
  --sh-card:      0 8px 32px rgba(12,73,104,0.10);
  --sh-hover:     0 28px 60px rgba(12,73,104,0.20);
  --sh-btn:       0 10px 30px rgba(12,73,104,0.26);
  --ease:         cubic-bezier(.16,1,.3,1);
  --r-card:       22px;
  --r-btn:        14px;
  --font-head:    'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --max-w:        1320px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background:var(--c-surface); color:var(--c-text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; }
a { color:var(--c-secondary); text-decoration:none; }
a:hover { color:var(--c-primary); }
h1, h2, h3, h4 { font-family:var(--font-head); color:var(--c-primary); margin:0; }
::selection { background:var(--c-accent); color:var(--c-primary); }
:focus-visible { outline:2px solid var(--c-secondary); outline-offset:3px; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 40px; }
@media (max-width:1000px) { .container { padding:0 20px; } }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--c-surface-2); }
::-webkit-scrollbar-thumb { background:var(--c-secondary); border-radius:3px; }

/* Progress bar scroll — sama seperti Beranda */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:100%; background:linear-gradient(90deg,var(--c-secondary),var(--c-accent)); transform-origin:0 50%; transform:scaleX(0); z-index:210; }
@supports (animation-timeline: scroll(root)) {
  .scroll-progress { animation:growX linear both; animation-timeline:scroll(root); }
}

/* ===== Keyframes (disalin dari mockup) ===== */
@keyframes growX     { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes fadeUp    { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes riseIn    { from { opacity:0; transform:translateY(52px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideRight{ from { opacity:0; transform:translateX(-46px); } to { opacity:1; transform:translateX(0); } }
@keyframes zoomIn    { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:scale(1); } }
@keyframes popIn     { from { opacity:0; transform:translateY(30px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes floatY    { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-16px,0); } }
@keyframes pulseDot  { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.72); } }
@keyframes drift     { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(5%,-4%,0) scale(1.12); } }
@keyframes gradShift { from { background-position:0% 50%; } to { background-position:-200% 50%; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
}

/* ===== Reveal saat discroll =====
   Elemen TAMPIL secara default. Kelas penyembunyi baru dipasang setelah
   site.js jalan (body.js-on). Jadi kalau JS gagal/diblokir, konten tetap
   terbaca — bukan halaman kosong. */
html.js .reveal { opacity:0; transform:translateY(26px); }
.reveal { transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.visible { opacity:1; transform:none; }
html.js .reveal-left { transform:translateX(-46px); }
html.js .reveal-left.visible { transform:none; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }
.reveal-delay-4 { transition-delay:.32s; }

/* =============================================
   NAV — pil kaca melayang (nilai persis dari mockup)
   ============================================= */
.nav-shell { position:sticky; top:14px; z-index:70; margin:14px auto 0; padding:0 40px; }
@media (max-width:1000px) { .nav-shell { padding:0 20px; } }
.nav { position:relative; max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 16px 12px 20px; background:rgba(255,255,255,0.62); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,0.8); box-shadow:var(--sh-card); border-radius:18px; transition:background .3s, box-shadow .3s; }
.nav.scrolled { background:rgba(255,255,255,0.82); box-shadow:0 12px 38px rgba(12,73,104,0.16); }
.nav-inner { display:contents; }
.nav-logo { display:flex; align-items:center; gap:11px; color:var(--c-primary); font-family:var(--font-head); font-weight:800; font-size:1.05rem; letter-spacing:-0.03em; }
.nav-logo img { width:32px; height:32px; object-fit:contain; display:block; }
.nav-links { display:flex; align-items:center; gap:22px; font-size:0.9rem; font-weight:500; list-style:none; }
.nav-links a { color:var(--c-nav-link); white-space:nowrap; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--c-primary); }
.nav-links a.active { font-weight:600; }
.nav-cta { display:inline-flex; align-items:center; gap:9px; padding:12px 20px; background:var(--c-primary); color:var(--c-white); font-size:0.88rem; font-weight:600; border-radius:12px; box-shadow:0 6px 22px rgba(12,73,104,0.28); transition:transform .25s var(--ease), box-shadow .25s, color .25s; }
.nav-cta::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--c-accent); animation:pulseDot 2.4s ease-in-out infinite; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(12,73,104,0.34); color:var(--c-accent); }

.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; }
.nav-hamburger span { display:block; width:20px; height:2px; background:var(--c-primary); border-radius:2px; transition:transform .25s, opacity .25s; margin:0 auto; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-mobile { display:none; flex-direction:column; position:absolute; top:calc(100% + 10px); left:0; right:0; background:rgba(255,255,255,0.96); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); padding:8px 20px 18px; border:1px solid rgba(255,255,255,0.9); border-radius:18px; box-shadow:0 16px 44px rgba(12,73,104,0.18); }
.nav-mobile.open { display:flex; }
.nav-mobile a { padding:13px 4px; font-size:0.95rem; font-weight:500; color:var(--c-text-mid); border-bottom:1px solid var(--c-hairline); }
.nav-mobile a:last-child { border-bottom:none; }
.nav-mobile a.active { color:var(--c-primary); font-weight:700; }
@media (max-width:1000px) {
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
}

/* =============================================
   TOMBOL (nilai persis dari mockup)
   ============================================= */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 28px; background:var(--c-primary); color:var(--c-white); font-family:var(--font-body); font-size:0.98rem; font-weight:600; border:none; border-radius:var(--r-btn); cursor:pointer; box-shadow:var(--sh-btn); transition:transform .3s var(--ease), box-shadow .3s, color .3s; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(12,73,104,0.32); color:var(--c-accent); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 28px; background:rgba(255,255,255,0.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.9); box-shadow:var(--sh-card); border-radius:var(--r-btn); color:var(--c-primary); font-family:var(--font-body); font-size:0.98rem; font-weight:600; cursor:pointer; transition:transform .3s var(--ease), background .3s; }
.btn-secondary:hover { transform:translateY(-3px); background:rgba(255,255,255,0.85); color:var(--c-primary); }
.btn-wa { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 28px; background:#25D366; color:#fff; font-family:var(--font-body); font-size:0.98rem; font-weight:600; border:none; border-radius:var(--r-btn); cursor:pointer; box-shadow:0 10px 30px rgba(37,211,102,0.30); transition:transform .3s var(--ease), box-shadow .3s; }
.btn-wa:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,211,102,0.40); color:#fff; }
.btn-block { width:100%; }
.btn-sm { padding:11px 18px; font-size:0.84rem; box-shadow:none; }
.hero-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* =============================================
   LABEL / JUDUL SECTION
   ============================================= */
.section-tag, .mono-label { display:inline-block; font-family:var(--font-mono); font-size:0.72rem; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-secondary); margin-bottom:18px; }
.section-title { font-family:var(--font-head); font-size:clamp(1.8rem,3.1vw,2.8rem); font-weight:800; line-height:1.12; letter-spacing:-0.04em; color:var(--c-primary); }
.section-sub { margin-top:14px; font-size:1rem; line-height:1.7; color:var(--c-text-mid); max-width:60ch; text-wrap:pretty; }
.section-head { max-width:620px; margin:0 auto 44px; text-align:center; }
.section-head.left { text-align:left; margin:0 0 44px; max-width:100%; }
.split-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end; margin-bottom:44px; }
.split-head p { margin:0; font-size:1rem; line-height:1.7; color:var(--c-text-mid); text-wrap:pretty; }
@media (max-width:1000px) { .split-head { grid-template-columns:1fr; gap:32px; } }

.entity-tag { display:inline-block; align-self:flex-start; padding:5px 11px; border-radius:999px; background:rgba(15,96,145,0.08); border:1px solid rgba(15,96,145,0.16); font-family:var(--font-mono); font-size:0.62rem; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:var(--c-secondary); }

/* =============================================
   SECTION & PAGE HERO
   ============================================= */
.section { padding:104px 0; position:relative; }
.section-alt { background:rgba(255,255,255,0.55); }
@media (max-width:620px) { .section { padding:72px 0; } }
.page-hero { padding:56px 0 40px; position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; top:-40%; right:-10%; width:44vw; height:44vw; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(15,96,145,0.16), rgba(15,96,145,0) 66%); filter:blur(28px); pointer-events:none; animation:drift 22s ease-in-out infinite; }
.page-hero > .container { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(2.1rem,4.2vw,3.2rem); font-weight:800; line-height:1.08; letter-spacing:-0.045em; margin-bottom:16px; }
.page-hero-sub { font-size:1.02rem; line-height:1.7; color:var(--c-text-mid); max-width:64ch; text-wrap:pretty; }
.breadcrumb { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-faint); margin-bottom:20px; }
.breadcrumb a { color:var(--c-secondary); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span { margin:0 0.4rem; }
.text-primary { color:var(--c-secondary) !important; }

/* =============================================
   KARTU LISTING (Produk / Portofolio / Industri / Blog)
   Nilai kaca & hover disalin dari kartu produk di mockup.
   ============================================= */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.entity-card { display:flex; flex-direction:column; background:rgba(255,255,255,0.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); box-shadow:var(--sh-card); border-radius:var(--r-card); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.entity-card:hover { transform:translateY(-12px) scale(1.02); box-shadow:var(--sh-hover); border-color:rgba(166,255,87,0.9); }
.entity-cover { position:relative; display:block; aspect-ratio:16/10; background:linear-gradient(150deg,#0C4968,#0F6091); overflow:hidden; }
.entity-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.entity-body { padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.entity-name { font-size:1.16rem; font-weight:700; letter-spacing:-0.03em; }
.entity-desc { font-size:0.9rem; line-height:1.64; color:var(--c-text-mid); flex:1; }
.entity-meta { margin-top:4px; padding-top:14px; border-top:1px solid var(--c-hairline); display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:0.66rem; color:var(--c-faint); }
.entity-actions { display:flex; gap:10px; margin-top:6px; align-items:center; flex-wrap:wrap; }
.entity-actions .btn-primary, .entity-actions .btn-secondary, .entity-actions .btn-wa { padding:11px 18px; font-size:0.84rem; box-shadow:none; }
.entity-actions .btn-wa { width:42px; height:42px; padding:0; flex-shrink:0; font-size:1.05rem; border-radius:12px; }

/* =============================================
   HALAMAN DETAIL
   ============================================= */
.detail-top { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:48px; align-items:center; }
.detail-top .entity-cover { border-radius:var(--r-card); box-shadow:0 18px 50px rgba(12,73,104,0.18); border:1px solid rgba(255,255,255,0.9); aspect-ratio:4/3; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.check-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.check-list li { position:relative; padding-left:28px; font-size:0.93rem; line-height:1.66; color:var(--c-text-mid); }
.check-list li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--c-secondary); font-weight:700; }
.check-list.benefit li::before { content:'★'; color:var(--c-accent-d); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-grid img { border-radius:16px; border:1px solid rgba(255,255,255,0.9); box-shadow:var(--sh-card); aspect-ratio:16/10; object-fit:cover; cursor:zoom-in; transition:transform .4s var(--ease), box-shadow .4s; }
.gallery-grid img:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--sh-hover); }

.case-meta { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.case-block { margin-bottom:36px; }
.case-block h3 { font-size:1.14rem; font-weight:700; letter-spacing:-0.03em; margin-bottom:10px; }
.case-block p { font-size:0.95rem; line-height:1.78; color:var(--c-text-mid); }
.case-testimonial { position:relative; margin:40px 0; padding:36px 40px; background:rgba(255,255,255,0.74); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid rgba(255,255,255,0.95); box-shadow:0 18px 50px rgba(12,73,104,0.16); border-radius:26px; font-family:var(--font-head); font-size:clamp(1.05rem,1.7vw,1.4rem); font-weight:600; line-height:1.4; letter-spacing:-0.035em; color:var(--c-primary); text-wrap:pretty; }
.case-testimonial cite { display:block; margin-top:20px; padding-top:18px; border-top:1px solid var(--c-hairline); font-style:normal; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--c-faint); }

/* Banner CTA — meniru banner kontak di Beranda */
.detail-cta-box { position:relative; overflow:hidden; padding:64px 48px; background:linear-gradient(140deg,#0C4968 0%,#0F6091 100%); border-radius:30px; box-shadow:0 24px 70px rgba(12,73,104,0.28); text-align:center; }
.detail-cta-box::before { content:''; position:absolute; top:-30%; right:-8%; width:38vw; height:38vw; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(166,255,87,0.34), rgba(166,255,87,0) 68%); filter:blur(24px); animation:drift 22s ease-in-out infinite; }
.detail-cta-box > * { position:relative; }
.detail-cta-box h3 { color:var(--c-white); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; letter-spacing:-0.04em; line-height:1.12; margin-bottom:12px; }
.detail-cta-box p { color:rgba(255,255,254,0.78); margin-bottom:28px; text-wrap:pretty; }
.detail-cta-box .btn-wa { background:rgba(255,255,255,0.14); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.28); box-shadow:0 8px 32px rgba(0,0,0,0.2); border-radius:18px; }
.detail-cta-box .btn-wa:hover { background:var(--c-accent); color:var(--c-primary); border-color:var(--c-accent); }
@media (max-width:620px) { .detail-cta-box { padding:44px 26px; } }

.empty-note { text-align:center; padding:80px 20px; color:var(--c-muted); }
.empty-note .icon { font-size:2.75rem; margin-bottom:12px; }

/* =============================================
   FORM & KONTAK
   ============================================= */
.contact-wrap { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:48px; align-items:start; }
.contact-info h3 { font-size:1.7rem; font-weight:800; letter-spacing:-0.04em; line-height:1.12; margin-bottom:14px; }
.contact-info p { color:var(--c-text-mid); font-size:0.98rem; line-height:1.7; margin-bottom:32px; }
.contact-items { display:flex; flex-direction:column; gap:14px; }
.contact-item { display:flex; align-items:flex-start; gap:14px; padding:18px 20px; background:rgba(255,255,255,0.58); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); box-shadow:var(--sh-card); border-radius:18px; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.contact-item:hover { transform:translateX(10px); box-shadow:0 22px 50px rgba(12,73,104,0.16); border-color:rgba(166,255,87,0.9); }
.contact-icon { flex:none; width:38px; height:38px; border-radius:50%; background:rgba(15,96,145,0.12); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.contact-label { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-muted); }
.contact-val { font-size:0.92rem; color:var(--c-text); font-weight:500; margin-top:3px; }
.contact-form { display:flex; flex-direction:column; gap:16px; padding:32px; background:rgba(255,255,255,0.6); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,0.9); box-shadow:0 12px 40px rgba(12,73,104,0.12); border-radius:var(--r-card); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-label { font-size:0.8rem; font-weight:600; color:var(--c-text-mid); }
.form-input, .form-textarea, .form-select { padding:14px 16px; border:1px solid rgba(12,73,104,0.14); border-radius:12px; font-family:var(--font-body); font-size:0.92rem; color:var(--c-text); background:rgba(255,255,255,0.85); transition:border-color .25s, box-shadow .25s; outline:none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--c-secondary); box-shadow:0 0 0 4px rgba(15,96,145,0.10); }
.form-textarea { resize:vertical; min-height:130px; }
.form-alert { padding:14px 18px; border-radius:14px; font-size:0.9rem; font-weight:500; display:flex; align-items:center; gap:10px; }
.form-alert-success { background:rgba(166,255,87,0.22); color:#3F7A0F; border:1px solid rgba(166,255,87,0.6); }
.form-alert-error { background:#FEE2E2; color:#DC2626; border:1px solid #FECACA; }

/* =============================================
   FAQ
   ============================================= */
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-cat-label { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-secondary); margin:32px 0 10px; }
.faq-cat-label:first-child { margin-top:0; }
.faq-item { background:rgba(255,255,255,0.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); box-shadow:var(--sh-card); border-radius:18px; overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item.open { border-color:rgba(166,255,87,0.9); box-shadow:0 18px 44px rgba(12,73,104,0.14); }
.faq-q { padding:22px 26px; font-family:var(--font-head); font-weight:700; font-size:0.98rem; letter-spacing:-0.02em; color:var(--c-primary); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q .chev { flex-shrink:0; font-size:0.8rem; color:var(--c-secondary); transition:transform .3s var(--ease); }
.faq-item.open .faq-q .chev { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:800px; }
.faq-a-inner { padding:0 26px 22px; font-size:0.92rem; line-height:1.78; color:var(--c-text-mid); }

/* =============================================
   BLOG / ARTIKEL
   ============================================= */
.blog-meta { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--c-faint); }
.blog-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--c-faint); }
.blog-hero-cover { border-radius:var(--r-card); overflow:hidden; border:1px solid rgba(255,255,255,0.9); box-shadow:0 18px 50px rgba(12,73,104,0.16); margin:32px 0; }
.blog-hero-cover img { width:100%; display:block; }
.blog-content { font-size:1rem; line-height:1.85; color:var(--c-text-mid); }
.blog-content p { margin-bottom:20px; }
.blog-content h2 { font-size:1.5rem; font-weight:800; letter-spacing:-0.035em; color:var(--c-primary); margin:36px 0 16px; }
.blog-content h3 { font-size:1.18rem; font-weight:700; letter-spacing:-0.03em; color:var(--c-primary); margin:28px 0 12px; }
.blog-content ul, .blog-content ol { margin:0 0 20px 22px; }
.blog-content li { margin-bottom:8px; }
.blog-content a { color:var(--c-secondary); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.blog-content strong { color:var(--c-primary); }
.blog-content blockquote { margin:28px 0; padding:22px 28px; background:rgba(15,96,145,0.05); border-left:3px solid var(--c-accent); border-radius:0 16px 16px 0; font-style:italic; }
.blog-content img { border-radius:16px; margin:24px 0; }

/* =============================================
   FOOTER (nilai persis dari mockup)
   ============================================= */
footer { padding:56px 0 40px; border-top:1px solid var(--c-hairline); }
.footer-inner { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,0.7fr)); gap:36px; padding-bottom:36px; }
.footer-logo { display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:800; font-size:1rem; letter-spacing:-0.03em; color:var(--c-primary); }
.footer-logo img { width:30px; height:30px; object-fit:contain; display:block; }
.footer-desc { margin-top:16px; max-width:36ch; font-size:0.9rem; line-height:1.7; color:var(--c-text-mid); }
.footer-col-title { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-faint); margin-bottom:16px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; font-size:0.92rem; }
.footer-links a { color:var(--c-text-mid); transition:color .2s; }
.footer-links a:hover { color:var(--c-primary); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:24px; border-top:1px solid var(--c-hairline); font-family:var(--font-mono); font-size:0.7rem; color:var(--c-faint); }
.footer-bottom-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom-links a { color:var(--c-faint); }
.footer-bottom-links a:hover { color:var(--c-primary); }

/* WA FLOAT */
.wa-float { position:fixed; bottom:1.75rem; right:1.75rem; z-index:200; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,0.42); transition:transform .3s var(--ease), box-shadow .3s; }
.wa-float:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 18px 40px rgba(37,211,102,0.52); }
.wa-float svg { width:28px; height:28px; fill:#fff; }
.wa-float-label { position:absolute; right:70px; top:50%; transform:translateY(-50%); padding:7px 14px; background:var(--c-primary); color:#fff; font-size:0.78rem; font-weight:600; border-radius:999px; white-space:nowrap; box-shadow:0 8px 24px rgba(12,73,104,0.28); opacity:0; pointer-events:none; transition:opacity .25s; }
.wa-float:hover .wa-float-label { opacity:1; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1000px) {
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .detail-top, .feature-grid, .contact-wrap { grid-template-columns:1fr; gap:32px; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:700px) {
  .card-grid, .card-grid.cols-2 { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .case-testimonial { padding:26px 24px; }
  .contact-form { padding:24px; }
}