/* ============================================================
   LibraryModules category-icons.css
   Gambar kustom pengganti ikon Material Symbols untuk kategori.
   Dipasangkan dengan category-icons.js (yang menaruh elemen
   <i class="lm-cat-glyph lm-cat-NAMA"> di dalam span ikon).

   Ukuran selalu mengikuti font-size span ikon di tiap konteks
   (22px, 24px, dst), jadi tidak perlu ukuran per halaman.

   Menambah kategori baru:
   1. Taruh gambar transparan persegi (disarankan 320x320, WebP lossless atau PNG)
      di cat-icons/. Beri nama berversi (mis. ksu-v1.webp) karena gambar
      di-cache 7 hari
   2. Tambah satu aturan .lm-cat-NAMA di bawah
   3. Daftarkan di category-icons.js (objek SENTINELS)
   ============================================================ */

.lm-cat-glyph {
    display: inline-block;
    /* top: kotak gambar menempel ke atas line box setinggi 1em, sama dengan
       kotak glyph Material Symbols asli, jadi posisi sejajar teks tidak bergeser */
    vertical-align: top;
    width: 1em;
    height: 1em;
    font-size: inherit;
    background-repeat: no-repeat;
    background-position: center;
    /* sedikit lebih kecil dari 1em agar bobot visualnya setara glyph asli
       (glyph Material Symbols punya ruang kosong di tepinya) */
    background-size: 92% 92%;
    pointer-events: none;
}

.lm-cat-vexiro { background-image: url("cat-icons/vexiro-v4.webp"); }
.lm-cat-magiks { background-image: url("cat-icons/magiks-v1.webp"); }
.lm-cat-magictuner { background-image: url("cat-icons/magictuner-v2.webp"); }
.lm-cat-axmanager { background-image: url("cat-icons/axmanager-v2.webp"); }
.lm-cat-mixed { background-image: url("cat-icons/mixed-v1.webp"); }
.lm-cat-brevent { background-image: url("cat-icons/brevent-v1.webp"); }
.lm-cat-ksu { background-image: url("cat-icons/ksu-v1.webp"); }

/* ---- TILE (kotak ikon besar) ----
   Di tile, gambar mengisi persentase tetap dari tile, seperti ikon aplikasi
   di Play Store, jadi proporsinya sama di tile kecil maupun besar.
   Radius sudut tetap milik tile masing-masing.
   Ubah --lm-cat-tile-scale untuk mengecilkan atau membesarkan semua tile sekaligus */
:root { --lm-cat-tile-scale: 70%; }

.card-icon-box,
.related-card-icon,
.module-icon-box,
.dl-confirm-icon,
.share-module-icon {
    position: relative;
}

.card-icon-box > .lm-cat-host,
.related-card-icon > .lm-cat-host,
.module-icon-box > .lm-cat-host,
.dl-confirm-icon > .lm-cat-host,
.share-module-icon > .lm-cat-host {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-box > .lm-cat-host > .lm-cat-glyph,
.related-card-icon > .lm-cat-host > .lm-cat-glyph,
.module-icon-box > .lm-cat-host > .lm-cat-glyph,
.dl-confirm-icon > .lm-cat-host > .lm-cat-glyph,
.share-module-icon > .lm-cat-host > .lm-cat-glyph,
.category-info-card .lm-cat-host > .lm-cat-glyph {
    width: var(--lm-cat-tile-scale);
    height: var(--lm-cat-tile-scale);
    background-size: contain;
}