/* SafeDomain - komponen gerak bersama.
   Dibuat 14 Sep 2026.

   PREFIX sdm- WAJIB untuk setiap kelas dan @keyframes di file ini.
   Situs ini punya 47 @keyframes inline tersebar di 15 template (nama 'pulse'
   saja dipakai ulang di 4 file dengan definisi berbeda). Prefix adalah yang
   menjaga file ini tidak ikut menambah kekacauan itu.

   Hanya transform dan opacity yang dianimasikan - keduanya tidak memaksa
   browser menghitung ulang tata letak, jadi tetap mulus di HP kelas bawah. */

.sdm-demo{
  --sdm-teks:#E2E8F0; --sdm-redup:rgba(226,232,240,.62);
  --sdm-garis:rgba(255,255,255,.09); --sdm-bidang:rgba(255,255,255,.04);
  --sdm-bahaya:#F87171; --sdm-aman:#4ADE80; --sdm-aksen:#F59E0B;
  max-width:520px; margin:0 auto; font-size:15px; line-height:1.5;
}

/* Varian latar TERANG. Dipasang OTOMATIS oleh sd-motion.js dengan membaca
   warna latar efektif halaman - bukan ditentukan manual per halaman, karena
   situs ini mencampur template gelap (59 artikel) dan template bervariabel
   (22 artikel) yang sebagiannya terang. Menentukannya manual berarti bug
   kontras ini akan terulang di tiap pemasangan berikutnya. */
.sdm-demo--terang{
  --sdm-teks:#0F172A; --sdm-redup:#475569;
  --sdm-garis:rgba(15,23,42,.14); --sdm-bidang:rgba(15,23,42,.035);
  --sdm-bahaya:#B91C1C; --sdm-aman:#15803D;
}
.sdm-demo--terang .sdm-bub--bahaya{
  background:rgba(185,28,28,.07); border-color:rgba(185,28,28,.30);
}

.sdm-demo__label{
  font-size:12px; letter-spacing:.04em; color:var(--sdm-redup);
  margin-bottom:10px; text-align:center;
}

.sdm-head{
  display:flex; align-items:center; gap:11px;
  padding-bottom:13px; margin-bottom:14px;
  border-bottom:1px solid var(--sdm-garis);
}
.sdm-head__ikon{
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  background:var(--sdm-aksen); display:flex; align-items:center;
  justify-content:center; font-size:17px; line-height:1;
}
.sdm-head__nama{font-weight:600; color:var(--sdm-teks); font-size:14px}
.sdm-head__sub{font-size:12px; color:var(--sdm-redup); display:flex;
  align-items:center; gap:6px}
.sdm-dot{
  width:7px; height:7px; border-radius:50%; background:var(--sdm-aman);
  display:inline-block; flex:0 0 7px;
}

.sdm-bub{
  background:var(--sdm-bidang); border:1px solid var(--sdm-garis);
  border-radius:14px 14px 14px 4px; padding:13px 15px; margin-bottom:10px;
  color:var(--sdm-redup); font-size:14px;
}
.sdm-bub--bahaya{
  background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.34);
}
.sdm-bub__judul{
  display:flex; align-items:center; gap:8px; margin-bottom:7px;
  font-weight:600; color:var(--sdm-bahaya); font-size:14px;
}
.sdm-bub__domain{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; color:var(--sdm-bahaya);
}
.sdm-bub__cap{font-size:12px; color:var(--sdm-redup); margin-bottom:9px}

.sdm-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; font-size:14px; color:var(--sdm-teks);
}
.sdm-row__nilai{font-weight:500}
.sdm-row__nilai--blokir{color:var(--sdm-bahaya)}
.sdm-row__nilai--aman{color:var(--sdm-aman)}

/* --- gerak ---------------------------------------------------------------
   Kondisi diam adalah TERLIHAT. Kelas .sdm-armed baru dipasang oleh
   sd-motion.js, jadi kalau JavaScript gagal dimuat isinya tetap terbaca
   penuh - tidak pernah ada layar kosong. */
.sdm-demo.sdm-armed .sdm-item{opacity:0; transform:translateY(12px)}
/* LOOP TERUS-MENERUS - diminta Tomy 14 Sep 2026.
   Satu siklus 6,5 detik: tiap pesan masuk pada jeda masing-masing, seluruh
   blok tetap terbaca sampai detik ~5,6, lalu memudar dan mulai lagi.
   Persentase di bawah relatif terhadap 6,5s, jadi kalau durasi siklus diubah
   persentasenya HARUS dihitung ulang atau pesan akan saling menimpa.
   Kembali ke sekali-jalan: ganti 'sdm-cycle 6.5s linear infinite' dengan
   'sdm-rise .65s cubic-bezier(.2,.7,.3,1) forwards'. */
.sdm-demo.sdm-armed.sdm-on .sdm-item{
  animation:sdm-cycle 6.5s linear infinite;
  animation-delay:var(--sdm-d,0s);
}
@keyframes sdm-cycle{
  0%   {opacity:0; transform:translateY(12px)}
  10%  {opacity:1; transform:none}   /* 0,65s - masuk */
  86%  {opacity:1; transform:none}   /* 5,6s  - tahan, bagian terpanjang */
  96%  {opacity:0; transform:translateY(-6px)}
  100% {opacity:0; transform:translateY(12px)}
}
@keyframes sdm-rise{to{opacity:1; transform:none}}

/* Denyut hanya pada titik status. Lambat dan kecil, dan letaknya jauh dari
   kolom input supaya tidak mengganggu orang yang sedang mengetik. */
.sdm-demo.sdm-on .sdm-dot{animation:sdm-blip 2.6s ease-in-out infinite}
@keyframes sdm-blip{0%,100%{opacity:1}50%{opacity:.3}}

@media (prefers-reduced-motion:reduce){
  .sdm-demo.sdm-armed .sdm-item,
  .sdm-demo.sdm-armed.sdm-on .sdm-item{
    opacity:1; transform:none; animation:none;
  }
  .sdm-demo.sdm-on .sdm-dot{animation:none}
}