/* ================================================================
   aplikasi-terkait.css - direktori aplikasi (partials/06-aplikasi-terkait.html)
   Satu partial = satu berkas CSS. Token global ada di base.css.

   Prinsip (lanjutan Revisi 12): FLAT. Tanpa gradasi dua-warna, tanpa glow.
   Pemisah memakai hairline var(--line), bukan bayangan tebal.

   Inti desainnya satu kalimat: LOGO BOLEH BEDA-BEDA, UBINNYA HARUS SAMA.
   ================================================================ */

/* Revisi 16: kini section pertama sesudah hero (kartu Aksi Cepat dihapus),
   jadi jarak atas ditambah dan diberi jarak bawah untuk section berikutnya. */
.apl{padding:clamp(52px,6.5vw,84px) 0 clamp(44px,5vw,68px)}

/* ---------------- kepala section ---------------- */
.apl-kepala{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,56px);margin-bottom:clamp(20px,2.6vw,30px)}
.apl-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}
.apl-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)}
.apl-ket{margin:0;max-width:46ch;font-size:13.5px;line-height:1.6;color:var(--ink2)}

/* ---------------- kisi ubin ---------------- */
.apl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

.app{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 14px 20px;text-align:center;text-decoration:none;
  background:var(--canvas);border:1px solid var(--line);border-radius:16px;
  transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease}
.app:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-1)}
.app:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ubin logo: SATU cetakan untuk semua aplikasi */
/* overflow:visible (Revisi 16) supaya cincin putus-putus di :hover tidak terpotong */
.app-ubin{width:76px;height:76px;flex:none;display:grid;place-items:center;overflow:visible;position:relative;
  border-radius:18px;background:var(--soft);border:1px solid var(--line);
  transition:background .25s ease,border-color .25s ease,width .25s var(--ease)}
.app:hover .app-ubin{background:var(--accent-soft);border-color:var(--accent-line)}

/* Revisi 18 - logo asli. Tiga perubahan dibanding Revisi 17:
   1. 70% -> 84%. Ruang gambar efektif naik dari ~43px ke ~64px. Di bawah itu
      lambang berdetail (padi, kapas, tulisan melingkar) lebur jadi noda.
   2. grayscale dilepas. Meredam logo jadi abu lalu baru berwarna saat disentuh
      masuk akal untuk foto, tidak untuk logo: warna justru penanda utamanya.
   3. mix-blend-mode:multiply. Banyak logo instansi beredar sebagai PNG
      berlatar putih; multiply membuat putih itu lenyap ke latar ubin tanpa
      mengedit berkasnya. Aman untuk SVG/PNG transparan. */
.app-ubin img{width:84%;height:84%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .25s var(--ease)}
.app:hover .app-ubin img{transform:scale(1.04)}

/* --- wordmark melebar; kelas dipasang JS dari rasio gambar ---
   Logo seperti OSS dan SIMBG bukan persegi. Dipaksa masuk kotak persegi,
   object-fit menyusutkan lebarnya sampai tulisannya tidak terbaca. Jadi
   ubinnya yang dilebarkan, bukan logonya yang dikecilkan. */
.app.logo-lebar .app-ubin{width:118px;border-radius:16px}
.app.logo-lebar .app-ubin img{width:92%;height:64%}
.app.logo-lebar .app-ubin::after{border-radius:20px}

/* monogram: dipakai selama berkas logo belum tersedia */
.app-mono{font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.6px;
  color:var(--accent-strong);padding:0 4px}
.app.ada-logo .app-mono{display:none}

.app-nama{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.app-ket{font-size:11.5px;line-height:1.35;color:var(--ink3)}

/* panah eksternal kecil, muncul saat hover saja */
.app[target="_blank"]::after{content:"";position:absolute;right:11px;top:11px;width:11px;height:11px;
  opacity:0;transform:translate(-2px,2px);transition:opacity .25s ease,transform .25s ease;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
.app[target="_blank"]:hover::after{opacity:1;transform:translate(0,0)}

/* ---------------- responsif ---------------- */
@media (max-width:1100px){
  .apl-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .apl-kepala{flex-direction:column;align-items:flex-start;gap:10px}
  .apl-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (max-width:560px){
  .apl-grid{grid-template-columns:repeat(2,1fr)}
  .app{padding:18px 10px 16px;gap:10px}
  .app-ubin{width:54px;height:54px;border-radius:13px}
  .app-ket{display:none}   /* di ponsel nama saja sudah cukup */
}

/* ================================================================
   DEKORASI (Revisi 16)
   Empat lapis, semuanya meminjam motif yang sudah ada di hero:
   1. titik matriks     - lantai halus di belakang kisi
   2. garis arus + simpul - kembaran .paths hero, menggambar sekali
   3. hairline tepi ubin  - umpan balik hover yang tegas tapi tipis
   4. cincin putus-putus  - motif dashed spin dari .hero-logo
   Hanya transform & opacity yang dianimasikan; tidak ada gradasi dua
   warna, glow, atau miring 3D (aturan Revisi 12).
   ================================================================ */
.apl{position:relative;isolation:isolate}

/* --- 1. titik matriks, memudar ke tepi --- */
.apl::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(var(--accent) 1px,transparent 1px);
  background-size:24px 24px;opacity:.07;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 30%,transparent 78%)}

/* --- 2. garis arus + simpul --- */
.apl-deko{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
/* Revisi 17: garis tidak lagi sekali gambar lalu diam. Sekarang memakai
   pola persis .draw di hero-split.css: dasharray 1600, offset berjalan dari
   1600 -> 0 (menggambar) -> jeda -> -1600 (meluncur keluar), berulang.
   Nilai 1600 disamakan dengan hero supaya iramanya identik, jadi --len dari
   JS tidak dipakai lagi. */
.apl-arus{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:.2;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1600 1600;stroke-dashoffset:1600}
.apl.tampil .apl-arus{animation:apl-travel 6.5s cubic-bezier(.45,0,.3,1) infinite}
.apl.tampil .apl-arus.a2{animation-delay:1.4s;animation-duration:7.5s;
  opacity:.13;stroke-width:1}
@keyframes apl-travel{0%{stroke-dashoffset:1600}42%{stroke-dashoffset:0}
  56%{stroke-dashoffset:0}98%{stroke-dashoffset:-1600}100%{stroke-dashoffset:-1600}}

.apl-node{fill:var(--accent);opacity:0}
.apl.tampil .apl-node{animation:apl-nyala .5s ease forwards}
.apl.tampil .apl-node:nth-of-type(1){animation-delay:.75s}
.apl.tampil .apl-node:nth-of-type(2){animation-delay:1.15s}
.apl.tampil .apl-node:nth-of-type(3){animation-delay:.45s}
@keyframes apl-nyala{to{opacity:.55}}

/* --- 3. ubin muncul berurutan (jeda --d dipasang JS) --- */
.apl.apl-siap .app{opacity:0;transform:translateY(12px)}
.apl.apl-siap .app{transition:opacity .5s ease var(--d,0ms),transform .5s var(--ease) var(--d,0ms),
  border-color .25s ease,box-shadow .25s ease}
.apl.tampil .app{opacity:1;transform:none}
/* setelah muncul, jeda dilepas supaya hover terasa seketika */
.apl.tampil .app:hover{transition-delay:0ms;transform:translateY(-3px)}

/* --- 3b. efek 3D pada grid (Revisi 17) ---
   Grid diberi perspective, tiap ubin dimiringkan mengikuti posisi kursor
   (--rx/--ry dipasang aplikasi-terkait.js, maksimum 7 derajat). Isi kartu
   diangkat pada sumbu Z dengan ketinggian berbeda supaya terasa berlapis:
   ubin logo paling depan, lalu nama, lalu keterangan.
   Hanya untuk perangkat berkursor; layar sentuh dan reduced-motion tetap datar. */
@media (hover:hover){
  .apl-grid{perspective:1100px;perspective-origin:50% 40%}
  .app{transform-style:preserve-3d;will-change:transform}
  .apl.tampil .app:hover{
    transform:translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    box-shadow:var(--shadow-2)}
  .app-ubin,.app-nama,.app-ket{transition:transform .3s var(--ease)}
  .app:hover .app-ubin{transform:translateZ(34px)}
  .app:hover .app-nama{transform:translateZ(20px)}
  .app:hover .app-ket{transform:translateZ(10px)}
}

/* --- 4a. bingkai dua sudut (Revisi 18) ---
   Menggantikan hairline tunggal di tepi atas. Dua siku tumbuh dari sudut
   berlawanan - kanan atas dan kiri bawah - lalu bertemu di dua sudut sisanya.
   Rahasianya pada urutan transisi: saat disentuh lebar dulu yang tumbuh,
   tinggi menyusul dengan jeda, sehingga garis terbaca berbelok mengikuti
   sudut. Saat kursor pergi urutannya dibalik, jadi garis surut lewat jalur
   yang sama, bukan lenyap begitu saja. */
.app-garis{position:absolute;inset:0;pointer-events:none}
.app-garis::before,.app-garis::after{content:"";position:absolute;width:0;height:0}
.app-garis::before{top:-1px;right:-1px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  border-top-right-radius:16px;
  transition:width .26s var(--ease) .26s,height .26s var(--ease)}
.app-garis::after{bottom:-1px;left:-1px;
  border-bottom:2px solid var(--accent);border-left:2px solid var(--accent);
  border-bottom-left-radius:16px;
  transition:width .26s var(--ease) .26s,height .26s var(--ease)}
@media (hover:hover){
  .app:hover .app-garis::before,.app:focus-visible .app-garis::before,
  .app:hover .app-garis::after,.app:focus-visible .app-garis::after{
    width:calc(100% + 2px);height:calc(100% + 2px);
    transition:width .26s var(--ease),height .26s var(--ease) .26s}
}

/* --- 4b. cincin putus-putus berputar, motif dari .hero-logo --- */
.app-ubin::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px dashed var(--accent-line);opacity:0;
  transition:opacity .3s ease}
@media (hover:hover){
  .app:hover .app-ubin::after,.app:focus-visible .app-ubin::after{opacity:1;
    animation:apl-putar 16s linear infinite}
}
@keyframes apl-putar{to{transform:rotate(360deg)}}

@media (max-width:560px){
  .app-garis::before,.app-garis::after{border-width:1.5px}
  .apl::before{background-size:20px 20px}
}

@media (prefers-reduced-motion:reduce){
  .app,.app-ubin,.app-ubin img,.app::after,
  .app-garis::before,.app-garis::after{transition:none!important}
  .app:hover{transform:none}
  /* dekorasi bergerak dimatikan total, tapi tetap terlihat */
  .apl .app{opacity:1!important;transform:none!important}
  .apl-arus{stroke-dasharray:none!important;stroke-dashoffset:0!important;
    animation:none!important}
  .apl-grid{perspective:none}
  .app-ubin,.app-nama,.app-ket{transform:none!important}
  .apl-node{opacity:.55!important;animation:none!important}
  .app-ubin::after{animation:none!important}
}