/* =====================================================================
   Kartu produk toko web — SATU-SATUNYA tempat gaya kartu, kisi, & slider.

   Markup : resources/views/shop/partials/_kartu_produk.blade.php
            resources/views/shop/partials/_geser_produk.blade.php (slider)
            public/yobazar/js/kartu-produk.js  (YqKartu.html & YqGeser)
   Patokan: halaman /flash-sale (ukuran, warna, jarak) + tombol hati &
            baris ulasan dari kartu aplikasi (components/KartuProduk.tsx).
   Aturan : docs/PANDUAN-KODING-TOKO-FRONTEND.md bagian 14.
   ===================================================================== */
:root {
    --yq-merah: #c62828;          /* harga & lencana diskon (flash sale) */
    --yq-merah-tua: #9b0f0f;      /* hati & lencana hemat (theme.tint aplikasi) */
    --yq-teks: #1f1f1f;
    --yq-redup: #8a8a8a;
    --yq-coret: #9e9e9e;
    --yq-bintang: #f59e0b;
    --yq-kartu-radius: 14px;
    --yq-kartu-bayang: 0 1px 6px rgba(0, 0, 0, .06);
    --yq-kisi-jarak: 16px;
    --yq-kisi-min: 200px;
}
@media (max-width: 767px) {
    :root { --yq-kisi-jarak: 10px; }
}

/* ------------------------------------------------------------ kartu */
.yq-kartu {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: var(--yq-kartu-radius);
    overflow: hidden;
    box-shadow: var(--yq-kartu-bayang);
    transition: transform .15s ease;
}
.yq-kartu:hover { transform: translateY(-3px); }

.yq-kartu__foto { position: relative; }
.yq-kartu__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f4f6;
}
.yq-kartu__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* lencana & tombol di atas foto */
.yq-kartu__diskon {
    position: absolute; top: 10px; left: 10px;
    background: var(--yq-merah); color: #fff;
    font-size: 12px; font-weight: 800; line-height: 1.4;
    border-radius: 999px; padding: 3px 10px;
    pointer-events: none;
}
.yq-kartu__suka {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 999px;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
    color: var(--yq-merah-tua); font-size: 15px; line-height: 1;
    cursor: pointer;
}
.yq-kartu__suka:focus { outline: none; }
.yq-kartu__suka:focus-visible { outline: 2px solid var(--yq-merah-tua); outline-offset: 2px; }
.yq-kartu__po {
    position: absolute; left: 10px; bottom: 10px;
    background: #1f2937; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; line-height: 1.4;
    border-radius: 999px; padding: 3px 8px;
    pointer-events: none;
}
.yq-kartu__hemat {
    position: absolute; left: 8px; right: 8px; bottom: 8px;
    display: flex; align-items: center; gap: 5px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--yq-merah-tua);
    font-size: 11px; font-weight: 600; line-height: 1.3;
    border-radius: 8px; padding: 5px 8px;
    white-space: nowrap; overflow: hidden;
    pointer-events: none;
}
.yq-kartu__hemat b { font-size: 12.5px; font-weight: 800; }
.yq-kartu__hemat ~ .yq-kartu__po { bottom: 40px; }   /* PO naik di atas Hemat */

/* isi */
.yq-kartu__isi {
    display: flex; flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 14px 14px;
    color: var(--yq-teks);
    text-decoration: none;
}
.yq-kartu__isi:hover { color: var(--yq-teks); text-decoration: none; }

.yq-kartu__nilai {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 3px;
    font-size: 12px; line-height: 16px; color: var(--yq-redup);
}
.yq-kartu__nilai .fa-star, .yq-kartu__nilai .yq-ikon { color: var(--yq-bintang); font-size: 13px; }
.yq-kartu__nilai small { font-size: 11.5px; color: var(--yq-redup); }

.yq-kartu__nama {
    font-size: 13.5px; font-weight: 600; line-height: 1.4;
    color: var(--yq-teks);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yq-kartu__coret {
    margin-top: 5px;
    font-size: 12px; color: var(--yq-coret); text-decoration: line-through;
}
.yq-kartu__harga {
    font-size: 17px; font-weight: 800; color: var(--yq-merah);
}
.yq-kartu__nama + .yq-kartu__harga { margin-top: 5px; }

/* ------------------------------------------------------------ kisi */
/* Kolom mengikuti lebar layar (min 200px per kartu), bukan dikunci 4.
   Ponsel selalu 2 kolom. Sama dengan halaman /flash-sale. */
.yq-kartu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--yq-kisi-min), 1fr));
    gap: var(--yq-kisi-jarak);
}
@media (max-width: 767px) {
    .yq-kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ slider */
/* Buatan sendiri, tanpa pustaka: jalur geser CSS (scroll-snap) + dua tombol.
   Lebar kartu sama dengan kartu di kisi. JS: YqGeser di kartu-produk.js. */
.yq-geser { position: relative; }
.yq-geser__jalur {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(var(--yq-kisi-min), calc((100% - 4 * var(--yq-kisi-jarak)) / 5));
    gap: var(--yq-kisi-jarak);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 4px 2px 10px;       /* ruang untuk bayangan & naik saat hover */
    margin: -4px -2px -10px;
}
.yq-geser__jalur::-webkit-scrollbar { display: none; }
.yq-geser__jalur > * { scroll-snap-align: start; }
@media (max-width: 767px) {
    /* 2 kartu + sedikit kartu ketiga terlihat: tanda bahwa bisa digeser */
    .yq-geser__jalur { grid-auto-columns: calc((100% - var(--yq-kisi-jarak)) / 2.15); }
}

.yq-geser__tombol {
    position: absolute; top: 38%; z-index: 2;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 999px;
    background: #fff; color: var(--yq-teks);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: opacity .15s ease;
}
.yq-geser__tombol--kiri { left: -14px; }
.yq-geser__tombol--kanan { right: -14px; }
.yq-geser__tombol[disabled] { opacity: 0; pointer-events: none; }
/* Di layar sentuh orang menggeser dengan jari; tombol hanya menutupi foto. */
@media (hover: none), (max-width: 767px) {
    .yq-geser__tombol { display: none; }
}

/* ------------------------------------------------------------ hero */
/* Slider banner hero buatan sendiri (partial _hero_geser, JS YqHero).
   Satu banner selebar layar; panah & titik; putar otomatis berhenti saat
   disentuh/diarahkan kursor. */
.yq-hero { position: relative; background: #bababa; overflow: hidden; }
.yq-hero__jalur {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.yq-hero__jalur::-webkit-scrollbar { display: none; }
.yq-hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.yq-hero__slide .ps-banner__thumnail img { display: block; width: 100%; height: auto; }
.yq-hero__tautan { display: block; }

.yq-hero__panah {
    position: absolute; top: 50%; z-index: 2;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .85); color: #1f1f1f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    font-size: 24px; line-height: 1;
    cursor: pointer;
    opacity: 0; transition: opacity .2s ease;
}
.yq-hero:hover .yq-hero__panah,
.yq-hero__panah:focus-visible { opacity: 1; }
.yq-hero__panah--kiri { left: 16px; }
.yq-hero__panah--kanan { right: 16px; }

.yq-hero__titik {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
    display: flex; justify-content: center; gap: 6px;
    pointer-events: none;
}
.yq-hero__titik button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    cursor: pointer; pointer-events: auto;
    transition: width .2s ease, background-color .2s ease;
}
.yq-hero__titik button.is-aktif { width: 22px; background: #fff; }

@media (hover: none), (max-width: 767px) {
    .yq-hero__panah { display: none; }
    .yq-hero__titik { bottom: 8px; }
}

/* ------------------------------------------------------------ judul rak */
/* SATU gaya judul & subjudul untuk setiap rak/section toko:
   <h3 class="yq-judul">Produk Terlaris</h3>
   <p class="yq-subjudul">Perbarui lemari pakaian Anda ...</p>
   Jangan membuat kelas judul baru per halaman. */
.yq-judul {
    position: relative;
    margin: 0 0 15px;
    font-family: var(--yq-font, 'Poppins', sans-serif);
    font-size: 35px; line-height: 1.1; font-weight: 500;
    color: #191919;
}
.yq-judul::after {                 /* pita aksen merah */
    content: '';
    display: block;
    width: 56px; height: 4px;
    margin-top: 12px;
    border-radius: 999px;
    background: #a60b0f;
}
.yq-judul small, .yq-judul .hemat-count {   /* keterangan kecil di dalam judul */
    font-size: .5em; font-weight: 400; color: #8a8a8a;
}
.yq-subjudul {
    margin: 0 0 20px;
    font-family: var(--yq-font, 'Poppins', sans-serif);
    font-size: 20px; line-height: 1.4; font-weight: 400;
    color: #5b5b5b;
}
@media (max-width: 820px) {
    .yq-judul { font-size: 21px; margin-bottom: 6px; }
    .yq-judul::after { width: 38px; height: 3px; margin-top: 6px; }
    .yq-subjudul { font-size: 13px; line-height: 18px; margin-bottom: 10px; }
}

/* slider 2 kolom (artikel, konten lebar) */
.yq-geser--2 .yq-geser__jalur { grid-auto-columns: calc((100% - var(--yq-kisi-jarak)) / 2); }
@media (max-width: 767px) {
    .yq-geser--2 .yq-geser__jalur { grid-auto-columns: 88%; }
}

/* ------------------------------------------------------------ pilihan varian */
/* Warna & ukuran terpilih — sama dengan aplikasi: garis & teks merah,
   latar merah muda, tanpa kotak centang hitam. Berlaku di detail produk
   dan quick view (keduanya .ps-product--detail). */
.ps-product--detail .ps-product__color .custom-control-label,
.ps-product--detail .ps-product__size .custom-control-label {
    border: 1.5px solid #e5e5e5;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ps-product--detail .ps-product__color .custom-control-label::before,
.ps-product--detail .ps-product__color .custom-control-label::after { display: none !important; }
.ps-product--detail .ps-product__color .custom-control-input:checked + .custom-control-label,
.ps-product--detail .ps-product__size .custom-control-input:checked ~ .custom-control-label {
    border-color: var(--yq-merah-tua);
    background: #fdeceb;
    color: var(--yq-merah-tua);
    font-weight: 700;
}
.ps-product--detail .ps-product__color .custom-control-input:checked + .custom-control-label span {
    color: var(--yq-merah-tua);
    font-weight: 700;
}
/* Opsi habis: redup + coret MIRING melintang chip (seperti aplikasi),
   bukan garis tengah teks. */
.ps-product--detail .ps-product__size .custom-control-input:disabled ~ .custom-control-label,
.ps-product--detail .ps-product__color .custom-control-input:disabled + .custom-control-label {
    position: relative; opacity: .5; cursor: not-allowed; text-decoration: none;
    background-color: #f9fafb;
    background-image: linear-gradient(to top right,
        transparent calc(50% - .8px), #6b7280 calc(50% - .8px),
        #6b7280 calc(50% + .8px), transparent calc(50% + .8px));
    /* Kotak persegi di tengah chip -> garisnya selalu 45 derajat, tidak
       melandai di chip yang lebar & pendek. */
    background-size: 26px 26px; background-position: center; background-repeat: no-repeat;
}

/* ------------------------------------------------------------ kosong */
/* Keadaan kosong di dalam .yq-kartu-grid: merentang semua kolom (tanpa ini
   ia terjepit di satu kolom kartu dan teksnya patah per kata). */
.yq-kosong {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 56px 16px; text-align: center;
    background: #fff; border-radius: var(--yq-kartu-radius); box-shadow: var(--yq-kartu-bayang);
}
.yq-kosong i, .yq-kosong .yq-ikon { font-size: 30px; color: #d4d4d4; margin-bottom: 6px; }
.yq-kosong b { font-size: 16px; font-weight: 600; color: var(--yq-teks); }
.yq-kosong span { font-size: 13px; color: var(--yq-redup); }

/* ------------------------------------------------------------ artikel */
/* Halaman daftar artikel (shop/artikel) — kisi kartu artikel, pencarian,
   dan chip kategori. Kartu: shop.partials._kartu_artikel. */
.yq-artikel-hal { padding-top: 28px; }
.yq-artikel-cari {
    position: relative; max-width: 520px; margin: 4px 0 14px;
}
.yq-artikel-cari i, .yq-artikel-cari .yq-ikon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9a9a9a; font-size: 15px; }
.yq-artikel-cari input {
    width: 100%; height: 46px; padding: 0 16px 0 42px;
    border: 1.5px solid #e4e4e4; border-radius: 12px; background: #fff;
    font-family: var(--yq-font, 'Poppins', sans-serif); font-size: 14px; color: var(--yq-teks); outline: none;
}
.yq-artikel-cari input:focus { border-color: var(--yq-merah-tua); }
.yq-artikel-chips { margin-bottom: 20px; padding-bottom: 4px; }
.katz-chip.is-aktif { background: var(--yq-merah-tua); border-color: var(--yq-merah-tua); color: #fff; }

.yq-artikel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}
.yq-artikel-grid .ps-blog--latset {
    height: 100%; margin: 0; background: #fff; border-radius: var(--yq-kartu-radius);
    overflow: hidden; box-shadow: var(--yq-kartu-bayang);
}
.yq-artikel-grid .ps-blog__thumbnail { position: relative; margin: 0; }
.yq-artikel-grid .ps-blog__thumbnail img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 !important; }
.yq-artikel-grid .ps-blog__badge { position: absolute; left: 10px; top: 10px; }
.yq-artikel-grid .ps-blog__badge .ps-badge__item { background: #fff; color: var(--yq-merah-tua); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.yq-artikel-grid .ps-blog__content { padding: 12px 14px 14px !important; text-align: left !important; }
.yq-artikel-grid .ps-blog__title { font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; margin: 0 0 6px !important; text-align: left !important; }
.yq-artikel-grid .ps-blog__title a { color: var(--yq-teks); font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; }
.yq-artikel-grid .ps-blog__date { font-size: 12px; color: var(--yq-redup); margin: 0; }
@media (max-width: 767px) {
    .yq-artikel-hal { padding-top: 14px; }
    .yq-artikel-grid { grid-template-columns: 1fr; gap: 12px; }
    .yq-artikel-cari input { height: 44px; }
}

/* Ikon Hugeicons (RENCANA-27): <x-ikon> / YqIkon(). SVG garis 24px yang ikut
   font-size (1em) & color induk. --isi = versi terisi (bintang penuh, hati
   tersimpan); fa-heart dipertahankan sebagai kelas status tombol favorit. */
.yq-ikon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.yq-ikon--isi path, .yq-ikon.fa-heart path { fill: currentColor; }
.yq-ikon--putar { animation: yq-ikon-putar .8s linear infinite; }
@keyframes yq-ikon-putar { to { transform: rotate(360deg); } }
.yq-api { color: #f97316; }
/* Di atas latar merah (tombol mengambang "Hemat") oranye tenggelam: putih. */
#offerToggleBtn .yq-api { color: #fff; }

/* Checkbox pembeli: kotak sudut 4px, terisi merah + centang putih saat dipilih
   (gaya yang sama dengan checkbox tema, warnanya merah). :where() = spesifisitas 0,
   jadi aturan ukuran/jarak milik halaman tetap menang. */
:where(input[type="checkbox"]:not(.custom-control-input)) {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 18px; height: 18px; margin: 0; flex-shrink: 0; vertical-align: middle;
    border: 1.5px solid #cfcfcf; border-radius: 4px; background: #fff; cursor: pointer;
    display: inline-grid; place-content: center;
    transition: background-color .15s ease, border-color .15s ease;
}
:where(input[type="checkbox"]:not(.custom-control-input))::before {
    content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease-in-out;
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 45%, 0 63%, 45% 100%, 100% 20%, 84% 6%, 43% 71%);
}
:where(input[type="checkbox"]:not(.custom-control-input)):checked { background: #a60b0f; border-color: #a60b0f; }
:where(input[type="checkbox"]:not(.custom-control-input)):checked::before { transform: scale(1); }
:where(input[type="checkbox"]:not(.custom-control-input)):disabled { opacity: .5; cursor: not-allowed; }
:where(input[type="checkbox"]:not(.custom-control-input)):focus-visible { outline: 2px solid rgba(166, 11, 15, .25); outline-offset: 2px; }
/* Checkbox & radio gaya Bootstrap (sidebar toko): warna aktif merah. */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: #a60b0f; border-color: #a60b0f; }
.custom-checkbox .custom-control-label::before { border-radius: 4px; }
/* Tema mewarnai pilihan sidebar (.ps-widget__item) hitam -- ditimpa merah. */
.ps-widget--product .ps-widget__item .custom-control-input:checked ~ .custom-control-label::before { background-color: #a60b0f; border-color: #a60b0f; }
/* Radio gaya Material: cincin merah + titik merah di tengah (bukan bulatan penuh dengan titik putih). */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.ps-widget--product .ps-widget__item .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background: #fff radial-gradient(circle, #a60b0f 0 42%, transparent 46%);
    border: 2px solid #a60b0f;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: none; }
.custom-radio .custom-control-label::before { border: 2px solid #9ca3af; }
.ps-widget--product .ps-widget__item .custom-radio .custom-control-label::before { border: 2px solid #9ca3af; }

/* Modal Bootstrap (survei, tautan Google, dll.) selalu di atas bilah menempel
   halaman (Checkout keranjang/bayar = z-index 1050, sheet filter 100001). */
.modal-backdrop { z-index: 100003; }
.modal { z-index: 100004; }

/* Halaman pembeli tidak boleh melebar ke samping: satu elemen yang lewat 2-3px
   (mis. .row keranjang) membuat viewport HP ikut melebar, lalu lapisan fixed
   (layar cari, sheet) terpotong di kanan. clip (bukan hidden) supaya header
   sticky tetap jalan. */
html, body { overflow-x: clip; }

/* Pilihan ukuran (detail & quick view): keping rapat dengan jarak seragam.
   Tema memberi tiap .custom-control padding-left + margin sendiri-sendiri
   sehingga jaraknya renggang dan tidak rata. */
.ps-product__size.ps-select--feature { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-product--detail .ps-product__size.ps-select--feature .custom-control,
.ps-product__size.ps-select--feature .custom-control { display: block; padding: 0 !important; margin: 0 !important; min-height: 0; }
.ps-product__size.ps-select--feature .custom-control-label { min-width: 48px; padding: 6px 14px; text-align: center; cursor: pointer; }

/* RENCANA-27 tahap 5: Font Awesome dilepas. Glyph FA yang masih dipakai CSS tema
   (centang daftar, panah select2, bintang barrating, info COD) digambar ulang
   dari data Hugeicons lewat mask -- warnanya tetap ikut color. */
.ps-post .ps-blog__list li::before,
.ps-product .ps-product__desc li::before,
.ps-table--product .ps-table__status span::before,
.ps-product--desc .ps-product__list li::before,
.ps-about--project .ps-about__list li::before,
.ps-compare--product .ps-table .ps-check-line::before {
    content: ""; display: inline-block; width: 14px; height: 14px; font: inherit; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2014L8.5%2017.5L19%206.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2014L8.5%2017.5L19%206.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.select2 .select2-selection--single .select2-selection__arrow:before {
    content: ""; width: 16px; height: 16px; font: inherit; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%209.00005C18%209.00005%2013.5811%2015%2012%2015C10.4188%2015%206%209%206%209%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%209.00005C18%209.00005%2013.5811%2015%2012%2015C10.4188%2015%206%209%206%209%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.br-theme-fontawesome-stars .br-widget a { font: inherit; display: inline-block; }
.br-theme-fontawesome-stars .br-widget a::after, .br-theme-fontawesome-stars .br-widget a:after {
    content: ""; display: inline-block; width: 20px; height: 20px; vertical-align: middle; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13.7276%203.44418L15.4874%206.99288C15.7274%207.48687%2016.3673%207.9607%2016.9073%208.05143L20.0969%208.58575C22.1367%208.92853%2022.6167%2010.4206%2021.1468%2011.8925L18.6671%2014.3927C18.2471%2014.8161%2018.0172%2015.6327%2018.1471%2016.2175L18.8571%2019.3125C19.417%2021.7623%2018.1271%2022.71%2015.9774%2021.4296L12.9877%2019.6452C12.4478%2019.3226%2011.5579%2019.3226%2011.0079%2019.6452L8.01827%2021.4296C5.8785%2022.71%204.57865%2021.7522%205.13859%2019.3125L5.84851%2016.2175C5.97849%2015.6327%205.74852%2014.8161%205.32856%2014.3927L2.84884%2011.8925C1.389%2010.4206%201.85895%208.92853%203.89872%208.58575L7.08837%208.05143C7.61831%207.9607%208.25824%207.48687%208.49821%206.99288L10.258%203.44418C11.2179%201.51861%2012.7777%201.51861%2013.7276%203.44418Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M13.7276%203.44418L15.4874%206.99288C15.7274%207.48687%2016.3673%207.9607%2016.9073%208.05143L20.0969%208.58575C22.1367%208.92853%2022.6167%2010.4206%2021.1468%2011.8925L18.6671%2014.3927C18.2471%2014.8161%2018.0172%2015.6327%2018.1471%2016.2175L18.8571%2019.3125C19.417%2021.7623%2018.1271%2022.71%2015.9774%2021.4296L12.9877%2019.6452C12.4478%2019.3226%2011.5579%2019.3226%2011.0079%2019.6452L8.01827%2021.4296C5.8785%2022.71%204.57865%2021.7522%205.13859%2019.3125L5.84851%2016.2175C5.97849%2015.6327%205.74852%2014.8161%205.32856%2014.3927L2.84884%2011.8925C1.389%2010.4206%201.85895%208.92853%203.89872%208.58575L7.08837%208.05143C7.61831%207.9607%208.25824%207.48687%208.49821%206.99288L10.258%203.44418C11.2179%201.51861%2012.7777%201.51861%2013.7276%203.44418Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.cod-keterangan::before { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: -3px; font: inherit; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M12%2016V12%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M12.125%208.25H12M12.25%208.25C12.25%208.11193%2012.1381%208%2012%208C11.8619%208%2011.75%208.11193%2011.75%208.25C11.75%208.38807%2011.8619%208.5%2012%208.5C12.1381%208.5%2012.25%208.38807%2012.25%208.25Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M12%2016V12%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M12.125%208.25H12M12.25%208.25C12.25%208.11193%2012.1381%208%2012%208C11.8619%208%2011.75%208.11193%2011.75%208.25C11.75%208.38807%2011.8619%208.5%2012%208.5C12.1381%208.5%2012.25%208.38807%2012.25%208.25Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }