/* ================================================================
   alur-perizinan.css - empat langkah perizinan (partials/07-alur-perizinan.html)
   Satu partial = satu berkas CSS. Token global ada di base.css.
   SEMUA kelas di berkas ini berawalan "alur-": CSS itu satu ruang nama
   global, memisahkan berkas saja tidak memberi ruang nama sendiri.

   Prinsip (lanjutan Revisi 12): FLAT. Tanpa gradasi dua-warna, tanpa glow.

   REVISI 20 - dari daftar menjadi STEPPER KARTU.
   Dulu keempat langkah tampil sama rata. Sekarang satu langkah aktif
   bergantian: kartunya berwarna, terangkat, dan disapu kilau sekali.
   Yang TIDAK berubah: seluruh teks keempat langkah tetap terbaca setiap
   saat. Yang bergerak hanya sorotan, bukan isinya - jadi pengunjung yang
   sedang membaca langkah 3 tidak pernah kehilangan kalimatnya.
   ================================================================ */

/* Latar --soft menandai pergantian topik dari Aplikasi Terkait (putih).
   Hanya dua nada dipakai di seluruh halaman; nada ketiga akan membuat
   halaman terlihat seperti tumpukan kartu berbeda tema. */
.alur{padding:clamp(52px,6.5vw,86px) 0 clamp(52px,6vw,84px);
  position:relative;isolation:isolate;background:var(--soft);
  border-top:1px solid var(--seam);border-bottom:1px solid var(--seam)}

/* titik matriks diturunkan ke .05 - di atas latar abu, opasitas .07 seperti
   di Aplikasi Terkait berubah jadi bercak kotor, bukan tekstur */
.alur::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(var(--accent) 1px,transparent 1px);
  background-size:26px 26px;opacity:.05;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 45%,#000 28%,transparent 76%);
  mask-image:radial-gradient(120% 80% at 50% 45%,#000 28%,transparent 76%)}

.alur-deko{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  fill:none;pointer-events:none}
.alur-arus{stroke:var(--accent);stroke-width:1.25;stroke-linecap:round;opacity:.18;
  stroke-dasharray:1600 1600;stroke-dashoffset:1600}
.alur.tampil .alur-arus{animation:alur-travel 7s cubic-bezier(.45,0,.3,1) infinite}
.alur.tampil .alur-arus.a2{animation-delay:1.6s;animation-duration:8s;opacity:.12;stroke-width:1}
@keyframes alur-travel{
  0%{stroke-dashoffset:1600}42%{stroke-dashoffset:0}
  56%{stroke-dashoffset:0}98%{stroke-dashoffset:-1600}100%{stroke-dashoffset:-1600}}
.alur-node{fill:var(--accent);opacity:0}
.alur.tampil .alur-node{opacity:.5;animation:alur-denyut 2.8s ease-in-out infinite}
@keyframes alur-denyut{0%,100%{opacity:.5}50%{opacity:.18}}

/* ---------------- kepala section ---------------- */
.alur-kepala{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,56px);margin-bottom:clamp(28px,3.4vw,44px)}
.alur-eyebrow{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.alur-judul{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.4px;
  font-size:clamp(23px,2.6vw,34px);line-height:1.1;color:var(--ink)}
.alur-ket{margin:0;max-width:48ch;font-size:13.5px;line-height:1.6;color:var(--ink2)}

/* ---------------- rel penunjuk posisi ----------------
   Rel dipisah dari kartu dan naik ke atasnya. Sebelumnya garis harus
   menembus keempat kolom pada ketinggian titik; begitu langkah menjadi
   kartu bersudut, garis yang memotong kartu jadi terlihat seperti cacat
   cetak. Rel murni dekoratif -> aria-hidden di markup.
   Empat titik dibagi rata; jalurnya berhenti di pusat titik pertama dan
   terakhir (12.5% = setengah kolom di masing-masing ujung). */
.alur-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;height:16px;margin-bottom:clamp(14px,1.6vw,20px)}
.alur-jalur{position:absolute;left:12.5%;right:12.5%;top:50%;transform:translateY(-50%);
  height:2px;background:var(--line);border-radius:2px;overflow:hidden}
/* --maju diisi JS: 0, .333, .667, 1 mengikuti langkah aktif */
.alur-isi{position:absolute;inset:0;background:var(--accent);
  transform:scaleX(var(--maju,0));transform-origin:left;
  transition:transform .55s var(--ease)}
.alur-titik{justify-self:center;position:relative;width:14px;height:14px;border-radius:50%;
  background:var(--soft);border:2px solid var(--line);
  transition:border-color .35s ease,background .35s ease,transform .35s var(--ease),
    box-shadow .35s ease}
.alur-titik::after{content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--accent);transform:scale(0);transition:transform .3s var(--ease)}
.alur-titik.lewat{border-color:var(--accent);background:var(--canvas)}
.alur-titik.lewat::after{transform:scale(1)}
/* titik yang sedang aktif diberi cincin lembut, bukan diperbesar berlebihan */
.alur-titik.kini{border-color:var(--accent);background:var(--canvas);
  transform:scale(1.2);box-shadow:0 0 0 5px var(--accent-soft)}

/* ---------------- empat kartu langkah ---------------- */
.alur-rel{position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}

.alur-item{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(17px,1.7vw,23px);border-radius:var(--r-xl);
  background:var(--canvas);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:background .42s var(--ease),border-color .42s ease,
    box-shadow .42s ease,transform .42s var(--ease),opacity .5s ease}

/* kemunculan pertama saat section masuk layar (jeda --d dari JS) */
.alur .alur-item{opacity:0;transform:translateY(10px);transition-delay:var(--d,0ms)}
.alur.tampil .alur-item{opacity:1;transform:none;transition-delay:var(--d,0ms)}

/* kartu yang bisa diklik memberi tanda kecil bahwa ia bisa disentuh */
.alur.bisa-klik .alur-item{cursor:pointer}
.alur.tampil .alur-item:hover{border-color:var(--accent-line);transform:translateY(-2px)}

/* ----- KARTU AKTIF -----
   Warna rata var(--accent), bukan gradasi: aturan flat tetap berlaku.
   Kenaikan 6px dan bayangan beraksen yang membuatnya terbaca "maju",
   bukan sekadar berganti warna. */
.alur.tampil .alur-item.aktif,
.alur.tampil .alur-item.aktif:hover{background:var(--accent);border-color:var(--accent);
  box-shadow:0 16px 38px var(--accent-shadow);transform:translateY(-6px)}
.alur-item.aktif .alur-no{color:rgba(255,255,255,.7)}
.alur-item.aktif .alur-nama{color:#fff}
.alur-item.aktif .alur-teks{color:rgba(255,255,255,.88)}
.alur-item.aktif .alur-waktu{background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.36);color:#fff}
.alur-item.aktif .alur-waktu::before{background:#fff}

/* ----- KILAU -----
   Satu sapuan miring, sekali, tepat saat kartu menjadi aktif. Animasi
   dipasang lewat kelas .aktif sehingga otomatis terulang setiap giliran.
   Lebarnya 42% supaya terbaca sebagai pantulan cahaya, bukan lampu sorot. */
.alur-kilau{position:absolute;top:-40%;bottom:-40%;left:0;width:42%;z-index:2;
  pointer-events:none;opacity:0;transform:translateX(-170%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0))}
/* .45 sempat dicoba dan tertangkap di tangkapan layar: saat sapuan lewat di
   tengah kartu, teks putihnya ikut pudar hampir tak terbaca selama ~1 detik.
   .3 masih terbaca sebagai pantulan cahaya tanpa menutupi kalimat. */
.alur-item.aktif .alur-kilau{animation:alur-kilau 1.05s cubic-bezier(.32,0,.22,1) .1s 1}
@keyframes alur-kilau{
  0%{opacity:0;transform:translateX(-170%) skewX(-18deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translateX(330%) skewX(-18deg)}}

/* nomor mono - penanda urutan, bukan hiasan yang berteriak */
.alur-no{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:1.6px;color:var(--accent-strong);margin-bottom:9px;
  transition:color .42s ease}
.alur-nama{margin:0 0 8px;font-size:15px;font-weight:800;line-height:1.35;color:var(--ink);
  transition:color .42s ease}
.alur-teks{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--ink2);
  transition:color .42s ease}

/* keping waktu: informasi yang paling dicari pemohon */
.alur-waktu{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent-strong);
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.3px;
  transition:background .42s ease,border-color .42s ease,color .42s ease}
.alur-waktu::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  transition:background .42s ease}

/* ---------------- kaki section ---------------- */
.alur-kaki{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:16px;margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line)}
.alur-catatan{margin:0;font-size:13.5px;color:var(--ink2)}
.alur-aksi{display:flex;gap:10px;flex-wrap:wrap}
.alur-tombol{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:999px;border:1px solid var(--accent-line);background:var(--canvas);
  color:var(--accent-strong);font-size:13px;font-weight:700;text-decoration:none;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease)}
.alur-tombol:hover{transform:translateY(-1px);border-color:var(--accent)}
.alur-tombol.utama{background:var(--accent);border-color:var(--accent);color:#fff}
.alur-tombol.utama:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.alur-tombol:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------- ringkas ---------------- */
@media (max-width:1100px){
  .alur-rel{grid-template-columns:repeat(2,1fr)}
  /* rel mendatar tidak lagi sejajar dengan kartu begitu barisnya pecah */
  .alur-rail{display:none}
}
@media (max-width:900px){
  .alur-kepala{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:620px){
  .alur-rel{grid-template-columns:1fr}
  .alur::before{background-size:20px 20px}
  .alur-kaki{flex-direction:column;align-items:flex-start}
  .alur-aksi{width:100%}
  .alur-tombol{flex:1;justify-content:center}
}

/* Gerakan dikurangi: putaran otomatis dimatikan dari JS. Di sini kilau dan
   seluruh transisi ikut dimatikan; kartu langkah 1 tetap ditandai supaya
   urutannya masih terbaca. */
@media (prefers-reduced-motion:reduce){
  .alur-arus{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
  .alur-node{opacity:.45!important;animation:none!important}
  .alur .alur-item{opacity:1!important;transform:none!important;transition:none!important}
  .alur.tampil .alur-item.aktif{transform:none!important}
  .alur-kilau{display:none!important}
  .alur-isi,.alur-titik,.alur-titik::after,.alur-no,.alur-nama,.alur-teks,
  .alur-waktu,.alur-tombol{transition:none!important}
}