/* ── proyek ───────────────────────────────────────────────── */
.proj{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,3vw,44px); align-items:start; }
.proj-map{ border:1px solid var(--line); background:var(--surface); padding:14px; }
.proj-map svg{ width:100%; height:auto; display:block; }
.proj-map .mapsvg{ font-family:"JetBrains Mono",monospace; }
.proj-map .tl{ fill:var(--txt); } .proj-map .ts{ fill:var(--dim); }
/* penanda lokasi konsesi: sumber sinyal di peta, jadi ia yang berdenyut paling
   jelas. cincin memancar dari lingkaran dalam (r10) tepat sampai garis putus-putus
   (r22) — skala 2,2 — supaya pancaran berhenti pada batas yang sudah ada, bukan
   melewatinya. irama 2,6 s, kurva dan jeda yang sama dengan denyut pin & kartu log. */
.anchor .ping{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:anchor-ping 2.6s linear infinite;
}
.anchor .ping.p2{ animation-delay:-1.3s; }
.anchor .core{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:anchor-core 1.3s ease-out infinite;
}
@keyframes anchor-ping{
  0%  { transform:scale(1);    opacity:0; }
  10% { transform:scale(1.04); opacity:.85; }
  45% { transform:scale(1.6);  opacity:.45; }
  90% { transform:scale(2.2);  opacity:0; }
  100%{ transform:scale(2.2);  opacity:0; }
}
@keyframes anchor-core{
  0%  { transform:scale(1); }
  10% { transform:scale(1.3); }
  55% { transform:scale(1); }
  100%{ transform:scale(1); }
}
/* Peta menampilkan label milik log yang sedang disorot saja. Dua kartu sekaligus
   menutupi garis pantai dan terbaca sebagai daftar kedua; satu kartu membuat peta
   menjawab satu pertanyaan — "yang ini, di sini". Kartu .log di sebelahnya yang
   memegang kendali, jadi pin sendiri tidak lagi bisa diklik (lihat blok skrip);
   visibility ikut dimatikan agar teks yang tersembunyi tidak dibacakan dua kali. */
.pin{ visibility:hidden; opacity:0; transition:opacity .22s ease, visibility 0s linear .22s; }
.pin.on{ visibility:visible; opacity:1; transition:opacity .22s ease, visibility 0s linear 0s; }
.pin .halo,.pin .lead{ transition:fill .2s, stroke .2s, stroke-width .2s; }
/* peta memakai tanda yang sama dengan kartu log: berjalan menyala dan berdenyut,
   selesai ditandai centang abu. Urutan penting — semua selektor ini sama kuat. */
.pin[data-status="done"] .brk{ stroke:var(--num); }
.pin[data-status="live"] .halo{ stroke:rgba(248,104,0,.45); }
/* Kartu berjalan ditandai oleh kartunya sendiri, bukan oleh titik kecil di pojok:
   satu ruas terang berlari mengelilingi tepi label. Keliling rect 132x44 = 352 unit,
   jadi dasharray 46/306 menyisakan tepat satu ruas, dan dashoffset -352 dalam 2,6 s
   membawanya sekali putar — irama yang sama dengan denyut anchor dan kartu log.
   Stroke dikunci ke ruang layar agar ruas tetap setipis garis peta di segala lebar.
   Warnanya oranye yang lebih terang, bukan --orange: saat pin tersorot tepinya sudah
   oranye penuh, dan ruas sewarna akan hilang justru di keadaan yang paling sering
   terlihat. Tint terang membuatnya terbaca di atas tepi redup maupun tepi menyala. */
.pin[data-status="live"] .scan{
  stroke-dasharray:46 306;
  animation:pin-scan 2.6s linear infinite;
}
.pin[data-status="done"] .scan{ display:none; }
@keyframes pin-scan{
  from{ stroke-dashoffset:0; }
  to  { stroke-dashoffset:-352; }
}
.pin.on .halo{ fill:var(--surface); stroke:var(--orange); }
.pin.on .lead{ stroke:var(--orange); }
.pin.on .brk{ stroke:var(--orange-br); }
.pin.on .mk{ stroke:var(--orange-br); }
.proj-map .cap{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); line-height:1.55; }
/* Status pekerjaan (selesai / berjalan) dan sorotan dari peta (.active) adalah dua
   hal berbeda, jadi dua bahasa visual yang berbeda pula: status pada lencana,
   sorotan pada bingkai kartu. Sebelumnya keduanya sama-sama oranye, sehingga
   mengklik LOG 01 membuat "Selesai" terbaca seperti berjalan. */
.logs{ display:flex; flex-direction:column; gap:14px; }
.log{ border:1px solid var(--line); background:var(--surface); padding:clamp(20px,2.2vw,28px); position:relative; transition:border-color .2s; cursor:pointer; }
.log[data-status="live"]{ border-color:rgba(248,104,0,.3); }
.log:focus{ outline:none; }
.log:focus-visible{ outline:2px solid var(--orange-br); outline-offset:3px; }
/* irama sama dengan denyut di peta (2,6 s, kurva yang sama) supaya satu sinyal
   "berjalan" terbaca serempak di kedua tempat. denyut berakhir tanpa bayangan,
   jadi aman saat animasi dipangkas prefers-reduced-motion */
@keyframes log-pulse{
  0%  { box-shadow:0 0 0 0 rgba(248,104,0,0); }
  10% { box-shadow:0 0 0 1px rgba(248,104,0,.45); }
  85% { box-shadow:0 0 0 7px rgba(248,104,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(248,104,0,0); }
}
@keyframes log-core{
  0%  { transform:scale(1); }
  10% { transform:scale(1.35); }
  55% { transform:scale(1); }
  100%{ transform:scale(1); }
}
.log-top{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:14px; }
.log-top .id{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; color:var(--orange-br); }
.log-top .status{
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:4px 9px; color:var(--txt-2); margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
}
.log-top .status::before{ content:""; flex:none; }
.log[data-status="done"] .status::before{
  width:8px; height:4px; border-left:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(-45deg) translate(1px,-1px);
}
.log[data-status="live"] .status{ color:var(--orange-br); border-color:rgba(248,104,0,.45); background:rgba(248,104,0,.07); }
.log[data-status="live"] .status::before{
  width:6px; height:6px; border-radius:50%; background:var(--orange-br);
  animation:log-pulse 2.6s ease-out infinite, log-core 2.6s ease-out infinite;
}
.log dd .now{ color:var(--orange-br); }

/* sorotan peta memakai kurung sudut — tanda yang sama dengan kartu di dalam peta */
.log.active{ border-color:var(--orange); }
.log.active .log-top::before,.log.active .log-top::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--orange); border-style:solid; border-width:0;
}
.log.active .log-top::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.log.active .log-top::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.log h3{ font-size:clamp(18px,1.7vw,23px); font-variation-settings:"wdth" 106,"wght" 700; }
.log dl{ margin:14px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 16px; font-size:13.5px; }
.log dt{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); padding-top:3px; }
.log dd{ margin:0; color:var(--txt-2); }
.log .scope{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; }
.log .scope span{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.05em; border:1px solid var(--line-2); padding:5px 9px; color:var(--txt-2); }
@media (max-width:900px){ .proj{ grid-template-columns:1fr; } }

/* Rekam jejak tenaga ahli: daftar gabungan dari notulen klien, tanpa nama
   per orang (klien belum memisahkannya). Tahun di kolom kiri, entri terbaru
   di atas. */
.xp{ margin-top:clamp(44px,5vw,72px); }
.xp-head{ display:grid; gap:10px; margin-bottom:clamp(20px,2.4vw,32px); }
.xp-head h3{ font-size:clamp(22px,2.4vw,30px); font-variation-settings:"wdth" 110,"wght" 800; }
.xp-head h3 em{ font-style:normal; color:var(--orange-br); }
.xp-head p{ color:var(--txt-2); max-width:62ch; }
.xp-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.xp-year{ display:grid; grid-template-columns:clamp(110px,14vw,180px) minmax(0,1fr); gap:clamp(14px,2vw,32px); padding:clamp(18px,2vw,26px) 0; border-bottom:1px solid var(--line); }
.xp-year h4{ font-family:Archivo,sans-serif; font-size:clamp(18px,1.8vw,24px); font-variation-settings:"wdth" 108,"wght" 800; color:var(--orange); line-height:1.2; }
.xp-year ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.xp-year ol > li{ display:grid; grid-template-columns:clamp(130px,13vw,170px) minmax(0,1fr); gap:6px 18px; }
.xp-when{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); padding-top:3px; }
.xp-year b{ display:block; font-size:15px; font-weight:600; }
.xp-year ol > li > div > span{ display:block; font-size:14px; color:var(--txt-2); margin-top:2px; line-height:1.55; }
.xp-sub{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.xp-sub li{ position:relative; padding-left:16px; font-size:13.5px; color:var(--txt-2); line-height:1.6; }
.xp-sub li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--orange); }
.xp-sub b{ display:inline; font-size:inherit; color:var(--txt); }
@media (max-width:720px){
  .xp-year{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .xp-year ol > li{ grid-template-columns:minmax(0,1fr); gap:2px; }
}