/* Blog Startspace. Global tokens, nav and footer copied from the live pages (Tentang Kami) so the blog matches the site. Blog-only styles start at BLOG. */
/* Tentang Kami v1: same system as the product pages. Photo hero, story with Ace, eight numbers, year-by-year milestone (rail on desktop, vertical line on phone), how we work, ecosystem, logos of tenants that started here, community collage, tenant marquee, location, FAQ. White ground, navy headlines, red only on Chat MinAce. No shadows, no gradients. */
:root{
  --navy:#1C4080; --red:#EA2027; --on-solid:#FFFFFF;
  --bg:#FFFFFF; --ink:#13254A; --muted:#55627E; --line:#D5DEEC; --tint:#EEF2F9; --surface:#FFFFFF; --off:#A9B3C6;
  --head:var(--navy);
  --font:"Schibsted Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --max:1200px; --r:8px; --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
/* The site is light theme by decision, so dark mode keeps the same white tokens on purpose. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#FFFFFF; --ink:#13254A; color-scheme:light }}
:root[data-theme="dark"]{ --bg:#FFFFFF; --ink:#13254A; color-scheme:light }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16.5px;line-height:1.6}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{margin:0;text-wrap:balance;color:var(--head)}
h2{font-size:clamp(1.75rem,4.4vw,2.6rem);line-height:1.06;font-weight:800;letter-spacing:-.03em}
h3{font-size:1.22rem;line-height:1.2;font-weight:800;letter-spacing:-.01em}
p{margin:0}
.lead{color:var(--muted);max-width:56ch;font-size:1.05rem}
section{padding-block:clamp(56px,8vw,104px)}
.head{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px)}
.tax{font-size:.8rem;font-weight:600;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1rem/1 var(--font);text-decoration:none;border-radius:4px;padding:16px 22px;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .3s, color .2s, border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-red{background:var(--red);color:var(--on-solid)}
.btn-red:hover{background:#C81B21}
.btn-navy{background:var(--navy);color:var(--on-solid)}
.btn-navy:hover{background:#15315F}
.btn-line{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-line:hover{background:var(--red);border-color:var(--red);color:var(--on-solid)}
.btn[aria-disabled="true"]{background:var(--off);color:#fff;cursor:not-allowed}

/* nav (same as Beranda / Coworking / Meeting Room) */
header.nav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:21;background:var(--bg)}
.nav-in{display:flex;align-items:center;gap:20px;min-height:var(--nav-h);position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px}
.brand b{font-weight:900;font-size:1.2rem;letter-spacing:-.02em;color:var(--head)}
.menu{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{display:flex;align-items:center;gap:6px;font:600 .96rem var(--font);color:var(--ink);text-decoration:none;background:none;border:0;padding:10px 14px;border-radius:4px;cursor:pointer}
.menu > li > a:hover,.menu > li > button:hover{background:var(--tint)}
.menu > li > button.here{box-shadow:inset 0 -2px 0 var(--navy);border-radius:0}
.chev{width:12px;height:12px;transition:transform .2s}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:6px;list-style:none;margin:0;visibility:hidden;opacity:0;transition:opacity .15s ease .25s, visibility 0s linear .4s}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.menu > li:hover .drop,.menu > li:focus-within .drop,.menu > li.open .drop{visibility:visible;opacity:1;transition-delay:0s}
.menu > li.open .chev{transform:rotate(180deg)}
.drop a,.drop .soon{display:grid;gap:2px;text-decoration:none;padding:10px 12px;border-radius:4px}
.drop a:hover{background:var(--tint)}
.drop a[aria-current] b{text-decoration:underline;text-underline-offset:3px}
.drop b{font-size:.95rem;color:var(--head)}
.drop span{font-size:.8rem;color:var(--muted)}
.drop .soon{opacity:.7}
.menu > li > a.minace{background:var(--red);color:#fff;border-radius:999px;padding:12px 28px;margin-left:10px;font-weight:700}
.menu > li > a.minace:hover{background:#C81B21}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--line);border-radius:4px;width:44px;height:44px;cursor:pointer;color:var(--ink)}
@media (max-width: 1080px){
  .burger{display:grid;place-items:center}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px 20px;gap:2px;max-height:calc(100svh - var(--nav-h));overflow:auto}
  .menu.show{display:flex}
  .drop{position:static;border:0;padding:0 0 0 12px;background:transparent;display:none;visibility:visible;opacity:1;transition:none}
  .drop::before{display:none}
  .menu > li.open .drop{display:block}
  .menu > li > a.minace{margin:12px 0 0;align-self:flex-start}
  .menu > li > button.here{box-shadow:none}
}

/* footer (same as Beranda / Coworking / Meeting Room) */
footer{background:var(--bg);border-top:1px solid var(--line)}
.band{height:clamp(72px,10vw,120px);background:url("../img/blog/pattern-light.png") center/180px 180px repeat;border-bottom:1px solid var(--line)}
footer .wrap{padding-block:clamp(44px,6vw,72px) 28px}
.ask{display:grid;grid-template-columns:1.2fr 1fr auto;gap:clamp(20px,4vw,48px);align-items:end;border-bottom:1.5px solid var(--line)}
.ask > div{padding-bottom:clamp(32px,5vw,48px)}
.ask .ace{width:clamp(160px,18vw,240px);height:auto;align-self:end}
.ask p{color:var(--muted);margin-top:12px;max-width:46ch}
.wa{display:grid;gap:4px;justify-items:start}
.wa small{color:var(--muted);font-size:.9rem}
.wa b{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wa .btn{margin-top:12px}
.wa .office a{color:var(--ink);font-weight:700;text-decoration:none}
.foot-meta{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-top:32px;font-size:.95rem;color:var(--muted)}
.foot-meta b{display:block;color:var(--head);margin-bottom:6px}
.foot-meta a{color:var(--ink);text-decoration:none;font-weight:600}
.foot-meta a:hover{color:var(--navy);text-decoration:underline}
.foot-meta ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
/* closing */
.ask .go{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ask .go a{border:1.5px solid var(--navy);border-radius:999px;padding:7px 14px;font-size:.9rem;font-weight:700;color:var(--navy);text-decoration:none}
.ask .go a:hover{background:var(--navy);color:#fff}
.legal a{color:var(--muted)}
@media (max-width: 860px){ .foot-meta{grid-template-columns:1fr 1fr} }
@media (max-width: 760px){ .ask{grid-template-columns:1fr;align-items:start} .ask > div{padding-bottom:0} .ask .ace{justify-self:end;width:150px;margin-top:-8px} .foot-meta{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== BLOG ===== */
.draft-bar{background:#FFF4D6;border-bottom:1px solid #E8D28E;color:#5A4500;font-size:.9rem;font-weight:600}
.draft-bar .wrap{padding-block:10px}

/* listing hero: editorial, white, no photo */
.b-hero{padding-block:clamp(48px,8vw,96px) clamp(28px,4vw,44px)}
.b-hero .eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-hero h1{font-size:clamp(2.5rem,7vw,5.2rem);line-height:.95;font-weight:900;letter-spacing:-.045em;max-width:14ch;margin-top:14px}
.b-hero p{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:52ch;margin-top:20px}

/* shared bits */
.cat{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted)}
.meta > * + *::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--off);margin-right:14px;vertical-align:middle;transform:translateY(-1px)}
.pic{overflow:hidden;background:var(--tint);border-radius:var(--r)}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.read{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);text-decoration:none}
.read svg{width:16px;height:16px;transition:transform .3s var(--ease)}

/* featured */
.featured{padding-top:0}
.feat{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;border-top:1.5px solid var(--navy);padding-top:clamp(24px,3vw,36px)}
.feat .pic{aspect-ratio:16/9}
.feat:hover .pic img{transform:scale(1.04)}
.feat .txt{display:grid;gap:14px;justify-items:start}
.feat .label{font-size:.8rem;font-weight:700;color:var(--muted)}
.feat h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08}
.feat h2 a{text-decoration:none}
.feat h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.feat p.ex{color:var(--muted);max-width:46ch}
.feat .btn{margin-top:8px}
@media (max-width: 860px){ .feat{grid-template-columns:1fr} }

/* filter */
.latest{padding-top:0}
.latest .bar{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px;padding:0;list-style:none}
.filters button{font:700 .92rem var(--font);color:var(--navy);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;transition:border-color .2s, background-color .2s, color .2s}
.filters button:hover{border-color:var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.filters .n{font-weight:600;opacity:.7;margin-left:4px}
@media (max-width: 640px){
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:2px 16px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .filters li{scroll-snap-align:start}
}

/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);list-style:none;margin:0;padding:0}
@media (max-width: 1000px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr} }
.card{display:grid;grid-template-rows:auto 1fr;gap:16px;position:relative}
.card .pic{aspect-ratio:16/9}
.card:hover .pic img{transform:scale(1.05)}
.card .txt{display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1.25rem;line-height:1.22}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:3px solid var(--red);outline-offset:6px;border-radius:var(--r)}
.card p.ex{color:var(--muted);font-size:.97rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.card .foot .meta{font-size:.85rem}
.card .read{font-size:.92rem}
.card:hover .read svg,.feat:hover .read svg{transform:translateX(3px)}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:28px;color:var(--muted);text-align:center}

/* CTA band */
.b-cta{padding-top:0}
.b-cta .box{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;background:var(--tint);border-radius:var(--r);padding:clamp(28px,5vw,56px)}
.b-cta h2{max-width:18ch}
.b-cta p{color:var(--muted);margin-top:10px;max-width:46ch}
@media (max-width: 760px){ .b-cta .box{grid-template-columns:1fr} }

/* ===== ARTICLE ===== */
.a-head{padding-block:clamp(28px,5vw,56px) clamp(24px,4vw,40px)}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--navy);text-decoration:none;margin-bottom:clamp(24px,4vw,40px)}
.back svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.back:hover svg{transform:translateX(-3px)}
.back:hover{text-decoration:underline;text-underline-offset:3px}
.a-head .in{max-width:860px}
.a-head h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.04;font-weight:900;letter-spacing:-.035em;margin-top:14px}
.a-head .meta{margin-top:20px;font-size:.95rem}
.a-head .meta b{color:var(--ink);font-weight:700}
.a-cover{padding:0}
.a-cover figure{margin:0}
.a-cover .pic{aspect-ratio:16/9;max-height:78svh}
.a-cover .pic img{transition:none}

.a-body{padding-top:clamp(36px,5vw,64px)}
.a-grid{display:grid;grid-template-columns:240px minmax(0,720px);gap:clamp(32px,5vw,80px);justify-content:center;align-items:start}
@media (max-width: 1080px){ .a-grid{grid-template-columns:minmax(0,720px)} }

/* table of contents */
.toc{position:sticky;top:calc(var(--nav-h) + 24px);font-size:.9rem}
.toc summary{list-style:none;font-weight:800;color:var(--head);cursor:default;padding-bottom:10px;border-bottom:1.5px solid var(--navy);margin-bottom:6px}
.toc summary::-webkit-details-marker{display:none}
.toc summary .chev{display:none}
.toc ol{list-style:none;margin:0;padding:0;display:grid}
.toc a{display:block;padding:8px 0 8px 12px;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--navy);border-left-color:var(--navy)}
.toc a[aria-current="true"]{color:var(--navy);font-weight:700;border-left-color:var(--navy)}
@media (max-width: 1080px){
  .toc{position:static;border:1.5px solid var(--line);border-radius:var(--r);padding:0 16px}
  .toc summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;border:0;margin:0;padding:14px 0}
  .toc summary .chev{display:block}
  .toc[open] summary .chev{transform:rotate(180deg)}
  .toc ol{padding-bottom:12px}
}

/* prose */
.prose{font-size:1.125rem;line-height:1.75;color:var(--ink)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.18;letter-spacing:-.02em;margin-top:2.2em;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h3{font-size:1.25rem;margin-top:1.8em;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h2 + *,.prose h3 + *{margin-top:.75em}
.prose > p:first-child{font-size:1.25rem;line-height:1.6;color:var(--head);font-weight:500}
.prose a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--red)}
.prose strong{font-weight:700;color:var(--head)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li{margin-top:.45em}
.prose ul li::marker{color:var(--navy)}
.prose ol li::marker{color:var(--navy);font-weight:800}
.prose blockquote{margin-inline:0;padding:4px 0 4px 20px;border-left:3px solid var(--navy);font-size:1.2rem;font-weight:600;color:var(--head)}
.prose figure{margin-block:2em;margin-inline:0}
.prose figure .pic{aspect-ratio:var(--ar,3/2)}
.prose figure .pic img{transition:none}
.prose figcaption{font-size:.88rem;color:var(--muted);margin-top:10px;line-height:1.5}
.takeaways{border:1.5px solid var(--navy);border-radius:var(--r);padding:22px 24px}
.takeaways h2{font-size:1.15rem;margin:0 0 10px;letter-spacing:0}
.takeaways ul{margin:0}
.a-cta{border-top:1.5px solid var(--navy);padding-top:24px;margin-top:2.4em !important;display:grid;gap:16px;justify-items:start}
.a-cta .t{font-size:1.3rem;font-weight:800;line-height:1.25;color:var(--head);letter-spacing:-.01em;max-width:30ch}
.a-cta p{color:var(--muted);font-size:1rem;line-height:1.6}
.a-cta .btn{text-decoration:none;font-weight:700;color:#fff}
.a-cta .btn:hover{color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.4em !important;padding:0;list-style:none}
.tags li{font-size:.82rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.next{display:grid;gap:4px;margin-top:2em !important;padding:20px 0;border-block:1px solid var(--line);text-decoration:none}
.next small{font-size:.82rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.next b{font-size:1.15rem;color:var(--head);line-height:1.3}
a.next:hover b{text-decoration:underline;text-underline-offset:4px}
.related{border-top:1px solid var(--line);margin-top:clamp(48px,6vw,80px)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}