/* 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)}
/* 26 Sep 2026: baris sumber (sama dgn /mulai G109). Operator selain IndiHome
   TIDAK diukur -- statusnya disimpulkan dari TrustPositif, jadi bukan merah/hijau. */
.sdm-row small{display:block;font-size:11.5px;font-weight:400;color:var(--sdm-redup)}
.sdm-row__nilai--dugaan{color:#FBBF24}
.sdm-demo--terang .sdm-row__nilai--dugaan{color:#B45309}

/* --- 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)}
/* SEKALI JALAN, lalu diam dengan isi lengkap -- keputusan Tomy 26 Sep 2026.
   (14 Sep diminta berulang tiap 6,5 dtk; terbukti pembaca menangkap kotak
   setengah kosong di tengah siklus, termasuk di tangkapan layar Tomy sendiri.)
   Tiap pesan masuk pada jeda --sdm-d masing-masing, lalu tetap terlihat. */
.sdm-demo.sdm-armed.sdm-on .sdm-item{
  animation:sdm-rise .65s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--sdm-d,0s);
}
@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}
}