/*
Theme Name: Digital Djaya
Theme URI: https://digitaldjaya.com
Author: Digital Djaya
Description: Tema custom native untuk PT. Digital Djaya. Arah v1.3 "Ink & Signal": hero ink gelap dengan tipografi display besar, penomoran editorial, karya nyata sebagai bukti, palet biru-hijau logo.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: digitaldjaya
*/

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("assets/fonts/cabinet-grotesk-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("assets/fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("assets/fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("assets/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --dj-blue:#2f66d0;
  --dj-blue-deep:#1f4ba8;
  --dj-blue-tint:#eef3fc;
  --dj-green:#18a957;
  --dj-green-deep:#0f8a45;
  --dj-green-tint:#eaf7f0;
  --dj-ink:#111827;
  --dj-ink-soft:#374151;
  --dj-muted:#667085;
  --dj-paper:#f7f9fc;
  --dj-white:#ffffff;
  --dj-line:#e3e8f0;
  --dj-line-strong:#cbd5e3;
  /* Ink & Signal (v1.3) */
  --dj-night:#0b1120;
  --dj-night-2:#0e1730;
  --dj-night-line:rgba(255,255,255,.10);
  --dj-fog:#a9b7cf;
  --dj-fog-soft:#7e8ca6;
  --dj-signal:#4d8dff;
  --dj-signal-soft:rgba(77,141,255,.16);
  --dj-mint:#2bd477;
  --dj-mint-soft:rgba(43,212,119,.14);
  --dj-container:1180px;
  --dj-narrow:720px;
  --dj-r-sm:8px;
  --dj-r-md:12px;
  --dj-r-lg:18px;
  --dj-font-head:"Cabinet Grotesk","Plus Jakarta Sans",system-ui,sans-serif;
  --dj-font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --dj-ease:cubic-bezier(.22,.61,.21,1);
  --dj-header-h:70px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--dj-white);color:var(--dj-ink-soft);
  font-family:var(--dj-font-body);font-size:16.5px;line-height:1.65;
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip;}} /* clip tidak membuat scroll container -> sticky header tetap aman */
img{max-width:100%;height:auto;display:block;}
a{color:var(--dj-blue);text-decoration:none;transition:color .18s var(--dj-ease);}
a:hover{color:var(--dj-blue-deep);}
h1,h2,h3,h4{font-family:var(--dj-font-head);color:var(--dj-ink);line-height:1.12;margin:0 0 .6em;letter-spacing:-.015em;}
h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;}
h2{font-size:clamp(1.75rem,3vw,2.35rem);font-weight:700;text-wrap:balance;}
h3{font-size:1.18rem;font-weight:700;}
p{margin:0 0 1em;}
.container{max-width:var(--dj-container);margin:0 auto;padding:0 24px;}
.narrow{max-width:var(--dj-narrow);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--dj-ink);color:#fff;padding:.75rem 1rem;z-index:999;border-radius:0 0 var(--dj-r-sm) 0;}
.skip-link:focus{left:0;}
::selection{background:var(--dj-signal);color:#fff;}

/* ---------- Header: light editorial bar with glass on scroll ---------- */
.dj-header-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid var(--dj-line);transition:background .25s var(--dj-ease),box-shadow .25s var(--dj-ease);}
.site-header.is-scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 10px 30px -22px rgba(17,24,39,.35);--dj-header-h:62px;}
.site-header.dj-menu-open{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--dj-header-h);transition:height .25s var(--dj-ease);}
.site-branding{display:flex;align-items:center;}
.brand-link{display:inline-flex;align-items:center;}
.brand-logo,.site-branding .custom-logo{height:40px;width:auto;transition:height .25s var(--dj-ease);}
.site-header.is-scrolled .brand-logo,.site-header.is-scrolled .site-branding .custom-logo{height:34px;}
.desktop-nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;align-items:center;}
/* Anti-flicker mega menu (v1.5.8 / revisi v1.6.0): hanya li top-level yang
   dibentangkan setinggi header — selector child (>) agar li di dalam panel
   sub-menu tidak ikut terpengaruh. */
@media (min-width:1081px){
  .desktop-nav{display:flex;align-self:stretch;}
  .desktop-nav>ul{height:100%;align-items:stretch;}
  .desktop-nav>ul>li{display:flex;align-items:center;}
}
.desktop-nav a{color:var(--dj-ink-soft);font-weight:500;font-size:.95rem;position:relative;padding:.35rem 0;}
.desktop-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--dj-blue);transition:width .22s var(--dj-ease);}
.desktop-nav a:hover{color:var(--dj-ink);}
.desktop-nav a:hover::after,
.desktop-nav .current-menu-item>a::after,
.desktop-nav a[aria-current="page"]::after{width:100%;}
.desktop-nav a[aria-current="page"]{color:var(--dj-ink);font-weight:600;}
.header-actions{display:flex;align-items:center;gap:.75rem;}
.header-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--dj-ink);color:#fff;padding:.62rem 1.2rem;border-radius:var(--dj-r-sm);font-weight:600;font-size:.9rem;transition:background .2s var(--dj-ease),transform .2s var(--dj-ease);}
.header-cta .dj-icon{transition:transform .22s var(--dj-ease);}
.header-cta:hover{background:var(--dj-blue);color:#fff;transform:translateY(-1px);}
.header-cta:hover .dj-icon{transform:translate(2px,-2px);}
.header-cta:active{transform:scale(.98);}

.menu-toggle{display:none;background:none;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-sm);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.menu-bars{position:relative;width:18px;height:12px;display:block;}
.menu-bars i{position:absolute;left:0;width:100%;height:2px;background:var(--dj-ink);border-radius:2px;transition:transform .3s var(--dj-ease),opacity .2s,top .3s;}
.menu-bars i:nth-child(1){top:0;}
.menu-bars i:nth-child(2){top:5px;}
.menu-bars i:nth-child(3){top:10px;}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1){top:5px;transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3){top:5px;transform:rotate(-45deg);}

/* Mobile sheet menu with staggered reveal */
.mobile-nav-panel{position:fixed;inset:var(--dj-header-h) 0 0;z-index:99;background:var(--dj-white);display:flex;padding:1rem 24px 2rem;overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--dj-ease),transform .3s var(--dj-ease);}
.mobile-nav-panel.is-open{opacity:1;transform:none;}
.mobile-nav-panel[hidden]{display:none;}
.mobile-primary-nav{width:100%;}
.mobile-primary-nav ul{list-style:none;margin:0;padding:0;}
.mobile-primary-nav li{border-bottom:1px solid var(--dj-line);opacity:0;transform:translateY(10px);}
.mobile-nav-panel.is-open .mobile-primary-nav li{animation:djSlideIn .4s var(--dj-ease) forwards;animation-delay:calc(var(--i,0)*60ms);}
.mobile-primary-nav a{display:flex;justify-content:space-between;align-items:center;color:var(--dj-ink);font-family:var(--dj-font-head);font-weight:700;font-size:1.35rem;padding:1.05rem 0;}
.mobile-primary-nav a::after{content:"\2197";color:var(--dj-blue);font-size:1rem;}
.mobile-primary-nav a[aria-current="page"]{color:var(--dj-blue);}
.mobile-primary-nav a.mobile-cta{display:inline-flex;justify-content:center;align-items:center;gap:.6rem;margin-top:1.75rem;width:100%;padding:1.05rem 1.5rem;color:#fff;font-family:var(--dj-font-head);font-weight:700;font-size:1.05rem;letter-spacing:.01em;border-radius:var(--dj-r-md);box-shadow:0 16px 32px -18px rgba(77,141,255,.85);opacity:0;transform:translateY(10px);}
.mobile-primary-nav a.mobile-cta::after{content:none;}
.mobile-nav-panel.is-open .mobile-cta{animation:djSlideIn .4s var(--dj-ease) forwards;animation-delay:.42s;}
@keyframes djSlideIn{to{opacity:1;transform:none;}}
@media (max-width:900px){
  .desktop-nav{display:none;}
  .header-cta{display:none;}
  .menu-toggle{display:inline-flex;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.55rem;border-radius:var(--dj-r-sm);font-weight:600;font-size:.98rem;border:1px solid transparent;transition:background .2s var(--dj-ease),color .2s var(--dj-ease),border-color .2s var(--dj-ease),transform .2s var(--dj-ease);}
.btn:active{transform:scale(.98);}
.btn .dj-icon{transition:transform .22s var(--dj-ease);}
.btn:hover .dj-icon{transform:translate(2px,-2px);}
.btn-primary{background:var(--dj-blue);color:#fff;}
.btn-primary:hover{background:var(--dj-blue-deep);color:#fff;}
.btn-green{background:var(--dj-green);color:#fff;}
.btn-green:hover{background:var(--dj-green-deep);color:#fff;}
.btn-ghost{border-color:var(--dj-line-strong);color:var(--dj-ink);background:#fff;}
.btn-ghost:hover{border-color:var(--dj-ink);color:var(--dj-ink);}
.btn-invert{background:#fff;color:var(--dj-blue);}
.btn-invert:hover{background:var(--dj-paper);color:var(--dj-blue-deep);}
/* Interactive sweep: light band slides across on hover (21st.dev pattern) */
.btn-sweep{position:relative;overflow:hidden;isolation:isolate;}
.btn-sweep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 68%);transform:translateX(-120%);}
.btn-sweep:hover::after{animation:djSweep .85s var(--dj-ease);}
.btn-sweep:hover .dj-icon{transform:translateX(5px);}
@keyframes djSweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

/* ---------- Hero: INK — display type, real work as proof ---------- */
.hero--ink{
  position:relative;overflow:hidden;color:var(--dj-fog);
  padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(3rem,7vh,5rem);
  background:
    radial-gradient(1000px 560px at 86% -12%,var(--dj-signal-soft),transparent 62%),
    radial-gradient(820px 500px at -8% 112%,var(--dj-mint-soft),transparent 55%),
    linear-gradient(180deg,var(--dj-night) 0%,var(--dj-night-2) 100%);
}
.hero--ink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg,transparent 22%,#000 80%);mask-image:linear-gradient(100deg,transparent 22%,#000 80%);
}
.hero--ink::after{
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hero--ink .container{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.hero-grid>[data-hs]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--dj-ease),transform .75s var(--dj-ease);transition-delay:calc(var(--i,0)*120ms);}
.hero--ink.is-ready .hero-grid>[data-hs]{opacity:1;transform:none;}
.no-js .hero-grid>[data-hs]{opacity:1;transform:none;}

.eyebrow{
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;
  font-family:var(--dj-font-head);font-weight:700;font-size:.76rem;line-height:1.3;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dj-mint);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--dj-mint);flex:none;}

.hero--ink h1{
  color:#fff;font-size:clamp(2.4rem,4.9vw,4.25rem);line-height:1.05;letter-spacing:-.035em;
  margin:0 0 .5em;text-wrap:auto;
}
.hero--ink h1 .hl-line{display:block;}
.hero--ink h1 .hl{
  font-style:normal;color:var(--dj-signal);
  background:linear-gradient(100deg,var(--dj-signal) 25%,#9cc2ff 42%,#dcebff 50%,#9cc2ff 58%,var(--dj-signal) 75%);
  background-size:220% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:djShimmer 6s linear infinite;
}
@keyframes djShimmer{to{background-position:-220% 0;}}
.hero--ink .lead{font-size:1.13rem;color:var(--dj-fog);max-width:48ch;margin-bottom:1.8rem;}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;}
.hero--ink .btn-primary{background:var(--dj-signal);box-shadow:0 14px 34px -18px rgba(77,141,255,.9);}
.hero--ink .btn-primary:hover{background:#3b7bf0;color:#fff;}
.hero--ink .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;}
.hero--ink .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}
.hero-points{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;list-style:none;margin:1.8rem 0 0;padding:0;}
.hero-points li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--dj-fog);}
.hero-points .dj-icon{color:var(--dj-mint);flex:none;}

/* Hero media: real client work in a browser frame */
.hero-media{position:relative;}
.work-frame{
  position:relative;margin:0;border:1px solid var(--dj-night-line);border-radius:var(--dj-r-lg);
  overflow:hidden;background:var(--dj-night-2);transform:rotate(-1.6deg);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.85),0 30px 60px -40px rgba(77,141,255,.35);
  transition:transform .5s var(--dj-ease);
}
.hero-media:hover .work-frame{transform:rotate(-.6deg) translateY(-4px);}
.work-frame-bar{display:flex;align-items:center;gap:6px;padding:.65rem .9rem;border-bottom:1px solid var(--dj-night-line);background:rgba(255,255,255,.03);}
.work-frame-bar i{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.18);}
.work-frame-bar i:first-child{background:#ff5f57;}
.work-frame-bar i:nth-child(2){background:#febc2e;}
.work-frame-bar i:nth-child(3){background:#28c840;}
.work-frame-bar span{margin-left:.7rem;font-size:.72rem;letter-spacing:.08em;color:var(--dj-fog-soft);font-variant-numeric:tabular-nums;}
.work-frame img{width:100%;aspect-ratio:1000/758;object-fit:cover;object-position:top;}
.work-chip{
  position:absolute;left:-18px;bottom:86px;padding:.75rem 1.05rem;border-radius:var(--dj-r-md);
  background:rgba(14,23,48,.92);border:1px solid var(--dj-night-line);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.9);transform:rotate(1.2deg);
}
.work-chip strong{display:block;font-family:var(--dj-font-head);color:#fff;font-size:1rem;line-height:1.2;}
.work-chip span{font-size:.76rem;color:var(--dj-fog-soft);}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin-top:1.4rem;flex-wrap:wrap;}
.hero-caption{margin:0;font-size:.85rem;color:var(--dj-fog-soft);}
.hero-wa{display:inline-flex;align-items:center;gap:.65rem;color:#fff;transition:color .2s var(--dj-ease);}
.hero-wa .wa-ic{width:38px;height:38px;border-radius:999px;background:var(--dj-mint-soft);color:var(--dj-mint);display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s var(--dj-ease),color .2s var(--dj-ease);}
.hero-wa strong{display:block;font-family:var(--dj-font-head);font-size:.95rem;line-height:1.25;color:#fff;transition:color .2s var(--dj-ease);}
.hero-wa small{display:block;font-size:.78rem;color:var(--dj-fog-soft);font-variant-numeric:tabular-nums;margin-top:.1rem;}
.hero-wa:hover .wa-ic{background:var(--dj-mint);color:var(--dj-night);}
.hero-wa:hover strong{color:var(--dj-mint);}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:2;margin-top:1rem;}
  .work-chip{left:10px;bottom:76px;}
}

/* ---------- Services ticker: two kinetic rows, opposite directions ---------- */
.dj-ticker{background:#080d19;overflow:hidden;padding:1.55rem 0;border-top:1px solid var(--dj-night-line);}
.dj-ticker-row{overflow:hidden;}
.dj-ticker-row+.dj-ticker-row{margin-top:1.05rem;}
.dj-ticker-track{display:flex;width:max-content;animation:djTickerLeft 30s linear infinite;}
.dj-ticker-row--rev .dj-ticker-track{animation:djTickerRight 34s linear infinite;}
.dj-ticker:hover .dj-ticker-track{animation-play-state:paused;}
@keyframes djTickerLeft{to{transform:translateX(-20%)}}
@keyframes djTickerRight{from{transform:translateX(-20%)}to{transform:translateX(0)}}
.dj-ticker-group{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:none;}
.dj-ticker-item{display:flex;align-items:center;white-space:nowrap;}
.dj-ticker-item::after{content:"";width:8px;height:8px;flex:none;background:var(--dj-mint);transform:rotate(45deg);margin:0 clamp(1.4rem,3vw,2.4rem);}
.dj-ticker-item:nth-child(even)::after{background:var(--dj-signal);}
.dj-ticker-item a{font-family:var(--dj-font-head);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,2.3vw,1.7rem);letter-spacing:.02em;line-height:1.25;color:#fff;transition:color .2s var(--dj-ease);}
.dj-ticker-item a:hover{color:var(--dj-mint);}
.dj-ticker-row--rev .dj-ticker-item a{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);}
.dj-ticker-row--rev .dj-ticker-item a:hover{color:var(--dj-mint);-webkit-text-stroke-color:transparent;}
@supports not (-webkit-text-stroke:1px #fff){
  .dj-ticker-row--rev .dj-ticker-item a{color:rgba(255,255,255,.5);}
  .dj-ticker-row--rev .dj-ticker-item a:hover{color:var(--dj-mint);}
}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,8vh,5.5rem) 0;}
.section-alt{background:var(--dj-paper);}
.section-head{max-width:680px;margin-bottom:clamp(2rem,4vh,3rem);}
.section-head h2{margin-bottom:.5em;}
.section-head p{color:var(--dj-muted);font-size:1.05rem;}
.section-foot{margin-top:clamp(1.75rem,4vh,2.5rem);text-align:center;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* Editorial numbered section head (v1.3) */
.sec-head{max-width:780px;margin-bottom:clamp(2.2rem,4.5vh,3.4rem);}
.sec-no{
  display:flex;align-items:center;gap:.85rem;margin:0 0 1rem;
  font-family:var(--dj-font-head);font-weight:800;font-size:.76rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dj-blue);
}
.sec-no::after{content:"";height:1px;width:64px;background:var(--dj-line-strong);}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.025em;margin-bottom:.4em;}
.sec-head p{color:var(--dj-muted);font-size:1.05rem;max-width:62ch;}

/* ---------- Clients marquee: two rows, opposite directions, edge fade ---------- */
.clients{padding:3.4rem 0 3.6rem;border-bottom:1px solid var(--dj-line);}
.clients-label{margin:0 0 2.1rem;text-align:center;font-family:var(--dj-font-head);font-weight:700;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dj-muted);}
.clients-marquee{position:relative;display:grid;gap:1.9rem;}
.clients-marquee::before,.clients-marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,10vw,150px);z-index:2;pointer-events:none;}
.clients-marquee::before{left:0;background:linear-gradient(90deg,var(--dj-white) 8%,rgba(255,255,255,0));}
.clients-marquee::after{right:0;background:linear-gradient(-90deg,var(--dj-white) 8%,rgba(255,255,255,0));}
.clients-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.clients-track{display:flex;width:max-content;animation:djClientsLeft 46s linear infinite;will-change:transform;}
.clients-row--rev .clients-track{animation:djClientsRight 52s linear infinite;}
.clients-marquee:hover .clients-track{animation-play-state:paused;}
@keyframes djClientsLeft{to{transform:translateX(-25%)}}
@keyframes djClientsRight{from{transform:translateX(-25%)}to{transform:translateX(0)}}
.clients-group{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:none;}
.client-item{display:flex;align-items:center;justify-content:center;padding:.35rem clamp(1.6rem,3.2vw,2.9rem);}
.client-item img{height:33px;width:auto;max-width:150px;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity .25s var(--dj-ease),filter .25s var(--dj-ease),transform .25s var(--dj-ease);}
.client-item img:hover{opacity:1;filter:none;transform:translateY(-2px);}
@media (max-width:640px){
  .clients{padding:2.6rem 0 2.8rem;}
  .clients-marquee{gap:1.4rem;}
  .client-item img{height:26px;max-width:110px;}
}

/* ---------- Approach: numbered editorial rows + cursor spotlight ---------- */
.approach-item{
  display:grid;grid-template-columns:88px .95fr 1.05fr;gap:.5rem 2.2rem;align-items:baseline;
  padding:2.1rem 0;border-top:1px solid var(--dj-line-strong);transition:background .25s var(--dj-ease);
  position:relative;
}
.approach-item::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--dj-ease);background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--dj-signal-soft),transparent 72%);}
.approach-item:hover::before{opacity:1;}
.approach-item:last-child{border-bottom:1px solid var(--dj-line-strong);}
.approach-no{
  font-family:var(--dj-font-head);font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-.02em;
  color:var(--dj-line-strong);transition:color .3s var(--dj-ease);
}
.approach-item:hover .approach-no{color:var(--dj-signal);}
.approach-item h3{margin:0;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.015em;}
.approach-item p{margin:0;color:var(--dj-muted);font-size:.99rem;max-width:52ch;}
@media (max-width:900px){
  .approach-item{grid-template-columns:56px 1fr;row-gap:.4rem;}
  .approach-item p{grid-column:2;}
  .approach-no{font-size:1.5rem;}
}

/* ---------- Services: numbered rows with ink hover-invert ---------- */
.service-rows{border-top:1px solid var(--dj-line-strong);}
.service-row{
  display:grid;grid-template-columns:72px 1.05fr 1.6fr auto;gap:1.6rem;align-items:center;
  padding:1.7rem 1rem;margin:0 -1rem;border-bottom:1px solid var(--dj-line-strong);border-radius:var(--dj-r-sm);
  transition:background .28s var(--dj-ease);
}
.service-no{font-family:var(--dj-font-head);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.01em;color:var(--dj-line-strong);transition:color .28s var(--dj-ease);}
.service-row h3{margin:0;font-size:1.22rem;transition:color .28s var(--dj-ease);}
.service-row .desc{margin:0;color:var(--dj-muted);font-size:.97rem;transition:color .28s var(--dj-ease);}
.service-row .go{width:44px;height:44px;border-radius:999px;border:1px solid var(--dj-line-strong);display:flex;align-items:center;justify-content:center;color:var(--dj-ink);background:#fff;transition:all .28s var(--dj-ease);flex:none;}
.service-row .go .dj-icon{transition:transform .22s var(--dj-ease);}
.service-row:hover{background:var(--dj-night);}
.service-row:hover .service-no{color:var(--dj-mint);}
.service-row:hover h3{color:#fff;}
.service-row:hover .desc{color:var(--dj-fog);}
.service-row:hover .go{background:var(--dj-signal);border-color:var(--dj-signal);color:#fff;}
.service-row:hover .go .dj-icon{transform:translate(2px,-2px);}
.service-row.featured .service-no{color:var(--dj-signal);}
@media (max-width:768px){
  .service-row{grid-template-columns:48px 1fr auto;grid-template-areas:"no title go" "desc desc desc";padding:1.4rem .75rem;margin:0 -.75rem;}
  .service-row .service-no{grid-area:no;font-size:1.3rem;}
  .service-row h3{grid-area:title;}
  .service-row .desc{grid-area:desc;}
  .service-row .go{grid-area:go;}
}

/* ---------- Industries: split with visual + rows ---------- */
.industries-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.industry-visual img{border:1px solid var(--dj-line);border-radius:var(--dj-r-md);width:100%;height:auto;background:var(--dj-white);box-shadow:0 28px 60px -38px rgba(31,75,168,.38);}
.industry-rows{display:flex;flex-direction:column;}
.industry-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem .75rem;margin:0 -.75rem;border-top:1px solid var(--dj-line-strong);border-radius:var(--dj-r-sm);transition:background .22s var(--dj-ease);}
.industry-row:last-child{border-bottom:1px solid var(--dj-line-strong);}
.industry-row:hover{background:var(--dj-paper);}
.section-alt .industry-row:hover{background:var(--dj-white);}
.industry-row h3{margin:0;font-size:1.3rem;}
.industry-row p{margin:.3rem 0 0;color:var(--dj-muted);font-size:.95rem;}
.industry-row .go{flex:none;color:var(--dj-blue);transition:transform .2s var(--dj-ease),color .2s var(--dj-ease);}
.industry-row:hover .go{color:var(--dj-blue-deep);transform:translateX(4px);}
@media (max-width:900px){.industries-grid{grid-template-columns:1fr;}.industry-visual{order:-1;max-width:520px;}}

/* ---------- Process: alternating vertical timeline ---------- */
.process-list{position:relative;display:block;max-width:980px;margin:0 auto;padding:1.2rem 0 .4rem;}
.process-list::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-1px);background:linear-gradient(180deg,transparent 0%,var(--dj-line-strong) 7%,var(--dj-line-strong) 93%,transparent 100%);}
.process-step{position:relative;width:calc(50% - 48px);padding:0 0 2.9rem;background:transparent;}
.process-step:last-child{padding-bottom:.4rem;}
.process-step:nth-child(even){margin-left:calc(50% + 48px);}
.process-step:nth-child(odd){text-align:right;}
.process-step::after{content:"";position:absolute;top:5px;width:13px;height:13px;border-radius:50%;box-sizing:border-box;background:var(--dj-paper);border:2px solid var(--dj-line-strong);transition:background .25s var(--dj-ease),border-color .25s var(--dj-ease),box-shadow .25s var(--dj-ease);}
.process-step:nth-child(odd)::after{right:-48px;transform:translateX(50%);}
.process-step:nth-child(even)::after{left:-48px;transform:translateX(-50%);}
.process-step:hover::after{background:var(--dj-green);border-color:var(--dj-green);box-shadow:0 0 0 5px var(--dj-green-tint);}
.is-visible .process-step::after,.no-js .process-step::after{border-color:var(--dj-green);}
.process-step .verb{font-family:var(--dj-font-head);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--dj-green);display:block;margin-bottom:.7rem;transition:letter-spacing .3s var(--dj-ease);}
.process-step:hover .verb{letter-spacing:.2em;}
.process-step h3{font-size:1.22rem;margin-bottom:.4em;transition:color .2s var(--dj-ease);}
.process-step:hover h3{color:var(--dj-blue-deep);}
.process-step p{margin:0;color:var(--dj-muted);font-size:.95rem;}
@media (max-width:800px){
  .process-list::before{left:6px;transform:none;}
  .process-step,.process-step:nth-child(even){width:auto;margin-left:36px;text-align:left;}
  .process-step:nth-child(odd){text-align:left;}
  .process-step:nth-child(odd)::after,.process-step:nth-child(even)::after{left:-35.5px;right:auto;transform:none;}
}

/* ---------- Portfolio: featured + varied grid, clickable ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;}
.work{grid-column:span 2;display:flex;flex-direction:column;color:inherit;}
.work.featured{grid-column:span 4;grid-row:span 2;}
.work .shot{border:1px solid var(--dj-line);border-radius:var(--dj-r-md);overflow:hidden;background:var(--dj-paper);}
.work .shot img{width:100%;object-fit:cover;object-position:top;transition:object-position .9s var(--dj-ease);}
.work:not(.featured) .shot img{aspect-ratio:16/11;}
.work.featured .shot{position:relative;flex:1;}
.work.featured .shot img{position:absolute;inset:0;width:100%;height:100%;}
.work:hover .shot img,.work:focus-visible .shot img{object-position:bottom;transition:object-position 3.4s linear;}
.work:hover .shot{border-color:var(--dj-line-strong);}
.work-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.85rem .1rem 0;}
.work-meta strong{font-family:var(--dj-font-head);color:var(--dj-ink);font-size:1.05rem;transition:color .18s var(--dj-ease);}
.work:hover .work-meta strong{color:var(--dj-blue);}
.work-meta span{color:var(--dj-muted);font-size:.85rem;}
@media (max-width:900px){
  .work{grid-column:span 3;}
  .work.featured{grid-column:span 6;grid-row:auto;}
  .work.featured .shot{flex:none;}
  .work.featured .shot img{position:static;height:auto;aspect-ratio:16/9;}
}
@media (max-width:600px){
  .portfolio-grid{grid-template-columns:1fr;}
  .work,.work.featured{grid-column:auto;grid-row:auto;}
  .work.featured .shot img{aspect-ratio:16/10;}
}

/* ---------- Testimonials (hidden template, v1.3) ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.quote-card{
  margin:0;background:#fff;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);
  padding:1.9rem;display:flex;flex-direction:column;gap:1.1rem;position:relative;
}
.quote-card::before{content:"\201C";font-family:var(--dj-font-head);font-weight:800;font-size:3.4rem;line-height:.6;color:var(--dj-signal);display:block;}
.quote-card blockquote{margin:0;color:var(--dj-ink);font-size:1.02rem;line-height:1.6;flex-grow:1;}
.quote-card figcaption{display:flex;flex-direction:column;gap:.1rem;}
.quote-card cite{font-style:normal;font-weight:700;font-family:var(--dj-font-head);color:var(--dj-ink);font-size:.95rem;}
.quote-card figcaption span{color:var(--dj-muted);font-size:.85rem;}
@media (max-width:900px){.quote-grid{grid-template-columns:1fr;}}

/* ---------- Plans: facilities only, price by consultation ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;}
.plan{position:relative;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);padding:1.75rem;display:flex;flex-direction:column;background:#fff;transition:transform .25s var(--dj-ease),box-shadow .25s var(--dj-ease),border-color .25s var(--dj-ease);}
.plan:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(17,24,39,.4);}
.plan .plan-note{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--dj-signal);padding:.34rem .75rem;border-radius:999px;margin-bottom:.9rem;}
.plan h3{font-size:1.35rem;margin-bottom:.3em;}
.plan .plan-desc{color:var(--dj-muted);font-size:.92rem;margin:0 0 1rem;}
.plan ul{list-style:none;margin:0 0 1.4rem;padding:0;flex-grow:1;}
.plan li{display:flex;gap:.6rem;align-items:flex-start;padding:.42rem 0;color:var(--dj-ink-soft);font-size:.95rem;}
.plan li .dj-icon{flex:none;color:var(--dj-green);margin-top:3px;}
.plan .btn{align-self:stretch;margin-top:auto;}
/* Featured plan: Ink & Signal dark card (lifted focal point) */
.plan.featured{overflow:hidden;background:var(--dj-night);border-color:rgba(255,255,255,.14);box-shadow:0 30px 70px -34px rgba(11,17,32,.6);}
.plan.featured::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 220px at 88% -12%,var(--dj-signal-soft),transparent 60%),radial-gradient(300px 180px at -6% 108%,var(--dj-mint-soft),transparent 55%);}
.plan.featured::after{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.plan.featured>*{position:relative;z-index:1;}
.plan.featured h3{color:#fff;}
.plan.featured .plan-desc{color:var(--dj-fog);}
.plan.featured li{color:var(--dj-fog);}
.plan.featured li .dj-icon{color:var(--dj-mint);}
.plan.featured .btn-primary{background:var(--dj-signal);box-shadow:0 14px 30px -16px rgba(77,141,255,.8);}
.plan.featured .btn-primary:hover{background:#3b7bf0;color:#fff;}
.plan.featured:hover{transform:translateY(-8px);box-shadow:0 40px 84px -36px rgba(11,17,32,.75);}
@media (min-width:901px){
  .pricing-grid{padding-top:20px;}
  .plan.featured{margin-top:-20px;}
}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
/* Premium shine border: rotating conic ring (21st.dev shine-border pattern) */
@property --dj-shine-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.plan.featured .plan-shine{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--dj-shine-angle),transparent 0deg,rgba(77,141,255,.95) 42deg,transparent 105deg,transparent 180deg,rgba(43,212,119,.9) 226deg,transparent 288deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:djShineSpin 7s linear infinite;
}
@keyframes djShineSpin{to{--dj-shine-angle:360deg;}}
/* Plan comparison table */
.plan-compare{margin-top:3.4rem;max-width:960px;margin-left:auto;margin-right:auto;}
.plan-compare-title{font-size:1.2rem;text-align:center;margin:0 0 1.5rem;}
.plan-compare-scroll{overflow-x:auto;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);background:#fff;}
.plan-compare-table{width:100%;border-collapse:collapse;min-width:620px;font-size:.94rem;}
.plan-compare-table th,.plan-compare-table td{padding:.82rem 1.05rem;text-align:center;border-bottom:1px solid var(--dj-line);}
.plan-compare-table thead th{font-family:var(--dj-font-head);font-weight:700;color:var(--dj-ink);background:var(--dj-paper);border-bottom:1px solid var(--dj-line-strong);}
.plan-compare-table thead th:first-child{text-align:left;}
.plan-compare-table tbody th{text-align:left;font-weight:500;color:var(--dj-ink-soft);}
.plan-compare-table tbody tr:last-child th,.plan-compare-table tbody tr:last-child td{border-bottom:none;}
.plan-compare-table tbody tr{transition:background .18s var(--dj-ease);}
.plan-compare-table tbody tr:hover{background:var(--dj-paper);}
.plan-compare-table .is-featured{background:var(--dj-signal-soft);}
.plan-compare-table thead th.is-featured{color:var(--dj-blue-deep);background:linear-gradient(180deg,var(--dj-blue-tint),var(--dj-paper));}
.plan-compare-table tbody tr:hover .is-featured{background:rgba(77,141,255,.22);}
.cmp-yes{display:inline-flex;color:var(--dj-green);}
.cmp-no{color:var(--dj-line-strong);font-weight:700;}
@media (max-width:640px){.plan-compare{margin-top:2.6rem;}}

/* ---------- Estimator: interactive package picker ---------- */
.estimator{background:linear-gradient(180deg,var(--dj-white) 0%,var(--dj-blue-tint) 130%);}
.est-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:2.5rem;align-items:start;}
.est-q{border:0;margin:0 0 1.75rem;padding:0;}
.est-q legend{font-family:var(--dj-font-head);font-weight:700;color:var(--dj-ink);font-size:1.05rem;padding:0;margin-bottom:.85rem;line-height:1.4;}
.est-opts{display:flex;flex-wrap:wrap;gap:.6rem;}
.est-opt{appearance:none;border:1px solid var(--dj-line-strong);background:#fff;border-radius:999px;padding:.62rem 1.15rem;font-family:inherit;font-size:.93rem;font-weight:500;color:var(--dj-ink-soft);cursor:pointer;transition:border-color .2s var(--dj-ease),background .2s var(--dj-ease),color .2s var(--dj-ease),transform .2s var(--dj-ease);}
.est-opt:hover{border-color:var(--dj-blue);color:var(--dj-blue);}
.est-opt:active{transform:scale(.97);}
.est-opt.is-selected{background:var(--dj-blue);border-color:var(--dj-blue);color:#fff;}
.est-reset{background:none;border:0;padding:0;color:var(--dj-blue);font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit;}
.est-result{position:sticky;top:calc(var(--dj-header-h) + 24px);border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);background:#fff;padding:1.9rem;box-shadow:0 24px 50px -34px rgba(31,75,168,.4);}
.est-result-icon{width:52px;height:52px;border-radius:var(--dj-r-md);background:var(--dj-blue-tint);color:var(--dj-blue);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.est-default p{color:var(--dj-muted);font-size:.98rem;margin:0;}
.est-match{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#fff;background:var(--dj-green);padding:.32rem .75rem;border-radius:999px;margin-bottom:.9rem;}
.est-package h3{font-size:1.5rem;margin-bottom:.35em;}
.est-desc{color:var(--dj-muted);margin-bottom:1.3rem;}
.est-actions{display:flex;gap:.7rem;flex-wrap:wrap;}
@media (max-width:900px){
  .est-grid{grid-template-columns:1fr;}
  .est-result{position:static;}
}

/* ---------- FAQ: full-width rows ---------- */
/* ---------- FAQ: sticky intro + animated accordion ---------- */
.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start;}
.faq-intro{position:sticky;top:110px;}
.faq-list{max-width:none;}
.faq-item{border-bottom:1px solid var(--dj-line-strong);}
.faq-item:first-child{border-top:1px solid var(--dj-line-strong);}
.faq-q{margin:0;}
.faq-q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;background:none;border:0;padding:1.3rem 0;cursor:pointer;font-family:var(--dj-font-head);font-weight:700;font-size:1.06rem;line-height:1.4;color:var(--dj-ink);text-align:left;letter-spacing:-.01em;transition:color .2s var(--dj-ease);}
.faq-q button:hover{color:var(--dj-blue);}
.faq-q button:focus-visible{outline:2px solid var(--dj-blue);outline-offset:4px;border-radius:4px;}
.faq-ic{position:relative;width:15px;height:15px;flex:none;}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--dj-blue);border-radius:2px;transition:transform .35s var(--dj-ease);}
.faq-ic::before{left:0;top:6.5px;width:15px;height:2px;}
.faq-ic::after{left:6.5px;top:0;width:2px;height:15px;}
.faq-item.is-open .faq-ic::after{transform:rotate(90deg) scaleY(0);}
.faq-item.is-open .faq-ic::before{transform:rotate(180deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--dj-ease);}
.faq-a>div{overflow:hidden;}
.faq-a p{margin:0;padding:0 2.2rem 1.35rem 0;color:var(--dj-muted);max-width:70ch;}
.faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-item.is-open .faq-q button{color:var(--dj-blue);}
@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:1.6rem;}
  .faq-intro{position:static;}
}

/* ---------- CTA band: solid blue with fine grain ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--dj-night);border:1px solid var(--dj-night-line);border-radius:var(--dj-r-lg);padding:clamp(2.2rem,5vh,3.8rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 90% -20%,var(--dj-signal-soft),transparent 60%),radial-gradient(500px 260px at 0% 120%,var(--dj-mint-soft),transparent 55%);}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.cta-band>*{position:relative;z-index:1;}
.cta-band h2{color:#fff;margin:0 0 .35em;font-size:clamp(1.6rem,2.8vw,2.3rem);}
.cta-band p{color:var(--dj-fog);margin:0;}
.cta-band .btn-invert{background:var(--dj-signal);color:#fff;}
.cta-band .btn-invert:hover{background:#3b7bf0;color:#fff;}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:start;}
/* Info rail kiri (v1.5.3) */
.ct-label{font-family:var(--dj-font-mono,ui-monospace,monospace);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dj-blue);margin:0 0 .8rem;}
.ct-info h2{font-family:var(--dj-font-head);font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.25;margin:0 0 .7rem;color:var(--dj-ink);}
.ct-sub{margin:0;color:var(--dj-muted);font-size:.99rem;line-height:1.65;max-width:46ch;}
.ct-rows{display:grid;gap:.7rem;margin:1.7rem 0 0;}
.ct-row{
  display:flex;align-items:center;gap:1rem;padding:.95rem 1.1rem;color:inherit;text-decoration:none;
  border:1px solid var(--dj-line);border-radius:var(--dj-r-md);background:#fff;
  transition:border-color .22s var(--dj-ease),box-shadow .22s var(--dj-ease),transform .22s var(--dj-ease);
}
.ct-row:hover{border-color:var(--dj-blue);box-shadow:0 14px 30px -24px rgba(31,75,168,.55);transform:translateX(4px);}
.ct-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--dj-r-sm);background:var(--dj-signal-soft);color:var(--dj-blue);transition:background .22s var(--dj-ease),color .22s var(--dj-ease);}
.ct-row:hover .ct-ic{background:var(--dj-blue);color:#fff;}
.ct-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.ct-body strong{font-family:var(--dj-font-head);font-size:.98rem;color:var(--dj-ink);line-height:1.2;}
.ct-body>span{font-size:.9rem;color:var(--dj-muted);overflow-wrap:anywhere;}
.ct-go{margin-left:auto;flex:none;color:var(--dj-line-strong);transition:color .22s var(--dj-ease),transform .22s var(--dj-ease);}
.ct-row:hover .ct-go{color:var(--dj-blue);transform:translateX(3px);}
.ct-promises{list-style:none;margin:1.5rem 0 0;padding:1.15rem 1.25rem;border:1px solid var(--dj-line);border-radius:var(--dj-r-md);background:var(--dj-paper);display:grid;gap:.6rem;}
.ct-promises li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.55;color:var(--dj-muted);}
.ct-promises svg{color:var(--dj-green);flex:none;margin-top:3px;}
.ct-promises a{color:var(--dj-blue);text-decoration:underline;text-underline-offset:3px;}
.ct-promises a:hover{color:var(--dj-signal);}
.contact-form{display:flex;flex-direction:column;gap:1rem;padding:1.8rem;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);background:#fff;box-shadow:0 24px 50px -38px rgba(17,24,39,.35);}
.contact-form label{font-weight:600;font-size:.9rem;color:var(--dj-ink);}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;max-width:100%;padding:.75rem 1rem;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-sm);font-family:inherit;font-size:1rem;background:#fff;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--dj-blue);outline-offset:1px;border-color:var(--dj-blue);}
.form-note{font-size:.82rem;color:var(--dj-muted);}
.form-success{background:var(--dj-green-tint);color:var(--dj-green-deep);padding:1rem;border-radius:var(--dj-r-sm);}
.form-error{background:#fdecec;color:#a3271f;padding:1rem;border-radius:var(--dj-r-sm);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
@media (max-width:600px){.contact-grid{gap:2rem;}.contact-form{padding:1.25rem;}.contact-map iframe{height:320px;}}
.contact-map-section{padding-top:0;}
.contact-map{border:1px solid var(--dj-line);border-radius:var(--dj-r-md);overflow:hidden;box-shadow:0 24px 50px -36px rgba(31,75,168,.35);}
.contact-map iframe{display:block;width:100%;height:420px;border:0;}

/* ---------- Footer: ink mega-footer ---------- */
.site-footer{background:var(--dj-ink);color:#9aa3b2;padding:clamp(3rem,6vh,4.5rem) 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.7fr .9fr 1fr .85fr 1.35fr;gap:2.2rem;margin-bottom:3rem;}
.footer-logo{height:34px;width:auto;margin-bottom:1rem;}
.footer-brand p{color:#9aa3b2;max-width:32ch;font-size:.95rem;margin-bottom:1.25rem;}
.footer-social{display:flex;gap:.6rem;}
.footer-social a{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#cdd3dd;transition:all .2s var(--dj-ease);}
.footer-social a:hover{background:var(--dj-green);border-color:var(--dj-green);color:#fff;transform:translateY(-2px);}
.footer-col h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:1.1rem;font-weight:700;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:.55rem;font-size:.94rem;}
.footer-col a{color:#9aa3b2;}
.footer-col a:hover{color:#fff;}
.footer-col .dj-icon{vertical-align:-3px;margin-right:.55rem;color:var(--dj-green);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.84rem;color:#7b8494;}
.footer-bottom a{color:#9aa3b2;display:inline-flex;align-items:center;gap:.4rem;}
.footer-bottom a:hover{color:#fff;}
.back-to-top .dj-icon{transform:rotate(-45deg);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;}}

/* WhatsApp FAB */
.whatsapp-fab{position:fixed;bottom:1.4rem;right:1.4rem;background:var(--dj-green);color:#fff;border-radius:999px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(15,138,69,.6);z-index:60;transition:transform .22s var(--dj-ease);}
.whatsapp-fab:hover{transform:scale(1.07);color:#fff;}

/* ---------- Page header / content / 404 ---------- */
.page-header{border-bottom:1px solid var(--dj-line);padding:clamp(2.5rem,5vh,3.5rem) 0;}
.page-header h1{margin-bottom:.4rem;font-size:clamp(2rem,4vw,3rem);}
.breadcrumb{font-size:.85rem;color:var(--dj-muted);}
.breadcrumb a{color:var(--dj-muted);}
.breadcrumb a:hover{color:var(--dj-blue);}
.entry-content{padding:clamp(2.5rem,6vh,4rem) 0;}
.entry-content .container{max-width:var(--dj-narrow);}
.post-tags{font-size:.85rem;color:var(--dj-muted);margin-top:1.5rem;}
.post-tags a{color:var(--dj-blue);}
.error-404{padding:clamp(4rem,10vh,6rem) 0;text-align:center;}
.error-404 .code{font-family:var(--dj-font-head);font-weight:800;font-size:4.5rem;color:var(--dj-blue);margin:0;line-height:1;}

/* ---------- Shared card for archive/index ---------- */
.card{background:#fff;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);padding:1.5rem;transition:transform .25s var(--dj-ease),box-shadow .25s var(--dj-ease);}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(17,24,39,.35);}
.card .icon{width:42px;height:42px;border-radius:var(--dj-r-sm);background:var(--dj-paper);border:1px solid var(--dj-line);display:flex;align-items:center;justify-content:center;color:var(--dj-blue);margin-bottom:.9rem;font-size:1.2rem;}
.menu-fallback-notice{list-style:none;margin:0;padding:0;color:var(--dj-muted);}

/* ---------- Reveal (subtle, editorial) ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--dj-ease),transform .6s var(--dj-ease);}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--dj-ease),transform .6s var(--dj-ease);transition-delay:calc(var(--i,0)*70ms);}
[data-reveal-stagger].is-visible>*{opacity:1;transform:none;}
.no-js [data-reveal],.no-js [data-reveal-stagger]>*{opacity:1;transform:none;}

/* ---------- Focus & motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--dj-signal);outline-offset:2px;border-radius:4px;}
.hero--ink a:focus-visible,.hero--ink button:focus-visible{outline-color:var(--dj-mint);}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  [data-reveal],[data-reveal-stagger]>*,.hero-grid>[data-hs]{opacity:1;transform:none;}
  .mobile-nav-panel.is-open .mobile-primary-nav li,.mobile-nav-panel.is-open .mobile-cta{opacity:1;transform:none;}
  .work .shot img{transition:none;}
  .work:hover .shot img,.work:focus-visible .shot img{object-position:top;}
  .dj-ticker-track{animation:none;}
  .clients-track{animation:none;}
  .clients-row{overflow-x:auto;}
  .hero--ink h1 .hl{animation:none;}
  .btn-sweep:hover::after{animation:none;}
  .plan.featured .plan-shine{animation:none;}
  .faq-a{transition:none;}
  .work-frame{transform:none;}
}

/* ---------- Service pages (v1.3.7): hero, spotlight cards, prose, cross-links ---------- */
.svc-hero{padding:clamp(3rem,7vh,5rem) 0 clamp(2.2rem,5vh,3.2rem);}
.svc-hero .breadcrumb{margin-bottom:1.6rem;}
.svc-eyebrow{font-family:var(--dj-font-mono,ui-monospace,monospace);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dj-blue);margin:0 0 .9rem;}
.svc-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1.08;max-width:20ch;}
.svc-lead{margin:1.2rem 0 0;color:var(--dj-muted);font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.65;max-width:62ch;}
.svc-bullets{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:1.4rem 0 0;padding:0;}
.svc-bullets li{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--dj-ink);font-weight:600;}
.svc-bullets svg{color:var(--dj-blue);flex:none;}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.svc-grid-3{grid-template-columns:repeat(3,1fr);}
.svc-card{
  position:relative;display:block;background:#fff;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);
  padding:1.9rem 1.7rem;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .25s var(--dj-ease),box-shadow .25s var(--dj-ease),border-color .25s var(--dj-ease);
}
.svc-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--dj-ease);background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--dj-signal-soft),transparent 72%);}
.svc-card:hover::before{opacity:1;}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -26px rgba(17,24,39,.4);border-color:var(--dj-blue);}
.svc-card-no{display:block;font-family:var(--dj-font-head);font-weight:800;font-size:1.7rem;line-height:1;color:var(--dj-line-strong);transition:color .3s var(--dj-ease);margin-bottom:1rem;}
.svc-card:hover .svc-card-no{color:var(--dj-signal);}
.svc-card h2{margin:0 0 .6rem;font-size:clamp(1.15rem,1.8vw,1.35rem);letter-spacing:-.01em;}
.svc-card p{margin:0;color:var(--dj-muted);font-size:.95rem;line-height:1.6;}
.svc-card-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-weight:700;font-size:.9rem;color:var(--dj-blue);}
.svc-card-static{cursor:default;}
@media (max-width:980px){.svc-grid,.svc-grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:680px){.svc-grid,.svc-grid-3{grid-template-columns:1fr;}}

.service-prose-wrap{padding:clamp(2.5rem,6vh,4rem) 0;}
.service-prose{max-width:var(--dj-narrow);font-size:1.02rem;line-height:1.75;color:var(--dj-ink);}
.service-prose h2{font-family:var(--dj-font-head);font-size:clamp(1.45rem,2.4vw,1.85rem);letter-spacing:-.015em;margin:2.6rem 0 .9rem;line-height:1.25;}
.service-prose h2:first-child{margin-top:0;}
.service-prose h3{font-family:var(--dj-font-head);font-size:1.15rem;margin:2rem 0 .6rem;}
.service-prose p{margin:0 0 1.15rem;color:var(--dj-muted);}
.service-prose strong{color:var(--dj-ink);}
.service-prose a{color:var(--dj-blue);text-decoration:underline;text-underline-offset:3px;transition:color .2s var(--dj-ease);}
.service-prose a:hover{color:var(--dj-signal);}
.service-prose ul,.service-prose ol{margin:0 0 1.3rem;padding-left:1.2rem;color:var(--dj-muted);}
.service-prose li{margin-bottom:.45rem;}
.service-prose li::marker{color:var(--dj-blue);font-weight:700;}

.svc-xlinks{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;border-top:1px solid var(--dj-line-strong);}
.svc-xlink{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem .4rem;
  border-bottom:1px solid var(--dj-line-strong);text-decoration:none;color:var(--dj-ink);
  font-family:var(--dj-font-head);font-weight:700;font-size:1.05rem;transition:color .2s var(--dj-ease),padding-left .25s var(--dj-ease);
}
.svc-xlink svg{color:var(--dj-line-strong);transition:color .2s var(--dj-ease),transform .25s var(--dj-ease);}
.svc-xlink:hover{color:var(--dj-blue);padding-left:.9rem;}
.svc-xlink:hover svg{color:var(--dj-blue);transform:translateX(3px);}
@media (max-width:680px){.svc-xlinks{grid-template-columns:1fr;}}

/* ---------- Hub v1.3.8: text rotate, bento grid, stats, tabs ---------- */
.dj-rotate{display:inline-block;color:var(--dj-blue);position:relative;white-space:nowrap;}
.dj-rotate::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--dj-signal);transform-origin:left;animation:dj-underline 2.8s var(--dj-ease) infinite;}
@keyframes dj-underline{0%{transform:scaleX(0);}45%{transform:scaleX(1);}80%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}
.dj-rotate.is-switching{animation:dj-rotate-in .45s var(--dj-ease);}
@keyframes dj-rotate-in{from{opacity:0;transform:translateY(.55em);}to{opacity:1;transform:none;}}

.dj-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;}
.bento-card{
  grid-column:span 2;position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);padding:1.8rem 1.6rem;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .3s var(--dj-ease),box-shadow .3s var(--dj-ease),background .3s var(--dj-ease),border-color .3s var(--dj-ease),color .3s var(--dj-ease);
}
.bento-wide{grid-column:span 4;grid-row:span 1;}
.bento-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--dj-ease);background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--dj-signal-soft),transparent 72%);}
.bento-card:hover::before{opacity:1;}
.bento-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(17,24,39,.45);border-color:var(--dj-blue);}
.bento-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.3rem;}
.bento-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--dj-r-sm);background:var(--dj-paper);border:1px solid var(--dj-line);color:var(--dj-blue);transition:background .3s var(--dj-ease),color .3s var(--dj-ease),border-color .3s var(--dj-ease),transform .3s var(--dj-ease);}
.bento-card:hover .bento-ic{background:var(--dj-blue);border-color:var(--dj-blue);color:#fff;transform:translateY(-2px);}
.bento-no{font-family:var(--dj-font-head);font-weight:800;font-size:2rem;line-height:1;color:var(--dj-line-strong);transition:color .3s var(--dj-ease);}
.bento-card:hover .bento-no{color:var(--dj-signal);}
.bento-tag{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dj-blue);border:1px solid currentColor;border-radius:999px;padding:.32rem .7rem;}
.bento-card h2{margin:0 0 .55rem;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.015em;line-height:1.25;}
.bento-wide h2{font-size:clamp(1.4rem,2.4vw,1.85rem);}
.bento-card p{margin:0;color:var(--dj-muted);font-size:.96rem;line-height:1.6;max-width:46ch;}
.bento-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.3rem;font-weight:700;font-size:.9rem;color:var(--dj-blue);}
.bento-go svg{transition:transform .25s var(--dj-ease);}
.bento-card:hover .bento-go svg{transform:translateX(4px);}
/* Card CTA gelap pengisi grid (v1.5.5) */
.bento-cta{background:linear-gradient(165deg,var(--dj-night) 0%,var(--dj-night-2) 100%);border-color:var(--dj-night-line);color:#fff;}
.bento-cta::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--dj-mint-soft),transparent 72%);}
.bento-cta:hover{border-color:rgba(43,212,119,.55);box-shadow:0 22px 44px -28px rgba(0,0,0,.6);}
.bento-cta .bento-ic{background:var(--dj-mint-soft);border-color:transparent;color:var(--dj-mint);}
.bento-cta:hover .bento-ic{background:var(--dj-mint);border-color:var(--dj-mint);color:var(--dj-night);}
.bento-cta .bento-tag{color:var(--dj-mint);}
.bento-cta h2{color:#fff;}
.bento-cta p{color:var(--dj-fog);}
.bento-cta .bento-go{color:var(--dj-mint);}
@media (max-width:980px){.dj-bento{grid-template-columns:repeat(2,1fr);}.bento-card,.bento-wide{grid-column:span 1;}.bento-wide{grid-column:span 2;}}
@media (max-width:640px){.dj-bento{grid-template-columns:1fr;}.bento-card,.bento-wide{grid-column:span 1;}}

/* Stats band v1.5.4: panel 2x2 + aside konsultasi */
.svc-stats-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.2rem;align-items:stretch;}
.svc-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--dj-r-md);overflow:hidden;}
.svc-stat{padding:2rem 1.7rem;background:var(--dj-night-2);transition:background .25s var(--dj-ease);}
.svc-stat:hover{background:#121b30;}
.svc-stat-n{display:block;font-family:var(--dj-font-head);font-weight:800;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;}
.svc-stat-l{display:block;margin-top:.55rem;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.62);}
.svc-stats-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:2.2rem;border:1px solid var(--dj-night-line);border-radius:var(--dj-r-md);background:linear-gradient(165deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%);}
.svc-stats-aside::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px circle at 88% -10%,var(--dj-mint-soft),transparent 60%);}
.svc-stats-aside>*{position:relative;}
.svc-stats-aside h2{margin:0 0 .5rem;color:#fff;font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.015em;}
.svc-stats-aside p{margin:0 0 1.3rem;color:var(--dj-fog);font-size:.98rem;line-height:1.65;max-width:44ch;}
.svc-stats-aside-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;}
.svc-stats-aside-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--dj-font-head);font-weight:700;font-size:.92rem;color:var(--dj-mint);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--dj-ease);}
.svc-stats-aside-link:hover{border-color:var(--dj-mint);}
.svc-stats-aside-link svg{transition:transform .22s var(--dj-ease);}
.svc-stats-aside-link:hover svg{transform:translateX(3px);}
@media (max-width:980px){.svc-stats-grid{grid-template-columns:1fr;gap:1.6rem;}}
@media (max-width:480px){.svc-stat{padding:1.5rem 1.2rem;}}

/* Dark ink section (v1.3.9) */
.section-ink{background:var(--dj-ink);color:#fff;position:relative;overflow:hidden;}
.section-ink::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at 85% 0%,rgba(37,99,235,.22),transparent 65%);}
.section-ink .container{position:relative;}

.svc-tabs-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start;}
.svc-tabs-intro{position:sticky;top:110px;margin-bottom:0;}
.svc-tabs{max-width:none;min-width:0;}
.svc-tablist{display:flex;flex-wrap:wrap;gap:.6rem;border-bottom:1px solid var(--dj-line-strong);padding-bottom:1rem;}
.svc-tab{
  display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--dj-line-strong);border-radius:999px;padding:.62rem 1.15rem;
  font-family:var(--dj-font-head);font-weight:700;font-size:.9rem;color:var(--dj-muted);cursor:pointer;white-space:nowrap;
  transition:color .2s var(--dj-ease),background .2s var(--dj-ease),border-color .2s var(--dj-ease),transform .2s var(--dj-ease);
}
.svc-tab svg{flex:none;}
.svc-tab:hover{color:var(--dj-blue);border-color:var(--dj-blue);transform:translateY(-1px);}
.svc-tab[aria-selected="true"]{background:var(--dj-ink);border-color:var(--dj-ink);color:#fff;}
.svc-tabpanel{
  display:grid;grid-template-columns:60px 1fr;gap:1.4rem;align-items:start;
  margin-top:1.4rem;padding:1.8rem;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);
  background:#fff;box-shadow:0 18px 38px -30px rgba(17,24,39,.35);
  animation:dj-panel-in .4s var(--dj-ease);
}
.svc-tabpanel[hidden]{display:none;}
.svc-panel-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--dj-r-sm);background:var(--dj-blue-tint);border:1px solid var(--dj-line);color:var(--dj-blue);}
.svc-tabpanel p{margin:0 0 1.2rem;color:var(--dj-muted);font-size:1.02rem;line-height:1.7;max-width:62ch;}
@media (max-width:900px){.svc-tabs-wrap{grid-template-columns:1fr;gap:1.6rem;}.svc-tabs-intro{position:static;}}
@media (max-width:640px){.svc-tabpanel{grid-template-columns:1fr;}}
@keyframes dj-panel-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.svc-intro{padding:0;}
.svc-intro .container{max-width:var(--dj-container);}
.svc-intro-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:2.5rem;border-top:1px solid var(--dj-line);padding-top:2.4rem;align-items:start;}
.svc-intro-label{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dj-blue);}
.svc-intro .service-prose{max-width:none;border-top:none;padding-top:0;}
.svc-intro .service-prose p{font-family:var(--dj-font-head);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.62rem);line-height:1.5;letter-spacing:-.01em;color:var(--dj-ink);margin:0;text-wrap:balance;}
.svc-intro .service-prose p+p{margin-top:.9rem;font-family:var(--dj-font-body);font-weight:400;font-size:1rem;color:var(--dj-muted);max-width:64ch;}
.svc-intro .service-prose a{color:var(--dj-blue);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:800px){.svc-intro-grid{grid-template-columns:1fr;gap:.9rem;}}

/* ---------- Service detail v1.4.7: dark hero, sticky sidebar, dark why-rows ---------- */
.svc-hero--ink{
  position:relative;overflow:hidden;border-bottom:none;color:var(--dj-fog);
  background:
    radial-gradient(900px 480px at 88% -18%,var(--dj-signal-soft),transparent 62%),
    radial-gradient(700px 420px at -6% 118%,var(--dj-mint-soft),transparent 55%),
    linear-gradient(180deg,var(--dj-night) 0%,var(--dj-night-2) 100%);
  padding:clamp(3rem,7vh,4.6rem) 0 clamp(2.6rem,6vh,3.6rem);
}
.svc-hero--ink::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:linear-gradient(100deg,transparent 20%,#000 80%);mask-image:linear-gradient(100deg,transparent 20%,#000 80%);}
.svc-hero--ink .container{position:relative;}
.svc-hero--ink .breadcrumb{color:var(--dj-fog-soft);}
.svc-hero--ink .breadcrumb a{color:var(--dj-fog-soft);}
.svc-hero--ink .breadcrumb a:hover{color:var(--dj-mint);}
.svc-hero--ink .svc-eyebrow{color:var(--dj-mint);}
.svc-hero--ink h1{color:#fff;max-width:22ch;}
.svc-hero--ink .svc-lead{color:var(--dj-fog);}
.svc-hero--ink .svc-bullets li{color:var(--dj-fog);}
.svc-hero--ink .svc-bullets svg{color:var(--dj-mint);}
.svc-hero--ink .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;}
.svc-hero--ink .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;}
.svc-hero--ink .btn-primary{background:var(--dj-signal);box-shadow:0 14px 34px -18px rgba(77,141,255,.9);}
.svc-hero--ink .btn-primary:hover{background:#3b7bf0;color:#fff;}

/* Konten editorial (detail layanan, v1.4.9 — full width v1.5.0) */
.svc-editorial-wrap{padding:clamp(2.8rem,6vh,4.2rem) 0;}
/* Override .entry-content .container yang menyempitkan ke --dj-narrow (line ~615) */
.svc-editorial-wrap .container{max-width:var(--dj-container);}
.svc-editorial{max-width:none;}
.svc-editorial>p:first-child{font-family:var(--dj-font-head);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.5;letter-spacing:-.01em;color:var(--dj-ink);max-width:60ch;text-wrap:balance;}
.svc-editorial ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.svc-editorial li{position:relative;padding:.95rem 1.15rem .95rem 2.5rem;margin:0;border:1px solid var(--dj-line);border-radius:var(--dj-r-sm);background:#fff;color:var(--dj-muted);font-size:.95rem;line-height:1.55;transition:border-color .2s var(--dj-ease),box-shadow .2s var(--dj-ease),transform .2s var(--dj-ease);}
.svc-editorial li::before{content:"";position:absolute;left:1.05rem;top:1.25em;width:8px;height:8px;border-radius:2px;background:var(--dj-signal);transform:rotate(45deg);}
.svc-editorial li:hover{border-color:var(--dj-blue);box-shadow:0 12px 26px -22px rgba(31,75,168,.5);transform:translateY(-2px);}
.svc-editorial li strong{color:var(--dj-ink);}
@media (max-width:760px){.svc-editorial ul{grid-template-columns:1fr;}}

/* Cocok untuk Anda: dark band (v1.4.9) */
.svc-fit{position:relative;overflow:hidden;}
.svc-fit::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:linear-gradient(100deg,transparent 25%,#000 85%);mask-image:linear-gradient(100deg,transparent 25%,#000 85%);}
.svc-fit .container{position:relative;z-index:1;}
.svc-fit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.svc-fit-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:var(--dj-mint-soft);color:var(--dj-mint);margin-bottom:1.1rem;}
.svc-fit-intro h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.02em;margin:0 0 .5rem;}
.svc-fit-intro p{color:var(--dj-fog);font-size:.99rem;line-height:1.65;margin:0 0 1.5rem;max-width:56ch;}
.svc-fit-cta{background:var(--dj-mint);color:var(--dj-night)!important;border-radius:999px;padding:.72rem 1.35rem;font-family:var(--dj-font-head);font-weight:700;font-size:.92rem;box-shadow:0 12px 26px -12px rgba(43,212,119,.6);white-space:nowrap;}
.svc-fit-cta:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--dj-night)!important;}
.svc-fit-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.svc-fit-list li{
  display:flex;gap:.95rem;align-items:flex-start;padding:1.15rem 1.25rem;
  background:rgba(255,255,255,.05);border:1px solid var(--dj-night-line);border-radius:var(--dj-r-md);
  color:#e7ecf5;font-size:.99rem;line-height:1.6;
  transition:background .25s var(--dj-ease),border-color .25s var(--dj-ease),transform .25s var(--dj-ease);
}
.svc-fit-list li:hover{background:rgba(255,255,255,.09);border-color:rgba(43,212,119,.45);transform:translateX(5px);}
.svc-fit-list svg{color:var(--dj-mint);flex:none;margin-top:3px;}
@media (max-width:900px){.svc-fit-grid{grid-template-columns:1fr;gap:2rem;}}

/* Client wall di dark band (halaman portofolio, v1.5.2) */
.pf-wall{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.8rem;}
.pf-wall li{display:flex;align-items:center;justify-content:center;height:78px;padding:.6rem 1rem;background:#fff;border:1px solid transparent;border-radius:var(--dj-r-md);transition:transform .25s var(--dj-ease),box-shadow .25s var(--dj-ease),border-color .25s var(--dj-ease);}
.pf-wall li:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.6);border-color:rgba(43,212,119,.55);}
.pf-wall img{max-height:36px;max-width:118px;width:auto;height:auto;object-fit:contain;opacity:.85;filter:grayscale(1);transition:opacity .25s var(--dj-ease),filter .25s var(--dj-ease);}
.pf-wall li:hover img{opacity:1;filter:none;}

/* Why-rows versi terang (v1.4.9) */
.section-ink .sec-head h2{color:#fff;}
.section-ink .sec-head p{color:var(--dj-fog);}
.section-ink .sec-no{color:var(--dj-mint);}
.section-ink .sec-no::after{background:rgba(255,255,255,.22);}
.svc-why-rows{border-top:1px solid var(--dj-line-strong);max-width:none;}
.svc-why-row{
  display:grid;grid-template-columns:76px 52px 1fr;gap:1.4rem;align-items:start;
  padding:1.9rem .6rem;border-bottom:1px solid var(--dj-line-strong);position:relative;
  transition:background .3s var(--dj-ease);
}
.svc-why-row::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--dj-ease);background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--dj-signal-soft),transparent 72%);}
.svc-why-row:hover::before{opacity:1;}
.svc-why-no{font-family:var(--dj-font-head);font-weight:800;font-size:1.9rem;line-height:1;color:var(--dj-line-strong);transition:color .3s var(--dj-ease);}
.svc-why-row:hover .svc-why-no{color:var(--dj-signal);}
.svc-why-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--dj-r-sm);background:var(--dj-paper);border:1px solid var(--dj-line);color:var(--dj-blue);transition:background .3s var(--dj-ease),color .3s var(--dj-ease),border-color .3s var(--dj-ease),transform .3s var(--dj-ease);}
.svc-why-row:hover .svc-why-ic{background:var(--dj-blue);border-color:var(--dj-blue);color:#fff;transform:translateY(-2px);}
.svc-why-body h3{margin:0 0 .4rem;color:var(--dj-ink);font-size:1.16rem;letter-spacing:-.01em;}
.svc-why-body p{margin:0;color:var(--dj-muted);font-size:.96rem;line-height:1.65;max-width:80ch;}
@media (max-width:760px){
  .svc-why-row{grid-template-columns:52px 1fr;row-gap:.6rem;}
  .svc-why-no{grid-row:1;font-size:1.4rem;}
  .svc-why-ic{grid-row:1;justify-self:end;width:42px;height:42px;}
  .svc-why-body{grid-column:1/-1;}
}

/* ---------- Header mega-menu dropdown (v1.4.1 / fix v1.4.2) ---------- */
.desktop-nav .menu-item-has-children{position:static;}
/* Caret: wajib menimpa position/left/bottom/background milik underline (.desktop-nav a::after) agar tidak menimpa teks */
.desktop-nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:.42rem;}
.desktop-nav .menu-item-has-children>a::after{content:"";position:static;left:auto;bottom:auto;flex:none;width:6px;height:6px;margin:0;background:transparent;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;border-radius:1px;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--dj-ease);}
.desktop-nav .menu-item-has-children:hover>a::after,
.desktop-nav .menu-item-has-children:focus-within>a::after{transform:rotate(-135deg) translateY(-1px);}
/* v1.6.0: panel menempel ke batas bawah header (tanpa celah) sehingga hover
   tidak putus; bridge tidak diperlukan lagi. */
.desktop-nav .sub-menu{
  list-style:none;margin:0;padding:1rem;width:min(1040px,calc(100vw - 48px));
  display:grid;grid-template-columns:minmax(248px,.82fr) 1fr 1fr;gap:.55rem;
  background:#fff;border:1px solid var(--dj-line-strong);border-top:none;border-radius:0 0 var(--dj-r-lg) var(--dj-r-lg);
  box-shadow:0 40px 80px -32px rgba(17,24,39,.45);
  position:absolute;top:100%;left:50%;transform:translate(-50%,0);opacity:0;visibility:hidden;
  transition:opacity .22s var(--dj-ease),visibility .22s;
}
.desktop-nav .menu-item-has-children:hover>.sub-menu,
.desktop-nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;}
/* Promo rail (kiri) */
.dj-sub-promo{
  grid-column:1;grid-row:1/span 2;display:flex;flex-direction:column;gap:.55rem;
  position:relative;overflow:hidden;border-radius:var(--dj-r-md);padding:1.35rem 1.25rem;
  background:linear-gradient(165deg,var(--dj-night) 0%,var(--dj-night-2) 100%);
}
.dj-sub-promo::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(280px 180px at 90% -18%,var(--dj-signal-soft),transparent 62%),radial-gradient(240px 160px at -10% 115%,var(--dj-mint-soft),transparent 58%);}
.dj-sub-promo>*{position:relative;}
.dj-sub-promo-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--dj-mint-soft);color:var(--dj-mint);margin-bottom:.2rem;}
.dj-sub-promo strong{font-family:var(--dj-font-head);color:#fff;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;}
.dj-sub-promo p{margin:0;color:var(--dj-fog);font-size:.82rem;line-height:1.55;}
.dj-sub-promo a{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;align-self:stretch;
  margin-top:auto;padding:.72rem 1.2rem;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,#38e28a 0%,#1fc06c 100%);color:var(--dj-night)!important;
  font-family:var(--dj-font-head);font-weight:700;font-size:.88rem;line-height:1;letter-spacing:.01em;
  box-shadow:0 10px 24px -12px rgba(43,212,119,.65),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s var(--dj-ease),box-shadow .2s var(--dj-ease),filter .2s var(--dj-ease);
}
.dj-sub-promo a:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 28px -12px rgba(43,212,119,.8),inset 0 1px 0 rgba(255,255,255,.35);}
.dj-sub-promo a:active{transform:translateY(0) scale(.98);}
.dj-sub-promo a::after{content:none;}
.dj-sub-promo a .dj-icon{transition:transform .2s var(--dj-ease);}
.dj-sub-promo a:hover .dj-icon{transform:translate(2px,-2px);}
/* Kartu layanan (2x2 di kanan) */
.desktop-nav .sub-menu li:not(.dj-sub-promo):not(.dj-sub-footer){border:1px solid transparent;border-radius:var(--dj-r-md);transition:border-color .2s var(--dj-ease);}
.desktop-nav .sub-menu li:not(.dj-sub-promo):not(.dj-sub-footer):hover{border-color:var(--dj-line);}
.desktop-nav .sub-menu li:not(.dj-sub-promo):not(.dj-sub-footer) a{
  display:grid;grid-template-columns:46px 1fr;gap:.9rem;align-items:center;padding:.8rem .75rem;
  border-radius:var(--dj-r-md);white-space:normal;transition:background .2s var(--dj-ease);
}
.desktop-nav .sub-menu a::after{content:none;}
.desktop-nav .sub-menu li:not(.dj-sub-promo):not(.dj-sub-footer) a:hover{background:var(--dj-paper);}
.dj-sub-ic{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--dj-r-sm);
  background:var(--dj-paper);border:1px solid var(--dj-line);color:var(--dj-blue);
  transition:background .25s var(--dj-ease),color .25s var(--dj-ease),border-color .25s var(--dj-ease),transform .25s var(--dj-ease);
}
.desktop-nav .sub-menu a:hover .dj-sub-ic{background:var(--dj-blue);border-color:var(--dj-blue);color:#fff;transform:translateY(-2px);}
.dj-sub-body{display:block;min-width:0;}
.dj-sub-t{display:block;font-family:var(--dj-font-head);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--dj-ink);transition:color .2s var(--dj-ease);}
.desktop-nav .sub-menu a:hover .dj-sub-t{color:var(--dj-blue);}
.dj-sub-desc{display:block;font-size:.79rem;font-weight:400;color:var(--dj-muted);line-height:1.45;margin-top:.15rem;}
/* Footer bar */
.dj-sub-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.45rem;padding-top:.7rem;border-top:1px solid var(--dj-line);}
.dj-sub-footer a{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:var(--dj-r-sm);font-family:var(--dj-font-head);font-weight:700;font-size:.9rem;white-space:nowrap;color:var(--dj-blue)!important;}
.dj-sub-footer a:hover{background:var(--dj-blue-tint);}
.dj-sub-footer a .dj-icon{transition:transform .22s var(--dj-ease);flex:none;}
.dj-sub-footer a:hover .dj-icon{transform:translate(2px,-2px);}
.dj-sub-hint{font-size:.79rem;color:var(--dj-muted);white-space:nowrap;}
@media (max-width:1080px){
  .desktop-nav .sub-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;width:auto;display:block;padding:.2rem 0 .2rem 1rem;}
  .desktop-nav .sub-menu::before{display:none;}
  .desktop-nav .dj-sub-promo{display:none;}
  .dj-sub-footer{border-top:none;margin-top:0;padding-top:0;display:block;}
  .dj-sub-hint{display:none;}
}
/* Mobile panel: sub-menu selalu terbuka, inden, tanpa kartu */
.mobile-primary-nav .sub-menu{list-style:none;margin:.2rem 0 .6rem;padding-left:1.1rem;border-left:1px solid var(--dj-line-strong);}
.mobile-primary-nav .sub-menu a{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.98rem;padding:.5rem 0;opacity:.9;}
.mobile-primary-nav .dj-sub-ic{display:none;}
.mobile-primary-nav .dj-sub-desc{display:none;}
.mobile-primary-nav .dj-sub-t{font-size:.98rem;color:var(--dj-ink);}
.mobile-primary-nav .dj-sub-promo{display:none;}
.mobile-primary-nav .dj-sub-footer{border-top:none;margin-top:0;padding-top:0;display:block;}
.mobile-primary-nav .dj-sub-footer a{color:var(--dj-blue);font-size:.92rem;padding:.6rem 0;gap:0;white-space:normal;background:none;}
.mobile-primary-nav .dj-sub-footer a svg{display:none;}
.mobile-primary-nav .dj-sub-hint{display:none;}

/* ---------- Blog (v1.6.3) ---------- */
.blog-hero h1{max-width:16ch;}
/* Chip kategori */
.blog-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.2rem;}
.blog-chip{
  display:inline-flex;align-items:center;padding:.5rem 1.05rem;border:1px solid var(--dj-line-strong);border-radius:999px;
  font-family:var(--dj-font-head);font-weight:700;font-size:.88rem;color:var(--dj-muted);text-decoration:none;
  transition:color .2s var(--dj-ease),border-color .2s var(--dj-ease),background .2s var(--dj-ease),transform .2s var(--dj-ease);
}
.blog-chip:hover{color:var(--dj-blue);border-color:var(--dj-blue);transform:translateY(-1px);}
/* Featured card (artikel pertama) */
.post-featured{
  display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;margin-bottom:1.8rem;
  background:#fff;border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-lg);
  transition:transform .3s var(--dj-ease),box-shadow .3s var(--dj-ease),border-color .3s var(--dj-ease);
}
.post-featured:hover{transform:translateY(-4px);box-shadow:0 26px 52px -34px rgba(17,24,39,.5);border-color:var(--dj-blue);}
.post-featured .post-card-media{aspect-ratio:auto;height:100%;min-height:280px;}
.post-featured-body{display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.5rem,3vw,2.3rem);}
.post-featured-body h2{margin:0;font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.28;letter-spacing:-.015em;}
.post-featured-body h2 a{color:var(--dj-ink);text-decoration:none;transition:color .2s var(--dj-ease);}
.post-featured-body h2 a:hover{color:var(--dj-blue);}
.post-featured-body>p{margin:0;color:var(--dj-muted);font-size:.98rem;line-height:1.65;}
/* Grid kartu artikel */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-md);
  transition:transform .3s var(--dj-ease),box-shadow .3s var(--dj-ease),border-color .3s var(--dj-ease);
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -32px rgba(17,24,39,.5);border-color:var(--dj-blue);}
.post-card-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--dj-night-2);}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--dj-ease);}
.post-card:hover .post-card-media img,.post-featured:hover .post-card-media img{transform:scale(1.045);}
.post-card-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--dj-mint);background:linear-gradient(165deg,var(--dj-night) 0%,var(--dj-night-2) 100%);}
.post-card-cat{
  position:absolute;left:.9rem;top:.9rem;padding:.32rem .7rem;border-radius:999px;
  background:rgba(14,23,48,.85);color:var(--dj-mint);
  font-family:var(--dj-font-head);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.post-card-body{display:flex;flex-direction:column;gap:.5rem;padding:1.35rem 1.35rem 1.5rem;flex:1;}
.post-meta{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.8rem;color:var(--dj-muted);font-variant-numeric:tabular-nums;}
.post-card-body h2{margin:0;font-size:1.16rem;line-height:1.35;letter-spacing:-.01em;}
.post-card-body h2 a{color:var(--dj-ink);text-decoration:none;transition:color .2s var(--dj-ease);}
.post-card-body h2 a:hover{color:var(--dj-blue);}
.post-card-body>p{margin:0;color:var(--dj-muted);font-size:.93rem;line-height:1.6;flex:1;}
.post-card-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.9rem;font-family:var(--dj-font-head);font-weight:700;font-size:.88rem;color:var(--dj-blue);}
.post-card-go svg{transition:transform .22s var(--dj-ease);}
.post-card:hover .post-card-go svg,.post-featured:hover .post-card-go svg{transform:translateX(4px);}
/* Chip kategori pada hero artikel & featured */
.post-cat-chip{
  align-self:flex-start;display:inline-flex;padding:.34rem .75rem;border-radius:999px;
  background:var(--dj-mint-soft);color:var(--dj-mint);
  font-family:var(--dj-font-head);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:background .2s var(--dj-ease),color .2s var(--dj-ease);
}
.post-cat-chip:hover{background:var(--dj-mint);color:var(--dj-night);}
/* Single post */
.post-content .container{max-width:var(--dj-container);} /* full width, rata dengan section lain (v1.6.4) */
.post-content{font-size:1.08rem;line-height:1.8;color:var(--dj-ink);}
.post-content p{margin:0 0 1.35rem;color:var(--dj-muted);}
.post-content strong{color:var(--dj-ink);}
.post-content ul,.post-content ol{margin:0 0 1.4rem;padding-left:1.4rem;color:var(--dj-muted);}
.post-content li{margin-bottom:.55rem;font-size:1.05rem;}
.post-content li::marker{color:var(--dj-blue);font-weight:700;}
.post-hero h1{max-width:24ch;}
.post-hero-cats{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.1rem;}
.post-hero-meta{margin:0;color:var(--dj-fog-soft);font-size:.9rem;font-variant-numeric:tabular-nums;}
.post-featured-img{margin:0 0 2.2rem;border:1px solid var(--dj-line);border-radius:var(--dj-r-md);overflow:hidden;box-shadow:0 24px 50px -40px rgba(17,24,39,.4);}
.post-featured-img img{width:100%;height:auto;}
.post-content h2{margin-top:2.8rem;font-size:clamp(1.6rem,2.6vw,2rem);}
.post-content h3{margin-top:2rem;font-size:1.3rem;}
.post-content img{border-radius:var(--dj-r-sm);}
.post-content blockquote{margin:1.8rem 0;padding:1.1rem 1.4rem;border-left:3px solid var(--dj-signal);background:var(--dj-paper);border-radius:0 var(--dj-r-sm) var(--dj-r-sm) 0;color:var(--dj-ink);font-weight:600;}
.post-content a{color:var(--dj-blue);text-decoration:underline;text-underline-offset:3px;}
.post-content a:hover{color:var(--dj-signal);}
/* Navigasi antar-artikel */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--dj-line-strong);}
.post-nav-link{
  display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;text-decoration:none;
  border:1px solid var(--dj-line);border-radius:var(--dj-r-md);background:#fff;
  transition:border-color .2s var(--dj-ease),box-shadow .25s var(--dj-ease),transform .25s var(--dj-ease);
}
.post-nav-link:hover{border-color:var(--dj-blue);box-shadow:0 14px 30px -24px rgba(31,75,168,.5);transform:translateY(-2px);}
.post-nav-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dj-muted);}
.post-nav-link strong{font-family:var(--dj-font-head);color:var(--dj-ink);font-size:.98rem;line-height:1.4;}
.post-nav-link:hover strong{color:var(--dj-blue);}
.post-nav-next{text-align:right;align-items:flex-end;}
/* Empty state */
.blog-empty{max-width:560px;margin:1rem auto;text-align:center;padding:3rem 2rem;border:1px dashed var(--dj-line-strong);border-radius:var(--dj-r-lg);}
.blog-empty-ic{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:999px;background:var(--dj-signal-soft);color:var(--dj-blue);margin-bottom:1.1rem;}
.blog-empty h2{margin-bottom:.5rem;}
.blog-empty p{color:var(--dj-muted);}
.blog-empty-cta{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem;}
/* Pagination */
.pagination .nav-links{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2.6rem;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:.5rem .85rem;
  border:1px solid var(--dj-line-strong);border-radius:var(--dj-r-sm);background:#fff;
  font-family:var(--dj-font-head);font-weight:700;font-size:.9rem;color:var(--dj-muted);text-decoration:none;
  transition:color .2s var(--dj-ease),border-color .2s var(--dj-ease),background .2s var(--dj-ease);
}
.pagination .page-numbers:hover{color:var(--dj-blue);border-color:var(--dj-blue);}
.pagination .page-numbers.current{background:var(--dj-ink);border-color:var(--dj-ink);color:#fff;}
@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .post-featured{grid-template-columns:1fr;}
  .post-featured .post-card-media{aspect-ratio:16/9;min-height:0;}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .post-nav{grid-template-columns:1fr;}
  .post-nav-next{text-align:left;align-items:flex-start;}
}