/* ============================================================
   BANDING (/brand/appeals) — disamakan dengan konten.com
   Sumber ukuran: bedah live CDP 9227, HP 393x852.
   Lihat ref-brand-konten/BANDING-CETAK-BIRU.md
   Dimuat PALING AKHIR supaya menang tanpa perlu !important
   kecuali melawan aturan ber-!important milik ui-sama.css.
   ============================================================ */

/* --- 1. Judul: konten.com 24px / weight 600 ------------------------- */
.ap-title{font-size:24px;font-weight:600}

/* --- 2. Baris tab status -------------------------------------------
   konten.com: flex, gap 24px, overflow-x auto, border-bottom 1px.
   Tab = <button> tanpa background/radius, padding-bottom 12px.

   Baris tab konten.com membentang SELEBAR KARTU (361px), sedangkan
   `.content-block` Clypora punya padding 16px sehingga barisnya cuma
   327px — akibatnya tab "Disetujui" terpotong jauh lebih parah dan
   angkanya tidak kelihatan (dilaporkan Arip). Padding ditembus dengan
   margin negatif, lalu dikembalikan sebagai padding dalam supaya
   teks tetap sejajar dengan isi kartu. */
.ap-tabs{display:flex;align-items:center;gap:24px;
  overflow-x:auto;border-bottom:1px solid #22222c;
  /* konten.com: tab mulai TEPAT di tepi kiri kartu (x=16), tanpa
     padding dalam. `.content-block` Clypora punya padding 16px +
     border 1px, jadi ditembus dengan margin negatif TANPA padding
     pengganti — padding 17px sempat mendorong semua tab ke kanan
     sehingga "Disetujui" terpotong jauh lebih awal (dilaporkan Arip). */
  margin:0 -17px 20px;padding:0;
  scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}

.ap-tab{position:relative;display:flex;align-items:center;gap:8px;
  /* line-height dipaku 24px seperti konten.com; font Clypora punya
     line-height 24,8px sehingga tinggi tab meleset 0,8px. */
  line-height:24px;
  flex:0 0 auto;cursor:pointer;
  /* `ui-sama.css:114` memaksa SEMUA tombol di main jadi kotak 10px
     + tinggi 40px + padding. Tab di sini harus polos seperti
     konten.com -> ditandingi dengan nilai aslinya. */
  appearance:none;background:transparent !important;
  border:0 !important;border-radius:0 !important;
  min-height:0 !important;height:auto !important;
  padding:0 0 12px !important;margin:0}

.ap-tab-label{font-size:16px;font-weight:500;color:#555555;
  transition:color .15s;white-space:nowrap}
.ap-tab:hover .ap-tab-label{color:#b8b8b8}
.ap-tab.active .ap-tab-label{color:#ffffff}

/* pil angka: bulat penuh, border 1px mengikuti warna label */
.ap-tab-count{display:inline-flex;align-items:center;justify-content:center;
  border-radius:9999px;padding:2px 12px;font-size:14px;font-weight:500;
  line-height:1;background:rgba(0,0,0,.2);
  border:1px solid #555555;color:#555555;transition:color .15s,border-color .15s}
.ap-tab.active .ap-tab-count{border-color:#ffffff;color:#ffffff}

/* garis bawah penanda aktif — konten.com oranye, Clypora biru.
   Ditaruh di bottom:0 (bukan -1px): `overflow-x:auto` pada baris tab
   memaksa overflow-y ikut auto, sehingga apa pun yang keluar kotak
   akan TERPOTONG — garis di -1px jadi tidak terlihat sama sekali
   (terbukti: hitung piksel biru = 0). */
.ap-tab.active::after{content:"";position:absolute;bottom:0;left:0;
  width:100%;height:2px;background:#ff2e6a}

/* --- 3. Filter ------------------------------------------------------
   Disusun 4 BARIS persis konten.com (diukur live, HP 393x852):
     baris 1  y=280  "Semua Campaigns"        181x40
     baris 2  y=336  pil platform 239x40 + "Terbaru" 105x40 di KANAN
     baris 3  y=384  toggle grid/list         84x36
     baris 4  y=440  kotak cari LEBAR PENUH  361x40

   konten.com memakai <button> custom untuk campaign/sort; Clypora tetap
   <select> asli (lebih mudah diakses, sudah dipatenkan di Analytics)
   tetapi TAMPILANNYA disamakan: tinggi 40, radius 10.
   Tidak ada tombol "Terapkan" — filter langsung jalan. */
.ap-filters{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.ap-baris{display:flex;align-items:center;gap:12px}

/* baris 1 & 2: dropdown selebar isinya, bukan selebar layar */
.ap-filters .field-select{flex:0 0 auto;height:40px;border-radius:10px}
/* Ukuran dalam disamakan dengan konten.com (diukur live 17 Sep):
   teks 16px, padding 12px, jarak teks->panah 12px, panah 16x16.
   Sebelumnya teks 14px + padding kanan 38px membuat kotak "Terbaru"
   terlihat kebesaran & renggang (dilingkari Arip). */
.ap-filters .field-select select{height:40px;
  font-size:16px !important;
  padding:0 34px 0 12px !important}
/* "Terbaru" didorong ke ujung KANAN seperti konten.com */
.ap-filters .ap-sort{margin-left:auto}

/* --- pil platform (konten.com 239x40, kotak luar radius 10) ---------
   `box-sizing:border-box` supaya border 1px TIDAK menambah tinggi
   (tanpa ini terukur 42px, bukan 40px). */
.ap-pf{display:flex;align-items:center;gap:4px;padding:6px;
  box-sizing:border-box;height:40px;
  background:#0a0a0e;border:1px solid #22222c;border-radius:10px}
.ap-pf-btn{display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  /* `ui-sama.css` memaksa tombol jadi 40px/radius 10 — pil kecil ini
     harus 4px seperti konten.com. Sudah dikecualikan di sumbernya
     (`:not(.ap-pf-btn)`), jadi nilai di sini tinggal dipakai. */
  appearance:none;background:transparent;border:0;
  border-radius:4px;min-height:0;height:28px;
  padding:4px 8px;margin:0;
  font-size:14px;font-weight:500;color:#9b93a6;
  transition:background .15s,color .15s}
.ap-pf-btn:hover{background:#17171e;color:#f5f8ff}
/* penanda aktif = ikon/teks PUTIH + latar abu #24202b (paten Clypora) */
.ap-pf-btn.active{background:#24202b;color:#ffffff}
.ap-pf-btn .pf-ico{width:20px;height:20px;display:block}

/* --- toggle grid/list (konten.com 84x36, dalam kotak radius 10) ----- */
.ap-view{display:inline-flex;align-items:center;gap:4px;padding:4px;
  box-sizing:border-box;height:36px;
  background:#0a0a0e;border:1px solid #22222c;border-radius:10px}
.ap-view-btn{display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;appearance:none;
  background:transparent;border:0;
  border-radius:4px;min-height:0;height:28px;
  padding:6px 10px;margin:0;color:#9b93a6;
  transition:background .15s,color .15s}
.ap-view-btn:hover{background:#17171e;color:#f5f8ff}
.ap-view-btn.active{background:#24202b;color:#ffffff}
/* Warna ikon SVG dipasang lewat `stroke:currentColor` di <symbol>;
   `color` saja tidak mewarnai isi SVG (pelajaran lama). */
.ap-view-btn .ap-ico{width:16px;height:16px;display:block;
  stroke:currentColor;fill:none}

/* --- kotak cari: LEBAR PENUH, baris sendiri (konten.com 361x40) -----
   `.search-field` bawaan memakai lebar isi sehingga hanya 274px.
   Dipaksa 100% dan tingginya 40px seperti konten.com (bukan 44px). */
.ap-baris-4{display:block}
.ap-cari{display:flex !important;align-items:center;
  width:100% !important;max-width:none !important;
  height:40px;min-height:40px;border-radius:10px;
  box-sizing:border-box}
.ap-cari input{flex:1 1 auto;min-width:0;
  height:38px !important;min-height:0 !important;
  margin:0 !important;
  /* Input membawa border + radius + latar sendiri sehingga terlihat
     "kotak di dalam kotak" (dilaporkan Arip). Bingkai hanya boleh satu:
     milik `.ap-cari`. Jebakan yang sama pernah terjadi di kotak "Rp"
     dialog Top Up. */
  background:transparent !important;
  border:0 !important;outline:0 !important;box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  font:inherit;font-size:14px;color:#f5f8ff}
.ap-cari input:focus{border:0 !important;outline:0 !important;
  box-shadow:none !important}
/* pembungkus juga sempat punya outline 3px yang terbaca sebagai
   bingkai ketiga -> dimatikan. */
.ap-cari{outline:0 !important}
.ap-cari:focus-within{border-color:#ff2e6a;outline:0 !important}

/* --- 4. Empty state: rata tengah, padding 48px (konten.com) --------- */
.ap-empty{text-align:center;padding:48px 0;color:#9b93a6}