/**
 * Affiliate Program — Styling
 *
 * CSS untuk templates/page-affiliate-program.php (halaman /affiliate-program).
 * Semua kelas berawalan la-ap- untuk isolasi.
 *
 * Polanya meniru beranda (lebar 1344px, padding tepi 32px, padding section
 * 64px/20px, tipografi judul & sub yang sama), tapi selektornya SENGAJA
 * terpisah dari .la-home-*. Dua alasannya:
 *
 * 1. css/home.css hanya dimuat di beranda (lihat inc/enqueue.php), jadi
 *    kelas .la-home-* memang tidak tersedia di halaman ini.
 * 2. Kalau disatukan, setiap penyetelan beranda akan ikut mengubah halaman
 *    ini diam-diam — dan sebaliknya.
 *
 * @package Lisanularab
 * @since 1.0.0
 */

/* =====================================================
   PEMBUNGKUS
   =====================================================
   Menyalin pola .la-home-wrap: lebar maksimum DAN jarak tepi berada pada
   SATU elemen yang sama. Kalau paddingnya ditaruh di pembungkus DI LUAR
   batas lebar, ia tidak berpengaruh sama sekali di layar lebar. */

.la-ap-wrap {
	width: 100%;
	max-width: 1344px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}

@media (max-width: 768px) {
	.la-ap-wrap {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}
}

/* =====================================================
   TOMBOL
   =====================================================
   Bentuk & tipografi sama dengan tombol beranda (pola Tutor LMS), disalin
   ke sini karena .la-home-btn hidup di home.css yang tidak dimuat di
   halaman ini. */

.la-ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.28px;
	line-height: 24px;
	min-height: 48px;
	padding: 8px 18px;
	border-radius: 50px;
	cursor: pointer;
	text-decoration: none;
	border: none;
	font-family: var(--font-regular);
	transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
	box-sizing: border-box;
}

.la-ap-btn svg {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.la-ap-btn:hover svg {
	transform: translateX(2px);
}

/* Putih solid — hero berlatar biru pekat, jadi tombol gelap akan tenggelam. */
.la-ap-btn--putih {
	color: #0d0d0d;
	background: #fff;
}

.la-ap-btn--putih:hover {
	opacity: 0.88;
}

/* =====================================================
   1. HERO
   ===================================================== */

.la-ap-hero {
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 160, 1) 0%,
		rgba(9, 26, 220, 1) 41%,
		rgba(255, 255, 255, 1) 100%
	);

	/* padding-top besar meniru hero beranda: navbar ber-position:fixed
	   melayang di atas section ini, dan angka inilah yang menjaga judul
	   tidak tertutup navbar. padding-bottom NOL karena gambar di dasar
	   hero memang dibuat menempel rata ke tepi bawahnya. */
	padding: 150px 0 0;
}

@media (max-width: 768px) {
	.la-ap-hero {
		padding-top: 120px;
	}
}

/* --- Judul dua kolom --- */

.la-ap-hero__header {
	display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    row-gap: 30px;
    column-gap: 30px;
	margin-bottom: 56px;
}

.la-ap-hero__title {
	font-size: 3.5rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 4.083rem;
	margin-bottom: 0;
}

/* Baris kedua judul ("Lisanul Arab") HANYA turun baris di desktop; di
   mobile <br> ini disembunyikan sehingga judul mengalir sebagai satu
   kalimat yang membungkus alami mengikuti lebar layar. */
.la-ap-hero__title-jeda {
	display: none;
}

@media (min-width: 769px) {
	.la-ap-hero__title-jeda {
		display: block;
	}
}

.la-ap-hero__header-kanan {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Blok (sub + tombol) didorong ke sisi KANAN kolomnya — sisi kiri tombol
	   tetap sejajar dengan sisi kiri sub karena keduanya sama-sama menempel
	   flex-end sebagai satu kolom, bukan di-center satu per satu. */
	align-items: flex-start;
	gap: 24px;
}

.la-ap-hero__sub {
	font-size: var(--font-size-lg);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
	letter-spacing: -0.005em;
	max-width: 480px;
	margin-top: 10px;
	margin-bottom: 0;
	/* align-items:flex-end pada induk hanya menempelkan KOTAK sub ke kanan;
	   tanpa ini teksnya sendiri tetap rata kiri di dalam kotak itu, sehingga
	   ujung kanannya tidak benar-benar sejajar dengan tombol di bawahnya. */
	/* text-align: right; */
}

@media (max-width: 768px) {
	.la-ap-hero__header {
		display: block;
		margin-bottom: 36px;
	}

	.la-ap-hero__title {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
		margin-bottom: 16px;
	}

	.la-ap-hero__header-kanan {
		display: flex;
		align-items: flex-start;
	}

	.la-ap-hero__sub {
		line-height: var(--line-height-medium);
		text-align: left;
	}
}

/* --- Gambar --- */

/* Border putih tembus pandang, meniru gambar besar di kartu Progres Belajar
   (beranda). Sisi bawah sengaja 0: gambar menempel rata ke dasar hero, jadi
   garis di sana tidak punya tepi untuk dibingkai. */
.la-ap-hero__gambar {
	--la-ap-bingkai: 12px;   /* tebal border putih   */
	--la-ap-lengkung: 12px;  /* lengkung sudut GAMBAR */

	width: 100%;
	/* Radius LUAR = tebal border + lengkung yang diinginkan pada gambar.
	   CSS menghitung radius sisi dalam sebagai radius luar dikurangi tebal
	   border; pada 12px dikurangi 12px hasilnya nol, dan itulah sebabnya
	   bingkainya melengkung sementara gambar di dalamnya bersudut siku.
	   Dengan menjumlahkan keduanya, sudut dalam dan luar melengkung
	   sepusat — persis seperti dua lingkaran konsentris. */
	border-radius: calc(var(--la-ap-bingkai) + var(--la-ap-lengkung))
	               calc(var(--la-ap-bingkai) + var(--la-ap-lengkung)) 0 0;
	border-width: var(--la-ap-bingkai) var(--la-ap-bingkai) 0 var(--la-ap-bingkai);
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.2);
	overflow: hidden;
	position: relative;
}

/* Gradasi putih yang MENIMPA gambar, melarutkan bagian bawahnya ke latar
   hero yang memang sudah putih di titik itu — sehingga gambar tidak
   berhenti dengan garis tegas, melainkan memudar habis.

   Dibuat sebagai ::after, bukan box-shadow: box-shadow selalu digambar di
   LUAR kotak elemen dan tidak pernah menimpa isinya. `inset: 0` di sini
   mengacu ke kotak PADDING — jadi ia menutupi gambarnya saja, tidak ikut
   menutupi border putih di sekelilingnya. */
.la-ap-hero__gambar::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) var(--la-ap-mulai-pudar, 55%),
		rgba(255, 255, 255, 1) 100%
	);
}

.la-ap-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	.la-ap-hero__gambar {
		--la-ap-bingkai: 4px;
		--la-ap-lengkung: 10px;
		/* Gambar jauh lebih pendek di layar sempit, jadi pudarannya dimulai
		   lebih rendah supaya tidak menelan terlalu banyak isi. */
		--la-ap-mulai-pudar: 10%;
	}
}

/* =====================================================
   2. CARA KERJA — TIGA LANGKAH
   ===================================================== */

.la-ap-langkah {
	background: #fff;
	padding: 64px 0;
	padding-top: 128px;
}

@media (max-width: 768px) {
	.la-ap-langkah {
		padding: 52px 0;
		padding-top: 92px;
	}
}

/* --- Judul dua kolom --- */

.la-ap-langkah__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-2xl);
	margin-bottom: 56px;
}

.la-ap-langkah__eyebrow {
	display: block;
	font-size: var(--font-size-eyebrow);
	font-weight: 400;
	color: var(--color-text-2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.la-ap-langkah__title {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: var(--color-text-1);
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin-bottom: 0;
}

/* --- Tiga langkah --- */

.la-ap-langkah__grid {
	/* Jarak antar kolom disimpan sebagai variabel karena dipakai DUA kali:
	   sebagai gap grid, dan sebagai panjang garis penghubung yang harus
	   menyeberangi gap itu untuk sampai ke lingkaran berikutnya. Kalau
	   ditulis dua kali, keduanya pasti melenceng suatu saat. */
	--la-ap-gap: 60px;
	--la-ap-bulat: 64px;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--la-ap-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.la-ap-langkah__item {
	position: relative;
}

.la-ap-langkah__nomor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--la-ap-bulat);
	height: var(--la-ap-bulat);
	border-radius: 50%;
	background: #f5f3f1;
	font-size: var(--font-size-32);
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1;
	margin-bottom: 28px;
}

/* Garis penghubung antar lingkaran. Digambar oleh KARTUNYA, bukan oleh
   lingkaran: garis harus menyeberangi gap grid untuk mencapai lingkaran
   berikutnya, dan sebuah ::after pada lingkaran hanya bisa memanjang relatif
   terhadap lingkaran itu sendiri — tidak akan pernah sampai. */
.la-ap-langkah__item::after {
	content: "";
	position: absolute;
	top: calc(var(--la-ap-bulat) / 2);
	/* Menempel rata ke sisi lingkaran — tanpa celah. */
	left: var(--la-ap-bulat);
	right: calc(var(--la-ap-gap) * -1);
	height: 2px;
	background: rgba(245, 243, 241, 1.00);
}

/* Kartu terakhir tidak punya tetangga di kanan, jadi garisnya berhenti di
   tepi kolom alih-alih menjulur ke luar. */
.la-ap-langkah__item:last-child::after {
	right: 0;
}

.la-ap-langkah__item-title {
	font-size: var(--font-size-20);
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

.la-ap-langkah__item-desc {
	font-size: var(--font-size-md);
	font-weight: 400;
	color: var(--color-text-2);
	line-height: 1.4;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.la-ap-langkah__item-desc {
		font-size: var(--font-size-md);
	}
}

@media (max-width: 768px) {
	.la-ap-langkah__header {
		display: block;
		margin-bottom: 36px;
	}

	.la-ap-langkah__title {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
		margin-bottom: 16px;
	}

	.la-ap-langkah__eyebrow {
		margin-bottom: 12px;
	}

	/* Menumpuk ke bawah: lingkaran di kiri, isinya di kanan — dan garis
	   penghubung ikut berputar seperempat jadi tegak. */
	.la-ap-langkah__grid {
		--la-ap-gap: var(--space-xl);
		--la-ap-bulat: 56px;

		grid-template-columns: minmax(0, 1fr);
	}

	.la-ap-langkah__item {
		display: grid;
		grid-template-columns: var(--la-ap-bulat) minmax(0, 1fr);
		gap: 20px;
	}

	.la-ap-langkah__nomor {
		font-size: var(--font-size-24);
		margin-bottom: 0;
	}

	.la-ap-langkah__item::after {
		top: var(--la-ap-bulat);
		bottom: calc(var(--la-ap-gap) * -1);
		left: calc(var(--la-ap-bulat) / 2);
		right: auto;
		width: 2px;
		height: auto;
	}

	/* Menumpuk ke bawah membalik arahnya: yang tidak punya tetangga kini
	   kartu TERAKHIR di bawah, bukan di kanan. */
	.la-ap-langkah__item:last-child::after {
		display: none;
	}
}

/* =====================================================
   3. KENAPA IKUT
   =====================================================
   Kartunya memakai gaya kartu Fasilitas di beranda: latar #f3f4f5, sudut
   20px (12px di mobile), padding 32px (20px di mobile), ikon 28px sewarna
   judul. Nilainya disalin, bukan diwarisi — css/home.css tidak dimuat di
   halaman ini. */

.la-ap-kenapa {
	background: #fff;
	padding: 64px 0;
	padding-bottom: 128px;
}

@media (max-width: 768px) {
	.la-ap-kenapa {
		padding: 52px 0;
		padding-bottom: 104px;
	}
}

/* Grid dua kolom dipertahankan meski kolom kanan kosong (tidak ada sub di
   section ini) — supaya lebar dan titik patah baris judulnya persis sama
   dengan judul section lain yang berpasangan dengan sub. */
.la-ap-kenapa__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-2xl);
	margin-bottom: 56px;
}

.la-ap-kenapa__title {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: var(--color-text-1);
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin-bottom: 0;
}

.la-ap-kenapa__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
}

.la-ap-kenapa__item {
	--la-ap-sisi: 32px;
	--la-ap-radius: 20px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--la-ap-sisi);
	background: #f3f4f5;
	border-radius: var(--la-ap-radius);
}

/* Ikon GELAP di sini, bukan putih seperti di section Affiliate beranda:
   di sana kartunya berlatar gradasi gelap, di sini berlatar abu-abu muda. */
.la-ap-kenapa__ikon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	margin-bottom: 20px;
	color: #0d0d0d;
}

.la-ap-kenapa__ikon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.la-ap-kenapa__item-title {
	font-size: var(--font-size-20);
	font-weight: 500;
	color: var(--color-text-1);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

.la-ap-kenapa__item-desc {
	font-size: var(--font-size-md);
	font-weight: 400;
	color: var(--color-text-2);
	line-height: 1.4;
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.la-ap-kenapa__header {
		display: block;
		margin-bottom: 36px;
	}

	.la-ap-kenapa__title {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
		margin-bottom: 0;
	}

	.la-ap-kenapa__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.la-ap-kenapa__item {
		--la-ap-sisi: 20px;
		--la-ap-radius: 12px;
	}

	.la-ap-kenapa__item-desc {
		font-size: var(--font-size-md);
	}
}

/* =====================================================
   4. TABEL KOMISI
   ===================================================== */

.la-ap-komisi {
	background: #fafafa;
	padding: 64px 0;
}

.la-ap-komisi__header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: flex-end;
	gap: var(--space-2xl);
	margin-bottom: 32px;
}

.la-ap-komisi__title {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: var(--color-text-1);
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin-bottom: 0;
}

.la-ap-komisi__header-kanan {
	display: flex;
	justify-content: flex-end;
}

.la-ap-komisi__sub {
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text-2);
	line-height: 1.5;
	letter-spacing: -0.005em;
	max-width: 480px;
	margin-bottom: 6px !important;
}

/* --- Kolom pencarian --- */

.la-ap-komisi__cari {
	position: relative;
	max-width: 360px;
	margin-bottom: 6px;
}

.la-ap-komisi__cari-ikon {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--color-text-secondary);
	pointer-events: none;
}

.la-ap-komisi__cari-input {
	width: 100%;
	min-height: 38px;
	/* Ruang kiri disediakan untuk ikon kaca pembesar yang melayang di atas
	   kolom ini; tanpa itu teks ketikan akan menabrak ikonnya. */
	padding: 2px 16px 2px 46px;
	border: 1.5px solid #ebebeb;
	border-radius: 6px;
	background: #fff;
	font-family: var(--font-regular);
	font-size: var(--font-size-eyebrow);
	color: #8f8f8f;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
	font-weight: 500;
}

.la-ap-komisi__cari-input::placeholder {
	color: var(--color-text-secondary);
}

/* Warna merek dipakai untuk hover DAN focus. Kalau hanya hover, pengguna
   papan ketik — yang tidak pernah memicu hover — tidak mendapat penanda
   apa pun bahwa kolom ini sedang aktif. */
.la-ap-komisi__cari-input:hover,
.la-ap-komisi__cari-input:focus {
	border-color: var(--color-primary);
}

.la-ap-komisi__cari-input:focus {
	outline: none;
}

/* --- Tabel --- */

.la-ap-komisi__wrap-tabel {
	/* Tinggi baris dipatok, bukan mengikuti isi — itulah yang membuat
	   "10 baris terlihat" benar-benar tepat. Angkanya lebih besar dari
	   tinggi alami baris (32px), jadi padding 5px pada td tidak lagi
	   menentukan tinggi; ia hanya menjadi jarak minimum. */
	--la-ap-baris: 50px;
	--la-ap-kepala: 44px;
	--la-ap-tampil: 7;
	--la-ap-garis: #ebebeb;
	border-radius: 6px;
	position: relative;
	border: 1.5px solid #ebebeb;
	overflow: hidden;
}

/* Petunjuk "masih ada isi di bawah".

   Bilah gulirnya disembunyikan (lihat .la-ap-komisi__badan), dan itu
   menghilangkan satu-satunya penanda bahwa tabel ini masih berlanjut —
   pengunjung bisa mengira 10 baris inilah seluruh isinya. Pudaran tipis di
   tepi bawah menggantikan peran itu, dan dipadamkan oleh JavaScript begitu
   gulirannya sampai ke dasar. */
.la-ap-komisi__wrap-tabel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.la-ap-komisi__wrap-tabel.is-dasar::after {
	opacity: 0;
}

/* Kedua tabel (kepala & badan) memakai table-layout: fixed dengan lebar
   kolom yang sama persis. Tanpa itu keduanya melebar mengikuti isinya
   masing-masing dan kolomnya tidak akan pernah sejajar. */
.la-ap-komisi__tabel {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 15px;
}

/* Kolom rate 10%, bukan 8%. Aritmetikanya memaksa: pada lebar tabel 1280px,
   8% hanya menyediakan 102px, sedangkan kata "Influencer" (±80px) ditambah
   jarak 20px di kiri dan kanan menuntut 120px. Pada 8% jarak kanannya
   tersisa 2px — itulah yang membuat judulnya terlihat menempel ke garis
   tepi tabel. */
.la-ap-komisi__kol-kelas { width: 62%; }
.la-ap-komisi__kol-harga { width: 18%; }
.la-ap-komisi__kol-rate  { width: 10%; }

.la-ap-komisi__kepala {
	overflow: hidden;
	/* Menyisakan ruang selebar bilah gulir milik .la-ap-komisi__badan di
	   sebelah, TANPA benar-benar memunculkan bilah gulir di sini (kepala
	   tidak pernah digulir vertikal). Tanpa ini, kotak konten kedua wadah
	   beda lebar — kepala penuh, badan berkurang 6px oleh bilah gulirnya —
	   dan karena kolomnya table-layout:fixed berbasis persen, setiap kolom
	   SETELAH yang pertama jadi bergeser: itulah sebab "Harga Kelas" di
	   judul tidak lurus dengan "Rp180.700" di bawahnya. */
	scrollbar-gutter: stable;
	background: #f3f4f5;
	border-bottom: 1.5px solid var(--la-ap-garis);
	padding-right: 4px;
}

.la-ap-komisi__badan {
	max-height: calc(var(--la-ap-baris) * var(--la-ap-tampil));
	overflow: auto;

	/* Bilah gulir dimunculkan lagi 25 Agustus 2026 — ketebalannya diatur
	   lewat scrollbar-width (Firefox: keyword thin/auto/none, bukan angka
	   piksel) dan ::-webkit-scrollbar (Chrome/Safari/Edge: bisa piksel
	   persis, lihat aturan setelah ini). */
	scrollbar-width: thin;

	/* Jarak napas antara thumb bilah gulir dan border kanan .wrap-tabel —
	   tanpa ini keduanya menempel dan terbaca seperti garis ganda di sisi
	   kanan tabel. 4px di sini + 4px di .kepala = 8px total (sama seperti
	   sebelumnya, saat semuanya ada di .kepala), jadi kolom kepala & badan
	   tetap sejajar. Khusus desktop — mobile mengembalikan keduanya lewat
	   media query di bawah karena arah gulirnya beda (horizontal). */
	padding-right: 4px;
}

/* Ketebalan bilah gulir tabel komisi (Chrome/Safari/Edge). Ubah `width` di
   sini untuk mengatur ketebalannya. */
.la-ap-komisi__badan::-webkit-scrollbar {
	width: 4px;
}

.la-ap-komisi__badan::-webkit-scrollbar-track {
	background: transparent;
}

.la-ap-komisi__badan::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 6px;
}

.la-ap-komisi__badan::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-secondary);
}

.la-ap-komisi__tabel th {
	height: var(--la-ap-kepala);
	padding: 0 20px;
	font-size: var(--font-size-eyebrow);
	font-weight: 500;
	color: #4d4d4d;
	text-align: left;
	white-space: nowrap;
}

.la-ap-komisi__tabel td {
	height: var(--la-ap-baris);
	padding: 5px 20px;
	border-bottom: 1px solid var(--la-ap-garis);
	color: #171717;
	text-align: left;
	vertical-align: middle;
	font-size: var(--font-size-eyebrow);
}

.la-ap-komisi__tabel tr:last-child td {
	border-bottom: 0;
}

/* Menyorot baris yang sedang disentuh kursor. Diikat ke .la-ap-komisi__baris,
   bukan ke `tr` mana pun, supaya baris judul kolom tidak ikut menyala. */
.la-ap-komisi__baris {
	transition: background-color 0.15s ease;
	background: #fff;
}

.la-ap-komisi__baris:hover {
	background-color: #f7f7f7;
}

/* Judul terpanjang mencapai 116 karakter. Dipotong satu baris dengan tiga
   titik supaya tinggi setiap baris seragam — judul utuhnya tetap terbaca
   lewat atribut title saat kursor menyentuhnya. */
.la-ap-komisi__td-kelas {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.la-ap-komisi__td-harga {
	color: var(--color-text-2);
	white-space: nowrap;
}

.la-ap-komisi__td-rate {
	font-weight: 500;
	white-space: nowrap;
}

.la-ap-komisi__kosong {
	margin: 0;
	padding: 24px 20px;
	text-align: center;
	color: var(--color-text-2);
	font-size: var(--font-size-md);
}

@media (max-width: 768px) {
	.la-ap-komisi {
		padding: 52px 0;
	}

	.la-ap-komisi__header {
		display: block;
		margin-bottom: 24px;
	}

	.la-ap-komisi__title {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
		margin-bottom: 16px;
	}

	.la-ap-komisi__sub {
		line-height: var(--line-height-medium);
		font-size: 16px;
		margin-bottom: 0px !important;
	}

	.la-ap-komisi__cari {
		max-width: none;
	}

	.la-ap-komisi__wrap-tabel {
		--la-ap-tampil: 5;
	}

	/* Empat kolom tidak muat di layar sempit. min-width memaksa tabel lebih
	   lebar dari wadahnya, dan overflow-x pada KEDUA wadah — kepala dan
	   badan — itulah yang membuatnya bisa digulir ke kanan. Keduanya harus
	   ikut bergulir bersamaan, kalau tidak judul kolom akan terlepas dari
	   kolomnya saat digeser (lihat js/affiliate-program.js). */
	/* Lebar minimum dinaikkan dari 620px: kolom rate butuh ruang nyata untuk
	   memuat "Reguler" dan "Influencer" tanpa keduanya bertabrakan. */
	.la-ap-komisi__tabel {
		min-width: 680px;
	}

	/* Nama Kelas dipersempit di sini (62% -> 44%), dan jatahnya dialihkan ke
	   dua kolom rate. Judulnya toh sudah dipotong tiga titik, sedangkan
	   "Influencer" tidak bisa dipotong tanpa kehilangan makna. */
	.la-ap-komisi__kol-kelas { width: 44%; }
	.la-ap-komisi__kol-harga { width: 20%; }
	.la-ap-komisi__kol-rate  { width: 18%; }

	.la-ap-komisi__kepala {
		overflow-x: auto;
		scrollbar-width: none;
		/* Perbaikan garis ganda (padding-right 4px) hanya berlaku desktop —
		   di sini geraknya horizontal, bukan vertikal, jadi dikembalikan ke
		   nilai semula. */
		padding-right: 8px;
	}

	.la-ap-komisi__kepala::-webkit-scrollbar {
		display: none;
	}

	.la-ap-komisi__badan {
		padding-right: 0;
	}

	.la-ap-komisi__tabel th,
	.la-ap-komisi__tabel td {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =====================================================
   TOMBOL — dua varian tambahan untuk section Perjanjian
   ===================================================== */

.la-ap-btn--gelap {
	color: #fff;
	background: #111;
}

.la-ap-btn--gelap:hover {
	opacity: 0.88;
}

.la-ap-btn--garis {
	color: var(--color-text-1);
	background: transparent;
	border: 1px solid var(--color-border);
}

.la-ap-btn--garis:hover {
	border-color: var(--color-text-1);
}

/* =====================================================
   5. PERJANJIAN PROGRAM
   ===================================================== */

.la-ap-perjanjian {
	background: #fff;
	padding: 128px 0;
}

.la-ap-perjanjian__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-2xl);
}

.la-ap-perjanjian__kiri {
	max-width: 600px;
}

.la-ap-perjanjian__title {
	font-size: var(--font-size-3xl);
	font-weight: 500;
	color: var(--color-text-1);
	letter-spacing: -0.03em;
	line-height: var(--line-height-vercel);
	margin-bottom: 20px;
}

.la-ap-perjanjian__sub {
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text-2);
	line-height: 1.5;
	letter-spacing: -0.005em;
	margin-bottom: 32px;
}

.la-ap-perjanjian__tombol {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.la-ap-perjanjian__catatan {
	margin-top: 40px;
	padding: 16px 20px;
	background: #eff6ff;
	border-radius: 10px;
	font-size: var(--font-size-15);
	line-height: 1.5;
	color: var(--color-text-2);
}

/* Garis putus-putus, bukan garis penuh — supaya secara visual terbaca beda
   dari tombol solid di atasnya (yang punya latar), bukan meniru tombol. */
.la-ap-perjanjian__catatan-tautan {
	color: var(--color-text-1);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px dashed var(--color-text-1);
}

.la-ap-perjanjian__catatan-tautan:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* --- Ubin logo (statis — lihat catatan di markup) --- */

.la-ap-perjanjian__kanan {
	display: flex;
	justify-content: center;
}

.la-ap-integrasi {
	--la-ap-sel: 72px;

	position: relative;
	width: calc(var(--la-ap-sel) * 5);
	height: calc(var(--la-ap-sel) * 5);

	/* Memudar di keempat tepi — persis efek aslinya (mask radial-gradient),
	   supaya ubin di pinggir terasa "berlanjut ke luar", bukan terpotong
	   tegas oleh kotak pembatas. */
	-webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

.la-ap-integrasi__ubin {
	position: absolute;
	top: calc(var(--r) * var(--la-ap-sel));
	left: calc(var(--c) * var(--la-ap-sel));
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid var(--color-border);

	/* Ubin kosong (dekoratif) memakai tinta tipis — pada aslinya inilah
	   yang membedakannya dari ubin berlogo (latar polos putih). */
	background: #f9fafb;
}

.la-ap-integrasi__ubin--isi {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.la-ap-integrasi__logo {
	display: flex;
	width: 32px;
	height: 32px;
}

.la-ap-integrasi__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 900px) {
	.la-ap-perjanjian__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0px;
	}

	.la-ap-perjanjian__kiri {
		max-width: none;
	}

	/* Ubin diperkecil di sini — kotak 360px terlalu lebar untuk layar
	   sempit, dan bilangannya (72px x 5) sudah terlanjur dipakai sebagai
	   satuan posisi tiap ubin (var(--r)/var(--c)), jadi cukup diskalakan
	   lewat transform, bukan ditulis ulang koordinatnya satu per satu. */
	.la-ap-integrasi {
		transform: scale(0.78);
	}
}

@media (max-width: 768px) {
	.la-ap-perjanjian {
		padding: 52px 0;
		padding-bottom: 0px;
		padding-top: 104px;
	}

	.la-ap-perjanjian__title {
		font-size: var(--font-size-32);
		line-height: var(--line-height-vercel-2);
		letter-spacing: var(--space-vercel-2);
	}

	.la-ap-perjanjian__sub {
		line-height: var(--line-height-medium);
		font-size: 16px;
	}

	.la-ap-perjanjian__tombol {
		/* Dulu column + stretch supaya dua tombol bertumpuk sama lebar;
		   sekarang tinggal satu tombol ("Ajukan Afiliasi Influencer" dihapus
		   26 Agustus 2026), jadi lebarnya mengikuti isinya sendiri. */
		align-items: flex-start;
	}

	.la-ap-integrasi {
		transform: scale(0.68);
	}
}

.la-ap-btn--garis-putih {
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.la-ap-btn--garis-putih:hover {
	border-color: #fff;
}

/* =====================================================
   5b. AJAKAN NAIK TIER — kartu biru di bawah grid Perjanjian
   ===================================================== */

.la-ap-perjanjian__ajakan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 32px;
	padding: 20px 20px;
	background: #091adc;
	border-radius: 20px;
}

/* Disembunyikan sementara 25 Agustus 2026. Markup tetap ada, tinggal hapus
   aturan ini untuk menampilkannya kembali. DITARUH SETELAH aturan tampil di
   atas (kekhususan satu kelas, sama-sama) — kalau ditaruh sebelum,
   display:flex di atas akan menimpanya balik. */
.la-ap-perjanjian__ajakan--sembunyi {
	display: none;
}

.la-ap-perjanjian__ajakan-teks {
	font-size: var(--font-size-15);
	font-weight: 400;
	color: #fff;
	line-height: 1.5;
	letter-spacing: -0.005em;
	max-width: 750px;
	margin-bottom: 0;
}

.la-ap-perjanjian__ajakan-tombol {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	gap: 12px;
}

@media (max-width: 768px) {
	.la-ap-perjanjian__ajakan {
		flex-direction: column;
		align-items: stretch;
		margin-top: 20px;
		padding: 28px 24px;
		border-radius: 16px;
	}

	.la-ap-perjanjian__ajakan-teks {
		max-width: none;
		margin-bottom: 20px;
	}

	.la-ap-perjanjian__ajakan-tombol {
		flex-direction: column;
		align-items: stretch;
	}
}

/* =====================================================
   WATERMARK — salinan dari beranda (.la-home-watermark).
   Posisi & style sama persis; selector dibedakan (la-ap-watermark) supaya
   mandiri, karena home.css tidak dimuat di halaman ini.
   ===================================================== */
.la-ap-watermark {
	overflow: hidden;
	background: #fff;
	text-align: center;
	padding: 0;
	margin-top: -40px;
	margin-bottom: -55px;
}

@media (max-width: 768px) {
	.la-ap-watermark {
		margin-top: -20px;
		margin-bottom: -20px;
		padding-top: 50px;
	}

	.la-ap-watermark__text {
		font-size: clamp(3rem, 22vw, 6rem);
	}
}

.la-ap-watermark__text {
	display: block;
	font-size: clamp(5rem, 18vw, 14rem);
	font-weight: 700;
	color: rgba(0, 0, 0, 0.09);
	letter-spacing: -0.03em;
	line-height: 1;
	user-select: none;
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 85%);
}