/* Dipindah dari views/partials/syahadat_ikon.php (dulu <style> inline di setiap halaman) —
 * PRD-GSC-ADSENSE R-PERF-06 / PROMPT 9.5. Dimuat lewat iah_aset_url() (?v=filemtime). */
	/* Grid 1fr-auto-1fr: kolom kiri & kanan SAMA LEBAR, jadi logo selalu tepat
	 * di tengah berapa pun panjang teks kedua pil. (Dengan flex biasa, pil yang
	 * lebih panjang mendorong logo ke samping.) */
	/* direction:ltr dipaksa: pada halaman bahasa Arab/Urdu (dir=rtl) urutan kolom
	 * grid ikut terbalik, sehingga pil kiri melompat ke kanan dan panahnya
	 * menunjuk keluar. Susunan pil-kiri | ikon | pil-kanan harus SAMA di semua
	 * bahasa; teks Arab-nya sendiri tetap dibaca kanan-ke-kiri lewat <bdi>. */
	.syx-wrap { display: inline-grid; direction: ltr; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; vertical-align: middle; }
	/* GAMBAR APA ADANYA — wadah tidak membingkai, memotong, atau memberi latar.
	 * Dulu background:#000 + border-radius:50% + overflow:hidden: latar hitam
	 * menembus lewat bagian transparan PNG (cincin hitam di pinggir) DAN tepi
	 * gambar ikut terpotong klip lingkaran.
	 * Bayangan pakai drop-shadow (bukan box-shadow) supaya mengikuti bentuk
	 * alfa gambar — bulat mengikuti logo, bukan kotak mengelilingi bingkai. */
	.syx-ikon { justify-self: center; position: relative; display: block; width: 66px; height: 66px; flex: 0 0 auto; background: transparent;
		animation: syx-detak 2.6s ease-in-out infinite; }
	/* Cincin "radar" memancar keluar lalu memudar — inilah yang menarik mata,
	 * bukan perubahan ukuran ikonnya. Di ::before supaya tak menambah elemen
	 * dan tak pernah menadah klik. */
	.syx-ikon::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
		box-shadow: 0 0 0 3px rgba(31,122,77,.9); animation: syx-gelombang 2.6s ease-out infinite; }
	.syx-ikon img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 11px rgba(0,0,0,.45)); }
	.syx-ikon:hover, .syx-ikon:focus,
	.syx-ikon:hover::before, .syx-ikon:focus::before { animation-play-state: paused; }
	/* Denyut jantung: dua ketuk cepat lalu DIAM ±1,5 dtk. Jeda itu yang membuat
	 * gerakannya tertangkap mata — gerak sinus tanpa henti terbaca sebagai latar
	 * lalu diabaikan. Opasitas TETAP 1: versi lama memudar ke .55 tepat saat
	 * membesar, jadi kesannya menghilang, bukan membesar. */
	@keyframes syx-detak {
		0%, 55%, 100% { transform: scale(1); }
		8%            { transform: scale(1.28); }
		18%           { transform: scale(1.02); }
		26%           { transform: scale(1.2); }
		38%           { transform: scale(1); }
	}
	@keyframes syx-gelombang {
		0%        { transform: scale(1);   opacity: .85; }
		55%, 100% { transform: scale(1.9); opacity: 0; }
	}
	/* penunjuk saja — tidak bisa diklik */
	.syx-tip { direction: ltr; pointer-events: none; -webkit-user-select: none; user-select: none; background: #1f7a4d; color: #fff; font-weight: 700; font-size: 12.5px; line-height: 1.25; padding: 8px 14px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,.28); white-space: nowrap; animation: syx-kedip 1.6s ease-in-out infinite; }
	.syx-tip-kiri  { justify-self: end; }
	.syx-tip-kanan { justify-self: start; }
	/* panah selalu MENGARAH KE IKON: pil kiri -> kanan, pil kanan -> kiri */
	.syx-tip-kiri::after   { content: "\25B6"; margin-left: 6px; font-size: 10px; }
	.syx-tip-kanan::before { content: "\25C0"; margin-right: 6px; font-size: 10px; }
	@keyframes syx-kedip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
	@media (max-width: 480px) {
		.syx-ikon { width: 56px; height: 56px; }
		.syx-wrap { gap: 6px; }
		.syx-tip { font-size: 11px; padding: 6px 10px; white-space: normal; max-width: 100%; }
	}
	@media (prefers-reduced-motion: reduce) {
		.syx-ikon, .syx-ikon::before, .syx-tip { animation: none; } .syx-ikon::before { opacity: 0; }
	}