/* =========================================================================
   AGENCY GROWTH ENGINE — terasa seperti aplikasi, bukan halaman WordPress.
   ========================================================================= */

/* Pohon hierarki */
.ag-tree,.ag-tree ul{list-style:none;margin:0;padding:0}
.ag-tree ul{margin-left:1rem;border-left:1px dashed var(--line);padding-left:.9rem}
.ag-node summary{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;margin:.3rem 0;list-style:none}
.ag-node summary::-webkit-details-marker{display:none}
.ag-node summary:hover{border-color:var(--color-primary)}
.ag-node .ag-dot{width:9px;height:9px;border-radius:50%;background:var(--color-primary);flex:none}
.ag-node[style*="--lv:0"] .ag-dot{background:var(--color-navy)}
.ag-node[style*="--lv:1"] .ag-dot{background:#4E7FA8}
.ag-node[style*="--lv:3"] .ag-dot{background:var(--color-accent)}
.ag-node .mid{flex:1;min-width:0}
.ag-node b{display:block;color:var(--color-navy);font-size:.93rem}
.ag-node em{font-style:normal;font-size:.78rem;color:var(--muted)}
.ag-meta{font-size:.78rem;color:var(--muted);white-space:nowrap}
.ag-node details[open] > summary{background:#fff;border-color:var(--color-primary)}

/* Pilihan struktur */
.ag-struct{display:grid;gap:.6rem;margin-top:.5rem}
.ag-st{text-align:left;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer}
.ag-st.is-active{border-color:var(--color-primary);background:var(--color-primary-100)}
.ag-st .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--color-primary-600);margin-bottom:.25rem}
.ag-st b{display:block;color:var(--color-navy)}
.ag-st em{font-style:normal;font-size:.82rem;color:var(--muted)}

/* Atribusi berjenjang */
.ag-attr{display:grid;gap:.4rem;margin-top:.5rem}
.ag-at{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--color-bg);margin-left:calc(var(--d) * 18px)}
.ag-at b{display:block;color:var(--color-navy);font-size:.92rem}
.ag-at em{font-style:normal;font-size:.8rem;color:var(--muted)}
.ag-at .rp{font-weight:750;color:var(--color-primary)}

/* Skor kesehatan (ring) */
.ag-health{display:grid;gap:.55rem;margin-top:.4rem}
.ag-h{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--color-bg)}
.ring{position:relative;width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--color-primary) calc(var(--v) * 1%),var(--color-surface) 0)}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.ring b{position:relative;z-index:1;font-size:.85rem;color:var(--color-navy);font-weight:800}
.ag-h .mid b{display:block;color:var(--color-navy);font-size:.92rem}
.ag-h .mid em{font-style:normal;font-size:.8rem;color:var(--muted)}

/* Rincian agen tidak aktif */
.ag-break{display:grid;gap:.5rem}
.ag-break div{background:var(--color-bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .8rem}
.ag-break b{font-size:1.15rem;color:#B4441B;margin-right:.4rem}
.ag-break span{font-weight:650;color:var(--color-navy);font-size:.9rem}
.ag-break em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* Tiga mesin pertumbuhan */
.ag-engines{display:grid;gap:.8rem;margin-top:.5rem}
.ag-eng{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;background:var(--color-bg);border-top:3px solid var(--color-primary)}
.ag-eng.is-2{border-top-color:var(--color-accent)}
.ag-eng.is-3{border-top-color:var(--color-navy)}
.ag-eng .n{position:absolute;right:1rem;top:.7rem;font-size:1.9rem;font-weight:800;color:rgba(15,107,91,.12)}
.ag-eng h3{font-size:1.02rem;margin:0 0 .25rem}
.ag-eng p{margin:0 0 .7rem;font-size:.86rem;color:var(--muted)}
.ag-eng ol{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ag-eng li{list-style:none;font-size:.78rem;font-weight:650;color:var(--color-navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.28rem .6rem}

/* Performa wilayah */
.ag-wil{display:grid;gap:.7rem;margin-top:.5rem}
.ag-w{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem;background:var(--color-bg)}
.ag-w-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.ag-w-top b{color:var(--color-navy)}
.ag-w-top .konv{font-weight:750;color:var(--color-primary)}
.ag-w .bar{display:block;height:8px;border-radius:99px;background:var(--color-surface);overflow:hidden}
.ag-w .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--color-primary),#17937C);
  animation:grow .8s var(--ease) both;transform-origin:left}
.ag-w-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.7rem}
.ag-w-grid div{text-align:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:.45rem .3rem}
.ag-w-grid b{display:block;font-size:.95rem;color:var(--color-navy)}
.ag-w-grid span{font-size:.7rem;color:var(--muted)}
.ag-link{display:block;text-decoration:none}
.ag-link h2{font-size:1.05rem;margin:0 0 .2rem}
.ag-link:hover{border-color:var(--color-primary)}

/* Komisi */
.ag-komisi{display:grid;gap:.6rem;margin-top:.4rem}
.ag-k{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem;background:var(--color-bg);border-left:3px solid #A8845A}
.ag-k.is-silver{border-left-color:#9AA7B4}
.ag-k.is-gold{border-left-color:var(--color-accent)}
.ag-k.is-platinum{border-left-color:var(--color-primary)}
.ag-k .lv{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ag-k b{display:block;font-size:1.15rem;color:var(--color-navy)}
.ag-k em{font-style:normal;font-size:.8rem;color:var(--muted)}
.ag-two{display:grid;gap:1rem;margin-top:1rem}
.ag-h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.ag-bonus{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.ag-bonus li{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem .75rem;background:var(--color-bg);
  border:1px solid var(--line);border-radius:9px;font-size:.88rem}
.ag-bonus b{color:var(--color-navy)}

/* Papan peringkat */
.lb-tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .8rem;scrollbar-width:none}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lb-list li{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--color-bg)}
.lb-list .rank{font-weight:800;color:var(--muted);width:2rem;flex:none}
.lb-list .rank.is-top{color:var(--color-accent)}
.lb-list .av{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--color-primary-100);color:var(--color-primary-600);font-weight:750;font-size:.74rem}
.lb-list .mid{flex:1;min-width:0}
.lb-list b{display:block;color:var(--color-navy);font-size:.92rem}
.lb-list em{font-style:normal;font-size:.78rem;color:var(--muted)}
.lb-list .val{font-weight:750;color:var(--color-navy);white-space:nowrap}

/* Perhatian koordinator */
.ag-attn{display:grid;gap:.5rem}
.ag-an{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--color-bg)}
.ag-an b{font-size:1.3rem;color:var(--color-navy)}
.ag-an.is-urgent{background:#FFF6F1;border-color:#F6D6C6}
.ag-an.is-urgent b{color:#B4441B}
.ag-an.is-ok{background:#E6F5EE;border-color:#C9E9DA}
.ag-an.is-ok b{color:var(--ok)}

/* Level badge di tabel agen */
.lvl{font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:.2rem .5rem;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.lvl.is-bronze{background:#F5EDE4;color:#8A6440;border-color:#E7D8C6}
.lvl.is-silver{background:#EFF2F5;color:#5C6B7A;border-color:#DDE3E9}
.lvl.is-gold{background:var(--color-accent-100);color:#8A6B2A;border-color:rgba(198,161,91,.45)}
.lvl.is-platinum{background:var(--color-primary-100);color:var(--color-primary-600);border-color:rgba(15,107,91,.25)}

/* Academy */
.ac-cert{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.ac-cert .k{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ac-cert b{font-size:1.05rem;color:var(--color-navy)}
.ac-cert em{display:block;font-style:normal;font-size:.85rem;color:var(--muted)}
.ac-score{display:flex;align-items:center;gap:.75rem}
.ac-score .ring{width:58px;height:58px}
.ac-score b{font-size:.9rem;color:var(--color-accent)}
.ac-grid{display:grid;gap:.7rem}
.ac-mod{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:var(--card);box-shadow:var(--shadow)}
.ac-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.35rem}
.ac-mod h3{font-size:.98rem;margin:0}
.ac-mod p{margin:0 0 .8rem;font-size:.85rem;color:var(--muted)}

/* Marketing assets */
.as-grid{display:grid;gap:.6rem;margin-top:.4rem}
.as-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem;background:var(--color-bg)}
.as-item b{display:block;color:var(--color-navy);font-size:.92rem}
.as-item em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);margin:.2rem 0 .7rem}
.as-prev{background:linear-gradient(150deg,var(--color-navy),#123F35);color:#fff;border-radius:var(--radius);padding:1.2rem;min-height:260px;
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden}
.as-prev::after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgba(198,161,91,.16)}
.as-brand{font-size:.8rem;letter-spacing:.24em;color:var(--color-accent);font-weight:800}
.as-judul{font-size:1.4rem;line-height:1.2;letter-spacing:-.01em}
.as-agen{margin-top:auto;position:relative}
.as-agen .k,.as-foot .k{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.as-agen b{font-size:1.1rem}
.as-agen em{font-style:normal;font-size:.85rem;color:rgba(255,255,255,.7)}
.as-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;position:relative}
.as-foot b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--color-accent);letter-spacing:.06em}
.as-foot em{font-style:normal;font-size:.8rem;color:rgba(255,255,255,.7)}
.as-qr{width:64px;height:64px;flex:none;border-radius:8px;background:
  repeating-linear-gradient(90deg,#fff 0 6px,#102A43 6px 12px),repeating-linear-gradient(0deg,#fff 0 6px,transparent 6px 12px);
  background-blend-mode:multiply;border:4px solid #fff}

/* ---------- AGENT APP (mobile-first, seperti aplikasi) ---------- */
body.agent-app{background:var(--color-bg);padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.agt-top{background:linear-gradient(155deg,var(--color-navy),#0F4C40);color:#fff;padding:1.1rem var(--gutter) 1.3rem;
  border-radius:0 0 22px 22px}
.agt-top-in{display:flex;align-items:center;gap:.75rem}
.agt-av{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);font-weight:750}
.agt-top .mid{flex:1;min-width:0}
.agt-top b{display:block;font-size:1.05rem}
.agt-top em{font-style:normal;font-size:.78rem;color:rgba(255,255,255,.7)}
.agt-rank{font-weight:800;color:var(--color-accent);font-size:1.05rem}
.agt-target{margin-top:1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.8rem .9rem}
.agt-target-top{display:flex;justify-content:space-between;gap:.6rem;font-size:.82rem;color:rgba(255,255,255,.8);margin-bottom:.4rem}
.agt-target-top b{color:#fff}
.agt-target .bar{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.agt-target .bar i{display:block;height:100%;border-radius:99px;background:var(--color-accent);animation:grow .9s var(--ease) both;transform-origin:left}
.agt-target p{margin:.5rem 0 0;font-size:.8rem;color:rgba(255,255,255,.78)}
.agt-main{padding:0 var(--gutter)}
.agt-sec{margin-top:1.3rem}
.agt-h{font-size:.95rem;margin:0 0 .6rem;color:var(--color-navy)}
.agt-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:-1.6rem;position:relative;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:.8rem .6rem;box-shadow:var(--shadow-lg)}
.agt-quick a,.agt-quick button{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-size:.68rem;font-weight:650;
  color:var(--color-navy);text-align:center;text-decoration:none;background:none;border:0;cursor:pointer}
.agt-quick svg{width:22px;height:22px;color:var(--color-primary)}
.agt-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.agt-k{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;box-shadow:var(--shadow)}
.agt-k b{display:block;font-size:1.2rem;color:var(--color-navy);letter-spacing:-.02em}
.agt-k span{font-size:.76rem;color:var(--muted)}
.agt-pipe{display:grid;gap:.5rem}
.agt-p{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;box-shadow:var(--shadow)}
.agt-p-top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.4rem}
.agt-p-top b{color:var(--color-navy)}
.agt-p .bar{display:block;height:7px;border-radius:99px;background:var(--color-surface);overflow:hidden}
.agt-p .bar i{display:block;height:100%;border-radius:99px;background:var(--color-primary);animation:grow .7s var(--ease) both;transform-origin:left}
.agt-inc{background:linear-gradient(135deg,var(--color-primary),#0B5A4C);color:#fff;border-radius:18px;padding:1.1rem;box-shadow:var(--shadow-lg)}
.agt-inc .k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.agt-inc > b{display:block;font-size:1.9rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-bottom:.8rem}
.agt-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.agt-inc-grid div{background:rgba(255,255,255,.12);border-radius:11px;padding:.5rem .6rem}
.agt-inc-grid span{display:block;font-size:.7rem;color:rgba(255,255,255,.7)}
.agt-inc-grid b{font-size:.86rem}
.agt-list{display:grid;gap:.45rem;margin-top:.7rem}
.agt-row{display:flex;align-items:center;gap:.65rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.agt-row .av{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--color-primary-100);
  color:var(--color-primary-600);font-weight:750;font-size:.74rem}
.agt-row .mid{flex:1;min-width:0}
.agt-row .mid b{display:block;font-size:.9rem;color:var(--color-navy)}
.agt-row .mid em{font-style:normal;font-size:.78rem;color:var(--muted)}
.agt-row .right{text-align:right;flex:none}
.agt-row .right b{display:block;font-size:.9rem;color:var(--color-navy)}
.agt-row.is-mod .bar{display:block;height:6px;border-radius:99px;background:var(--color-surface);overflow:hidden;margin-top:.4rem}
.agt-row.is-mod .bar i{display:block;height:100%;border-radius:99px;background:var(--color-primary)}
.agt-level{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.agt-lv{text-align:center;padding:.6rem .3rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.agt-lv b{display:block;font-size:.84rem;color:var(--muted)}
.agt-lv span{font-size:.7rem;color:var(--muted)}
.agt-lv.is-now{background:var(--color-primary);border-color:var(--color-primary)}
.agt-lv.is-now b,.agt-lv.is-now span{color:#fff}
.agt-lv.is-next{border-style:dashed;border-color:var(--color-accent)}
.agt-lv.is-next b{color:#8A6B2A}
.agt-note{margin:.6rem 0 0;font-size:.8rem;color:var(--muted)}
.agt-sim{display:flex;align-items:center;gap:.5rem;margin:1.6rem 0 0;font-size:.78rem;color:var(--muted)}
.agt-sim .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent)}
.agt-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 26px rgba(16,42,67,.08)}
.agt-nav a,.agt-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:62px;font-size:.68rem;font-weight:650;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer}
.agt-nav svg{width:21px;height:21px}
.agt-nav a.is-active{color:var(--color-primary)}
.agt-nav .is-cta{color:#fff;position:relative}
.agt-nav .is-cta::before{content:"";position:absolute;top:6px;width:46px;height:46px;border-radius:16px;
  background:linear-gradient(140deg,var(--color-primary),#0B5A4C);box-shadow:0 10px 22px rgba(15,107,91,.35)}
.agt-nav .is-cta svg,.agt-nav .is-cta span{position:relative;z-index:1}
.agt-nav .is-cta span{color:var(--muted);margin-top:1.5rem}

/* Microsite agen */
.ags-kode{font-size:.78rem;font-weight:700;color:var(--t1);background:rgba(30,122,95,.1);padding:.35rem .7rem;border-radius:999px}
.ags-hero{padding:2rem 0}
.ags-hero-in{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap}
.ags-av{width:76px;height:76px;flex:none;border-radius:24px;display:grid;place-items:center;background:var(--t1);color:#fff;
  font-weight:750;font-size:1.3rem}
.ags-kicker{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t1);font-weight:700;margin:0 0 .3rem}
.ags-hero h1{font-size:clamp(1.5rem,5vw,2.2rem);margin:0 0 .6rem}
.ags-lead{color:var(--soft);max-width:52ch}
.ags-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.ags-meta span{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:.5rem .75rem;font-size:.76rem;color:var(--soft)}
.ags-meta b{display:block;font-size:.95rem;color:var(--ink)}
.ags-paket{padding:2.4rem 0;background:var(--surf);border-block:1px solid var(--line)}
.ags-paket h2{font-size:clamp(1.3rem,3.6vw,1.9rem);margin:0 0 1.2rem}
.ags-share{padding:2.2rem 0}
.ags-link{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  background:var(--surf);border:1px dashed var(--line);border-radius:14px;padding:.9rem 1rem}
.ags-link .k{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
.ags-link b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
.ags-note{margin:.8rem 0 0;font-size:.85rem;color:var(--soft)}

@media (min-width:600px){
  .ag-struct,.ag-engines,.ag-komisi,.as-grid,.ac-grid{grid-template-columns:repeat(2,1fr)}
  .ag-wil{grid-template-columns:repeat(2,1fr)}
  .ag-break{grid-template-columns:repeat(3,1fr)}
  .ag-two{grid-template-columns:repeat(2,1fr)}
  .agt-kpi{grid-template-columns:repeat(4,1fr)}
  .agt-quick{grid-template-columns:repeat(7,1fr)}
}
@media (min-width:900px){
  .ag-engines,.ag-komisi{grid-template-columns:repeat(4,1fr)}
  .ag-engines{grid-template-columns:repeat(3,1fr)}
  .ag-health{grid-template-columns:repeat(1,1fr)}
  .as-grid,.ac-grid{grid-template-columns:repeat(4,1fr)}
  .ac-grid{grid-template-columns:repeat(2,1fr)}
  .agt-main{max-width:820px;margin-inline:auto}
  .agt-top{border-radius:0}
}