/*!
 * CSF Donation — portal operator (/portal-donation).
 *
 * Dirancang mobile-first: admin keuangan sering memeriksa bukti transfer dari
 * HP sambil membuka aplikasi mobile banking di aplikasi sebelah. Tombol besar,
 * kontras tinggi, dan nominal yang terbaca sekilas.
 *
 * WARNA
 *   Seluruh warna diturunkan dari token tema bila ada; kalau tidak, jatuh ke
 *   palet gelap netral supaya portal tetap terbaca di tema mana pun. Tema boleh
 *   me-retint seluruh portal hanya dengan menimpa variabel --p-* di bawah —
 *   itulah yang dilakukan themes/coco-social-fund/assets/css/csf-donation-portal.css.
 *
 * TIPOGRAFI
 *   Skala tipenya sengaja satu tingkat lebih besar daripada dasbor pada
 *   umumnya. Portal ini dipakai sambil berdiri, sering di bawah cahaya
 *   matahari, dan angka yang salah baca di sini berarti donasi yang salah
 *   disetujui.
 */

.csfdn-portal {
	--p-bg: rgb(var(--color-background-rgb, 20 19 19));
	--p-surface: rgb(var(--color-surface-container-rgb, 32 31 31));
	--p-surface-2: rgb(var(--color-surface-container-high-rgb, 43 42 41));
	--p-sunken: rgb(var(--color-surface-container-lowest-rgb, 14 14 14));
	--p-ink: rgb(var(--color-primary-rgb, 255 255 255));
	--p-on-accent: rgb(var(--color-on-secondary-rgb, 39 52 23));
	--p-on-ink: rgb(var(--color-on-primary-rgb, 20 19 19));
	--p-muted: rgb(var(--color-on-surface-variant-rgb, 199 199 191));
	--p-accent: rgb(var(--color-secondary-rgb, 187 205 163));
	--p-line: rgb(var(--color-outline-variant-rgb, 70 71 65));
	--p-ok: #4ade80;
	--p-warn: #fbbf24;
	--p-err: #f87171;
	--p-ok-bg: rgb(22 163 74 / 0.22);
	--p-warn-bg: rgb(217 119 6 / 0.22);
	--p-err-bg: rgb(220 38 38 / 0.22);
	--p-radius: 16px;

	box-sizing: border-box;
	max-width: 1040px;
	margin: 0 auto;
	padding: 16px 16px 80px;

	/* Portal mengecat latarnya sendiri. Tanpa ini, palet teks terang di bawah
	   akan dipakai di atas apa pun warna halaman temanya — pada tema terang
	   hasilnya teks nyaris putih di atas putih. */
	background: var(--p-bg);
	color: var(--p-ink);
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.55;

	/* Teks terang di atas latar gelap tampak lebih tebal daripada seharusnya
	   pada layar Retina; antialiasing membuatnya kembali setipis aslinya dan
	   jauh lebih enak dibaca dalam jumlah banyak. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.csfdn-portal *, .csfdn-portal *::before, .csfdn-portal *::after { box-sizing: border-box; }
.csfdn-portal [hidden] { display: none !important; }

/* Angka disejajarkan lebar digitnya. Tanpa ini kolom nominal bergoyang antar
   baris dan mata harus mencari ulang titik desimalnya di setiap baris. */
.csfdn-portal__card-value,
.csfdn-portal__row-amount b,
.csfdn-portal__grid dd,
.csfdn-portal__badge {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------------------
 * Gerbang login / tanpa akses
 * ------------------------------------------------------------------------ */
.csfdn-portal--gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 16px; background: var(--p-bg); }

.csfdn-portal__gate-card {
	width: 100%; max-width: 440px;
	background: var(--p-surface);
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	padding: 36px 30px;
	text-align: center;
}
.csfdn-portal__logo { font-size: 40px; display: block; margin-bottom: 10px; color: var(--p-accent); }
.csfdn-portal__gate-card h1 {
	margin: 0 0 8px;
	font-family: var(--font-headline, inherit);
	font-size: clamp(24px, 5.5vw, 30px);
	font-weight: 400;
	line-height: 1.2;
}
.csfdn-portal__gate-sub { color: var(--p-muted); margin: 0 0 26px; font-size: 15.5px; line-height: 1.6; }
.csfdn-portal__hint { color: var(--p-muted); font-size: 14px; margin-top: 20px; line-height: 1.6; }

.csfdn-portal--gate label { display: block; text-align: left; margin-bottom: 16px; color: var(--p-muted); font-size: 14.5px; }
.csfdn-portal--gate input[type="text"],
.csfdn-portal--gate input[type="password"] {
	width: 100%; min-height: 52px; margin-top: 7px;
	padding: 13px 15px; font-size: 16px; /* 16px mencegah iOS memperbesar halaman saat field difokus. */
	background: var(--p-sunken);
	border: 1px solid var(--p-line); border-radius: 12px; color: var(--p-ink);
	font-family: inherit;
}
.csfdn-portal--gate input[type="text"]:focus,
.csfdn-portal--gate input[type="password"]:focus {
	outline: 2px solid var(--p-accent);
	outline-offset: 1px;
	border-color: var(--p-accent);
}

.csfdn-portal--gate input[type="submit"],
.csfdn-portal__btn {
	width: 100%; min-height: 52px; margin-top: 10px;
	background: var(--p-ink); color: var(--p-on-ink);
	border: 0; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	letter-spacing: 0.01em;
}
.csfdn-portal--gate .login-remember { font-size: 14px; }

/* ---------------------------------------------------------------------------
 * Bar & tab
 * ------------------------------------------------------------------------ */
/*
 * Header sengaja hanya dua hal: siapa Anda dan cara keluar. Tidak ada kartu,
 * kotak, atau garis tepi — satu garis rambut di bawahnya sudah cukup memisahkan
 * header dari isi, dan setiap kotak tambahan di sini bersaing perhatian dengan
 * antrean verifikasi yang justru menjadi alasan halaman ini dibuka.
 */
.csfdn-portal__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px 20px;
	padding: 22px 2px 16px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--p-line);
}

.csfdn-portal__brand {
	display: inline-flex; align-items: baseline; gap: 10px;
	margin: 0; min-width: 0;
	font-family: var(--font-headline, inherit);
	font-size: clamp(19px, 4.5vw, 23px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.csfdn-portal__mark { color: var(--p-accent); font-size: 0.72em; }

.csfdn-portal__user { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 14px; color: var(--p-muted); }

/* display_name kerap berupa email panjang. Dipotong dengan ellipsis, bukan
   dibiarkan membungkus — satu baris header yang tiba-tiba jadi tiga baris
   mendorong seluruh isi halaman ke bawah. */
.csfdn-portal__who {
	min-width: 0;
	max-width: 30ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csfdn-portal__signout {
	flex: 0 0 auto;
	color: var(--p-muted);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}
.csfdn-portal__signout:hover,
.csfdn-portal__signout:focus-visible {
	color: var(--p-accent);
	border-bottom-color: var(--p-accent);
}

.csfdn-portal__tabs {
	display: flex; gap: 4px;
	background: var(--p-surface); border: 1px solid var(--p-line);
	border-radius: 999px; padding: 5px; margin-bottom: 26px;
	position: sticky; top: 8px; z-index: 5;
	overflow-x: auto; scrollbar-width: none;
	/* Tab menempel saat menggulir; tanpa blur, isi yang lewat di belakangnya
	   terbaca menembus sela antar tombol. */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.csfdn-portal__tabs::-webkit-scrollbar { display: none; }
.csfdn-portal__tab {
	flex: 1 0 auto; min-height: 46px; padding: 0 18px;
	border: 0; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--p-muted);
	font-family: inherit; font-size: 15px; font-weight: 600;
	display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
}
.csfdn-portal__tab:hover { color: var(--p-ink); }
.csfdn-portal__tab.is-active { background: var(--p-ink); color: var(--p-on-ink); }
.csfdn-portal__badge {
	min-width: 22px; padding: 0 7px; border-radius: 999px;
	background: var(--p-err); color: #3b0708; font-size: 12px; font-weight: 700; line-height: 22px;
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------ */
.csfdn-portal__panel[hidden] { display: none; }
.csfdn-portal__panel-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.csfdn-portal__panel-head h2 {
	margin: 0;
	font-family: var(--font-headline, inherit);
	font-size: clamp(22px, 4.5vw, 26px);
	font-weight: 400;
	line-height: 1.2;
}
.csfdn-portal__hint-inline { font-size: 14px; color: var(--p-muted); margin: 0 0 18px; line-height: 1.6; max-width: 68ch; }

.csfdn-portal__filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.csfdn-portal__filters::-webkit-scrollbar { display: none; }
.csfdn-portal__chip {
	flex: 0 0 auto; min-height: 40px; padding: 0 17px; cursor: pointer;
	background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 999px;
	color: var(--p-muted); font-family: inherit; font-size: 14px; font-weight: 600;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.csfdn-portal__chip:hover { color: var(--p-ink); border-color: var(--p-accent); }
.csfdn-portal__chip.is-active { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }

.csfdn-portal__toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.csfdn-portal__search, .csfdn-portal__select {
	flex: 1 1 210px; min-height: 46px; padding: 11px 15px;
	background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 12px;
	color: var(--p-ink); font-family: inherit; font-size: 16px;
}
.csfdn-portal__search::placeholder { color: var(--p-muted); opacity: 0.75; }
.csfdn-portal__search:focus, .csfdn-portal__select:focus {
	outline: 2px solid var(--p-accent); outline-offset: 1px; border-color: var(--p-accent);
}
.csfdn-portal__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; font-size: 14px; color: var(--p-muted); }
.csfdn-portal__btn--ok { background: var(--p-ok); color: #052e16; }
.csfdn-portal__btn--bad { background: var(--p-err); color: #3b0708; }
.csfdn-portal__bulk .csfdn-portal__btn { width: auto; min-height: 42px; margin: 0; padding: 0 18px; font-size: 14px; }

/* ---------------------------------------------------------------------------
 * Kartu ringkasan
 * ------------------------------------------------------------------------ */
.csfdn-portal__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }

.csfdn-portal__card {
	background: var(--p-surface); border: 1px solid var(--p-line);
	border-radius: var(--p-radius); padding: 18px 18px 16px;
}
.csfdn-portal__card--alert { border-color: var(--p-warn); }
.csfdn-portal__card-label {
	display: block; margin-bottom: 8px;
	font-family: var(--font-label, inherit);
	font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--p-muted);
}
.csfdn-portal__card-value {
	display: block; line-height: 1.15;
	font-family: var(--font-headline, inherit);
	font-size: clamp(22px, 5.5vw, 28px); font-weight: 700;
}
.csfdn-portal__card-sub { display: block; font-size: 13px; color: var(--p-muted); margin-top: 6px; line-height: 1.45; }

.csfdn-portal__chart { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 22px 20px 20px; }
.csfdn-portal__chart h3 { margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--p-muted); }
/* Label tanggal berada di luar batang (bottom:-18px); ruangnya disediakan di
   sini agar tidak menabrak tepi kartu. */
.csfdn-portal__bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-bottom: 20px; }

/*
 * Namanya `__chart-bar`, BUKAN `__bar`. Header portal sudah memakai
 * `.csfdn-portal__bar`, dan sewaktu keduanya bernama sama, aturan batang di
 * bawah ini (display:block, width:100%, gradien) ikut mengenai setiap <span>
 * di header — nama situs dan alamat email berubah jadi kotak hijau bergradasi.
 */
.csfdn-portal__chart-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; min-width: 0; }
.csfdn-portal__chart-bar span {
	display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--p-accent), rgb(var(--color-secondary-container-rgb, 63 78 46)));
}
.csfdn-portal__chart-bar small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--p-muted); }

/* ---------------------------------------------------------------------------
 * Daftar
 * ------------------------------------------------------------------------ */
.csfdn-portal__list { display: flex; flex-direction: column; gap: 10px; }

.csfdn-portal__row {
	background: var(--p-surface); border: 1px solid var(--p-line);
	border-radius: var(--p-radius); padding: 18px;
}
.csfdn-portal__row--overdue { border-color: var(--p-warn); }
.csfdn-portal__row-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.csfdn-portal__row-head input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 22px; accent-color: var(--p-accent); }
.csfdn-portal__row-title { flex: 1 1 190px; min-width: 0; }
.csfdn-portal__row-title strong { display: block; font-size: 16px; line-height: 1.35; word-break: break-word; }
.csfdn-portal__row-title small { display: block; font-size: 13.5px; color: var(--p-muted); line-height: 1.5; margin-top: 2px; }
.csfdn-portal__row-amount { text-align: right; flex: 0 0 auto; margin-left: auto; }
.csfdn-portal__row-amount b { display: block; font-size: 19px; line-height: 1.2; font-family: var(--font-headline, inherit); }
.csfdn-portal__row-amount small { font-size: 12px; color: var(--p-muted); }

.csfdn-portal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 14px 0; font-size: 14px; }
.csfdn-portal__grid div { min-width: 0; }
.csfdn-portal__grid dt {
	color: var(--p-muted);
	font-family: var(--font-label, inherit);
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.csfdn-portal__grid dd { margin: 3px 0 0; font-weight: 600; word-break: break-word; line-height: 1.4; }

.csfdn-portal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.csfdn-portal__actions .csfdn-portal__btn { width: auto; min-height: 44px; margin: 0; padding: 0 20px; font-size: 14.5px; }
.csfdn-portal__actions .csfdn-portal__chip { min-height: 44px; }

.csfdn-portal__tag {
	display: inline-block; padding: 4px 11px; border-radius: 999px;
	font-family: var(--font-label, inherit);
	font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.csfdn-portal__tag--ok { background: var(--p-ok-bg); color: var(--p-ok); }
.csfdn-portal__tag--warn { background: var(--p-warn-bg); color: var(--p-warn); }
.csfdn-portal__tag--bad { background: var(--p-err-bg); color: var(--p-err); }
.csfdn-portal__tag--muted { background: rgb(255 255 255 / 0.12); color: var(--p-muted); }

.csfdn-portal__empty, .csfdn-portal__loading { padding: 34px 4px; text-align: center; color: var(--p-muted); font-size: 15.5px; }

.csfdn-portal__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; font-size: 14px; color: var(--p-muted); }
.csfdn-portal__pager button {
	min-height: 42px; padding: 0 18px; border-radius: 999px;
	border: 1px solid var(--p-line); background: var(--p-surface); color: var(--p-ink);
	font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.csfdn-portal__pager button:hover:not([disabled]) { border-color: var(--p-accent); }
.csfdn-portal__pager button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Progress mini pada daftar campaign */
.csfdn-portal__mini-track { height: 7px; border-radius: 999px; background: var(--p-surface-2); overflow: hidden; margin: 10px 0 4px; }
.csfdn-portal__mini-fill { display: block; height: 100%; border-radius: 999px; background: var(--p-accent); }

/* Rekonsiliasi */
.csfdn-portal__reconcile { margin-top: 36px; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 22px 20px; }
.csfdn-portal__reconcile h3 { margin: 0 0 6px; font-family: var(--font-headline, inherit); font-size: 19px; font-weight: 400; }
.csfdn-portal__reconcile p { margin: 0 0 16px; font-size: 14px; color: var(--p-muted); line-height: 1.6; }
.csfdn-portal__reconcile-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.csfdn-portal__reconcile-form input {
	flex: 1 1 150px; min-height: 46px; padding: 11px 15px;
	background: var(--p-sunken);
	border: 1px solid var(--p-line); border-radius: 12px; color: var(--p-ink); font-family: inherit; font-size: 16px;
}
.csfdn-portal__reconcile-form input:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; border-color: var(--p-accent); }
.csfdn-portal__reconcile-form .csfdn-portal__btn { width: auto; margin: 0; padding: 0 24px; min-height: 46px; flex: 0 0 auto; }

/* Lightbox bukti */
.csfdn-portal__lightbox {
	position: fixed; inset: 0; z-index: 100;
	background: rgb(0 0 0 / 0.9);
	display: flex; align-items: center; justify-content: center; padding: 20px;
	overflow: auto;
}
.csfdn-portal__lightbox-close {
	position: fixed; top: 14px; right: 18px;
	background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.25);
	width: 44px; height: 44px; border-radius: 50%;
	color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.csfdn-portal__lightbox-body { max-width: 900px; width: 100%; text-align: center; }
/* `margin-inline: auto` bukan hiasan: begitu tema membuat gambar konten
   `display: block` (entry-content.css melakukannya), text-align:center pada
   induknya berhenti berlaku dan bukti transfer menempel ke kiri. */
.csfdn-portal__lightbox-body img { max-width: 100%; height: auto; border-radius: 10px; margin-inline: auto; }
.csfdn-portal__lightbox-body iframe { width: 100%; height: 78vh; border: 0; border-radius: 10px; background: #fff; }

/* Toast */
.csfdn-portal__toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	z-index: 120; max-width: min(92vw, 520px);
	background: var(--p-ink); color: var(--p-on-ink);
	padding: 14px 24px; border-radius: 999px;
	font-size: 14.5px; font-weight: 600; text-align: center;
	box-shadow: 0 12px 30px rgb(0 0 0 / 0.4);
}
.csfdn-portal__toast--bad { background: var(--p-err); color: #3b0708; }

/* ---------------------------------------------------------------------------
 * Responsif
 *
 * Titik potongnya ditentukan oleh isi, bukan oleh nama perangkat: masing-masing
 * dipasang tepat di lebar saat tata letak sebelumnya mulai pecah.
 * ------------------------------------------------------------------------ */

/* Empat kartu ringkasan sejajar begitu ada ruangnya. */
@media (min-width: 720px) {
	.csfdn-portal__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

@media (min-width: 900px) {
	.csfdn-portal { padding: 0 24px 96px; }
	.csfdn-portal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Di bawah 560px nominal tidak lagi muat di samping judul: ia turun ke bawah
   dan rata kiri, bukan diperas jadi dua baris angka. */
@media (max-width: 559px) {
	/* Header pecah jadi dua baris: identitas di bawah nama portal, rata kiri
	   keduanya. Yang dihindari di sini adalah email panjang yang menyeret
	   "Sign out" keluar layar. */
	.csfdn-portal__bar { gap: 4px 12px; padding-top: 18px; }
	.csfdn-portal__user { flex: 1 1 100%; justify-content: space-between; }
	.csfdn-portal__who { max-width: none; flex: 1 1 auto; }

	.csfdn-portal__row-amount {
		text-align: left;
		margin-left: 0;
		flex: 1 1 100%;
		display: flex;
		align-items: baseline;
		gap: 10px;
		padding-top: 2px;
	}
	.csfdn-portal__row-amount b { display: inline; }
	.csfdn-portal__row-head { gap: 8px; }
	.csfdn-portal__panel-head { gap: 10px; }
	.csfdn-portal__bulk .csfdn-portal__btn { flex: 1 1 auto; }
}

/* Ponsel kecil (≈320–400px): kolom ganda menyisakan ±140px per kolom, dan
   nomor rekening pun tidak muat. Semuanya jadi satu kolom. */
@media (max-width: 400px) {
	.csfdn-portal { padding: 0 12px 72px; }
	.csfdn-portal__cards { grid-template-columns: minmax(0, 1fr); }
	.csfdn-portal__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.csfdn-portal__row { padding: 16px 14px; }
	.csfdn-portal__actions .csfdn-portal__btn,
	.csfdn-portal__actions .csfdn-portal__chip { flex: 1 1 100%; }
	.csfdn-portal__reconcile-form .csfdn-portal__btn { flex: 1 1 100%; }
	.csfdn-portal__bar { padding: 16px 0 14px; margin-bottom: 18px; }
}

/* Perangkat sentuh: chip filter, tombol massal, dan pager naik ke 44px.
   Ketiganya lolos WCAG AA (minimum 24px) pada ukuran aslinya, tetapi portal ini
   dipakai sambil berdiri di depan meja penerima tamu — di sana jari, bukan
   kursor, yang harus tepat sasaran. Dibatasi ke `pointer: coarse` supaya
   tampilan desktop tetap padat. */
@media (pointer: coarse) {
	.csfdn-portal__chip { min-height: 44px; padding: 0 18px; }
	.csfdn-portal__bulk .csfdn-portal__btn { min-height: 44px; }
	.csfdn-portal__pager button { min-height: 44px; }
	.csfdn-portal__row-head input[type="checkbox"] { width: 24px; height: 24px; flex-basis: 24px; }
}

/* Lanskap ponsel: tab lengket memakan hampir seluruh tinggi layar. */
@media (max-height: 480px) and (orientation: landscape) {
	.csfdn-portal__tabs { position: static; }
	.csfdn-portal--gate { min-height: auto; padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.csfdn-portal *, .csfdn-portal *::before, .csfdn-portal *::after {
		transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;
	}
}