/*
Theme Name: ICMS
Theme URI: https://www.icms-indonesia.id
Author: ICMS Design System
Description: Tema organisasi ICMS (Indonesia Center for Mobility Studies) — clean, modern, otomotif. Berisi halaman depan (front-page) profil organisasi.
Version: 1.2.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: icms
*/

/* ============ Design tokens ============ */
:root{
  --blue-50:#eaf4ff;--blue-100:#d3e8ff;--blue-200:#a8d1ff;--blue-300:#6fb2ff;--blue-400:#3897ff;
  --blue-500:#0081ff;--blue-600:#0068d6;--blue-700:#0052ad;--blue-800:#063f83;--blue-900:#0b3468;
  --navy-900:#0a1a33;--navy-800:#0f2547;--navy-700:#16345f;
  --gray-0:#fff;--gray-25:#fbfcfe;--gray-50:#f5f7fa;--gray-100:#eceff4;--gray-200:#dde2ea;--gray-300:#c5cdd9;
  --gray-400:#9aa5b5;--gray-500:#6b7688;--gray-600:#4d5768;--gray-700:#333c4b;--gray-800:#1f2733;--gray-900:#101620;
  --green-500:#16a34a;--amber-500:#d98a00;--red-500:#dc2b3d;
  --color-primary:var(--blue-500);--color-primary-hover:var(--blue-600);--color-primary-active:var(--blue-700);
  --color-primary-subtle:var(--blue-50);--color-accent:var(--blue-400);
  --text-strong:var(--navy-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-link:var(--blue-600);
  --surface-page:var(--gray-0);--surface-subtle:var(--gray-50);--surface-card:var(--gray-0);--surface-navy:var(--navy-900);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);
  --gradient-brand:linear-gradient(135deg,#0081ff 0%,#0052ad 100%);
  --gradient-navy:linear-gradient(140deg,#0f2547 0%,#0a1a33 100%);
  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extra:800;
  --fs-display:clamp(2.75rem,5vw,4rem);--fs-h1:2.5rem;--fs-h2:2rem;--fs-h3:1.5rem;--fs-h4:1.25rem;
  --fs-lg:1.125rem;--fs-body:1rem;--fs-sm:.875rem;--fs-xs:.75rem;
  --lh-heading:1.2;--lh-snug:1.4;--lh-body:1.65;--ls-tight:-.02em;--ls-wide:.04em;--ls-eyebrow:.14em;
  --space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:2.5rem;--space-8:3rem;--space-9:4rem;
  --container-max:1200px;--container-pad:clamp(1.25rem,5vw,4rem);--section-y:clamp(4rem,8vw,7rem);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(10,26,51,.06);--shadow-sm:0 1px 3px rgba(10,26,51,.08),0 1px 2px rgba(10,26,51,.04);
  --shadow-md:0 6px 16px rgba(10,26,51,.08),0 2px 4px rgba(10,26,51,.05);
  --shadow-lg:0 16px 40px rgba(10,26,51,.12),0 4px 10px rgba(10,26,51,.06);
  --shadow-primary:0 10px 24px rgba(0,129,255,.28);
  --dur-fast:140ms;--dur-base:220ms;--ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-heading);letter-spacing:var(--ls-tight);margin:0 0 .5em;font-weight:var(--fw-bold)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--color-primary-active)}
html{scroll-behavior:smooth}

/* ============ Layout & components ============ */
.wrap{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-primary);margin:0 0 .75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:var(--fw-semibold);line-height:1;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;padding:.95rem 1.9rem;font-size:var(--fs-lg);border:1px solid transparent;transition:filter var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{filter:brightness(.94)}.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:var(--shadow-primary)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-display);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-wide);border-radius:var(--radius-pill);font-size:var(--fs-xs);padding:.3rem .75rem;background:var(--color-primary-subtle);color:var(--color-primary-active)}
.site-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border-subtle)}
.site-nav .row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:.85rem}
.site-nav img{height:34px;display:block}
.site-nav ul{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.site-nav a{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--text-body)}
.site-nav a.active{color:var(--color-primary)}
.site-nav .cta{background:var(--color-primary);color:#fff;border-radius:var(--radius-pill);padding:.5rem .9rem;font-size:var(--fs-sm);white-space:nowrap}
.hero{position:relative;overflow:hidden;background:var(--surface-navy)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.hero .ov{position:absolute;inset:0;background:linear-gradient(115deg,rgba(10,26,51,.94) 30%,rgba(0,82,173,.72) 100%)}
.hero .inner{position:relative;padding-block:clamp(4.5rem,10vw,8rem);max-width:760px}
.hero .logo{height:54px;filter:brightness(0) invert(1);display:block;margin-bottom:1.75rem}
.hero .badge-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);margin-bottom:1.5rem}
.hero h1{color:#fff;font-size:var(--fs-display);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight);line-height:1.05;margin:0 0 1.25rem}
.hero h1 span{color:var(--color-accent)}
.hero p{color:rgba(255,255,255,.82);font-size:var(--fs-lg);line-height:var(--lh-body);max-width:620px;margin:0 0 2rem}
.hero .actions{display:flex;gap:.85rem;flex-wrap:wrap}
.stats{display:flex;gap:clamp(2rem,5vw,3.5rem);margin-top:3rem;flex-wrap:wrap}
.stat b{font-family:var(--font-display);font-size:clamp(2.25rem,4vw,3.25rem);font-weight:var(--fw-extra);line-height:1;letter-spacing:var(--ls-tight);color:#fff;display:block}
.stat b i{color:rgba(255,255,255,.6);font-style:normal}
.stat span{font-size:var(--fs-sm);color:rgba(255,255,255,.75);font-weight:var(--fw-medium)}
section.pad{padding-block:var(--section-y)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
h2.sec{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-heading);margin:0;color:var(--text-strong)}
.lead{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--text-muted);margin:.75rem 0 0}
.imgframe{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.imgframe img{width:100%;height:440px;object-fit:cover;display:block}
.chip{position:absolute;left:24px;bottom:24px;right:24px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--radius-lg);padding:1.1rem 1.3rem}
.chip b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong)}
.chip span{display:block;font-size:var(--fs-sm);color:var(--text-muted);margin-top:.25rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.fcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ficon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:var(--color-primary-subtle);color:var(--color-primary);margin-bottom:var(--space-4)}
.fcard h4{font-size:var(--fs-h4);margin:0 0 .5rem}.fcard p{margin:0;color:var(--text-muted);line-height:var(--lh-body)}
.visicard{margin-top:var(--space-8);background:var(--gradient-brand);color:#fff;border-radius:var(--radius-lg);padding:var(--space-7);display:flex;gap:1.25rem;align-items:flex-start;box-shadow:var(--shadow-md)}
.visicard .num{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:2.5rem;line-height:1;opacity:.5}
.visicard .lab{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-sm);font-weight:var(--fw-semibold);margin:0 0 .5rem;opacity:.85}
.visicard .txt{margin:0;font-size:var(--fs-h4);line-height:var(--lh-snug);font-family:var(--font-display);font-weight:var(--fw-medium)}
.center{max-width:680px;margin-inline:auto;text-align:center}
.pilllabel{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-primary);margin:var(--space-8) 0 var(--space-4)}
.cta-band{background:var(--gradient-brand)}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,4rem);align-items:center}
.cta-band h2{color:#fff;font-size:var(--fs-h1);letter-spacing:var(--ls-tight);margin:0 0 .75rem}
.cta-band .l{color:rgba(255,255,255,.88);font-size:var(--fs-lg);line-height:var(--lh-body);margin:0;max-width:520px}
.contact{display:flex;flex-direction:column;gap:.9rem}
.contact .item{display:flex;align-items:center;gap:.85rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-md);padding:.9rem 1.1rem;color:#fff;font-family:var(--font-display);font-weight:var(--fw-medium)}
.contact .btn-white{background:#fff;color:var(--color-primary-active);border:none;margin-top:.5rem;box-shadow:none}
.site-footer{background:var(--surface-navy);color:rgba(255,255,255,.72)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--space-7);padding-top:var(--space-9)}
.site-footer img{height:34px;filter:brightness(0) invert(1);margin-bottom:var(--space-4)}
.site-footer p{max-width:320px;font-size:var(--fs-sm);line-height:var(--lh-body);margin:0}
.site-footer h5{font-family:var(--font-display);color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-wide);margin:0 0 var(--space-4)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.site-footer ul a{color:rgba(255,255,255,.72);font-size:var(--fs-sm)}
.site-footer .bottom{margin-top:var(--space-8);padding:var(--space-5) 0 var(--space-6);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:var(--fs-xs)}
.hub{grid-column:1/-1;display:flex;justify-content:center;margin-bottom:var(--space-4)}
.hub .box{display:flex;flex-direction:column;align-items:center;gap:.4rem;background:var(--gradient-brand);color:#fff;border-radius:var(--radius-lg);padding:1.25rem 2.5rem;box-shadow:var(--shadow-primary)}
.hub .box b{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:1.75rem;letter-spacing:var(--ls-tight)}
.hub .box span{font-size:var(--fs-xs);opacity:.9;letter-spacing:var(--ls-wide);text-transform:uppercase}
.stake{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.node{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-card);box-shadow:var(--shadow-xs);transition:all var(--dur-base) var(--ease-out)}
.node:hover{background:var(--color-primary-subtle);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.node.wide{grid-column:1/-1}
.node .ic{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--color-primary-subtle);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.node b{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong);font-size:var(--fs-sm)}
.act-list{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.act-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-body)}
.act-list li i{color:var(--color-primary);flex-shrink:0;margin-top:2px}
.act-img{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.act-img img{width:100%;height:380px;object-fit:cover;display:block}
.riset{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-6)}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5);margin-top:var(--space-8)}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.person.lead{border-color:transparent;background:var(--gradient-navy);box-shadow:var(--shadow-lg)}
.person .av{width:72px;height:72px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.4rem;background:var(--color-primary-subtle);color:var(--color-primary)}
.person.lead .av{background:rgba(255,255,255,.15);color:#fff}
.person .nm{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong)}
.person .rl{margin:.25rem 0 0;font-size:var(--fs-sm);color:var(--text-muted)}
.person.lead .nm{color:#fff}.person.lead .rl{color:rgba(255,255,255,.75)}
@media(max-width:820px){.two,.cta-grid,.riset{grid-template-columns:1fr}.site-footer .cols{grid-template-columns:1fr 1fr}.site-nav ul{display:none}}

/* ============ Collision-safe section layouts ============ */
.icms-role-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.icms-stakeholder-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(108px,auto));align-items:center;gap:var(--space-4);min-width:0;padding:1rem}
.icms-stakeholder-grid::before{content:"";position:absolute;left:50%;top:50%;width:min(58%,280px);aspect-ratio:1;border:1px dashed var(--blue-200);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.icms-stakeholder-grid .icms-hub{position:relative;z-index:2;grid-column:2;grid-row:2;display:flex;justify-content:center;margin:0}
.icms-stakeholder-grid .icms-hub-box{width:132px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:var(--gradient-brand);color:#fff;border:8px solid var(--blue-50);border-radius:50%;padding:0;box-shadow:var(--shadow-primary)}
.icms-stakeholder-grid .icms-hub-box b{font-family:var(--font-display);font-weight:var(--fw-extra);font-size:1.75rem;letter-spacing:var(--ls-tight)}
.icms-stakeholder-grid .icms-hub-box span{font-size:var(--fs-xs);opacity:.9;letter-spacing:var(--ls-wide);text-transform:uppercase}
.icms-stakeholder{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;min-width:0;padding:.9rem 1.1rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.icms-stakeholder-industry{grid-column:1;grid-row:1}
.icms-stakeholder-policy{grid-column:3;grid-row:1}
.icms-stakeholder-academic{grid-column:1;grid-row:2}
.icms-stakeholder-media{grid-column:3;grid-row:2}
.icms-stakeholder-consumer{grid-column:2;grid-row:3}
.icms-stakeholder .icms-stakeholder-icon{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--color-primary-subtle);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.icms-stakeholder b{min-width:0;font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong);font-size:var(--fs-sm);overflow-wrap:normal;word-break:normal}
.icms-activity-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;margin-top:var(--space-8)}
.icms-activity-copy{min-width:0}
.icms-activity-image{min-width:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.icms-activity-image img{display:block;width:100%;height:380px;object-fit:cover}
.icms-research-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-6)}
.icms-people-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-8)}
.icms-person-card{display:flex;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:.75rem;padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.icms-person-card.icms-person-lead{border-color:transparent;background:var(--gradient-navy);box-shadow:var(--shadow-lg)}
.icms-person-avatar{width:72px;height:72px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.4rem;background:var(--color-primary-subtle);color:var(--color-primary)}
.icms-person-lead .icms-person-avatar{background:rgba(255,255,255,.15);color:#fff}
.icms-person-name{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-strong);overflow-wrap:normal;word-break:normal}
.icms-person-role{margin:.25rem 0 0;font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:normal;word-break:normal}
.icms-person-lead .icms-person-name{color:#fff}.icms-person-lead .icms-person-role{color:rgba(255,255,255,.75)}
@media(max-width:1000px){.icms-people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.icms-role-layout,.icms-activity-layout,.icms-research-grid{grid-template-columns:1fr}.icms-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.icms-activity-image img{height:300px}}
@media(max-width:820px){.icms-stakeholder-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:0}.icms-stakeholder-grid::before{display:none}.icms-stakeholder-grid .icms-hub{grid-column:1/-1;grid-row:auto;margin-bottom:var(--space-3)}.icms-stakeholder-industry,.icms-stakeholder-policy,.icms-stakeholder-academic,.icms-stakeholder-media,.icms-stakeholder-consumer{grid-column:auto;grid-row:auto}.icms-stakeholder-consumer{grid-column:1/-1}}
@media(max-width:520px){.icms-stakeholder-grid,.icms-people-grid{grid-template-columns:1fr}.icms-stakeholder-grid .icms-hub,.icms-stakeholder-consumer{grid-column:auto}.icms-person-card{padding:var(--space-5)}}