/*
Theme Name: Kajian Child
Description: Child theme untuk platform kajian online (Astra). Semua kustomisasi tampilan proyek ada di sini — jangan edit tema induk (Astra) langsung.
Author: Kajian Demo
Template: astra
Version: 1.6.0
Text Domain: kajian
*/

/* =========================================================================
   1. TOKEN DESAIN — satu-satunya tempat mengatur palet & tipografi.
      Saat client minta penyesuaian brand, cukup ubah nilai di blok ini.
   ========================================================================= */
:root {
	/* Warna utama */
	--kajian-primer: #14532d;        /* Hijau tua — selaras poster seri */
	--kajian-primer-gelap: #0d3a1f;
	--kajian-aksen: #d4af37;         /* Emas */
	--kajian-aksen-gelap: #b8952c;

	/* Permukaan & teks */
	--kajian-latar: #f7f6f2;
	--kajian-permukaan: #ffffff;
	--kajian-teks: #1f2933;
	--kajian-teks-redup: #6b7280;
	--kajian-garis: #e5e2da;

	/* Bentuk & bayangan */
	--kajian-radius: 14px;
	--kajian-bayangan: 0 1px 3px rgba(31, 41, 51, 0.08), 0 6px 20px rgba(31, 41, 51, 0.06);

	/* Tipografi */
	--kajian-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Sentuhan jempol (ukuran minimum area tap di HP) */
	--kajian-tap: 48px;
}

/* =========================================================================
   2. DASAR
   ========================================================================= */
.kajian-grid img,
.kajian-hero img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   3. TOMBOL — mobile-first: lebar penuh & tinggi ramah jempol di HP.
   ========================================================================= */
.kajian-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--kajian-tap);
	padding: 0.65rem 1.4rem;
	border: 0;
	border-radius: 12px;
	font-family: var(--kajian-font);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.kajian-btn:active {
	transform: scale(0.98);
}

.kajian-btn--utama,
.kajian-btn--utama:visited {
	background: var(--kajian-primer);
	color: #fff;
}

.kajian-btn--utama:hover,
.kajian-btn--utama:focus {
	background: var(--kajian-primer-gelap);
	color: #fff;
}

.kajian-btn--aksen,
.kajian-btn--aksen:visited {
	background: var(--kajian-aksen);
	color: #1f2933;
}

.kajian-btn--aksen:hover,
.kajian-btn--aksen:focus {
	background: var(--kajian-aksen-gelap);
	color: #1f2933;
}

@media ( min-width: 640px ) {
	.kajian-btn {
		width: auto;
		display: inline-flex;
	}

	.kajian-card .kajian-btn {
		width: 100%; /* Di dalam kartu tetap lebar penuh agar seragam. */
	}
}

/* =========================================================================
   4. GRID KARTU SERI — 1 kolom di HP, 2 kolom tablet, 3 kolom desktop.
   ========================================================================= */
.kajian-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

@media ( min-width: 640px ) {
	.kajian-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.kajian-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.kajian-card {
	display: flex;
	flex-direction: column;
	background: var(--kajian-permukaan);
	border: 1px solid var(--kajian-garis);
	border-radius: var(--kajian-radius);
	box-shadow: var(--kajian-bayangan);
	overflow: hidden;
}

.kajian-card__poster {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--kajian-primer);
}

.kajian-card__poster-img,
.kajian-card__poster-kosong {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kajian-card__isi {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.4rem;
	padding: 1rem 1.1rem 1.25rem;
	font-family: var(--kajian-font);
}

.kajian-card__judul {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
}

.kajian-card__judul a {
	color: var(--kajian-teks);
	text-decoration: none;
}

.kajian-card__judul a:hover {
	color: var(--kajian-primer);
}

.kajian-card__meta {
	margin: 0;
	color: var(--kajian-teks-redup);
	font-size: 0.875rem;
}

.kajian-card__harga {
	margin: 0.25rem 0 0.75rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--kajian-primer);
	margin-top: auto; /* Dorong harga+tombol ke bawah agar kartu sejajar. */
	padding-top: 0.75rem;
}

.kajian-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: rgba(20, 83, 45, 0.1);
	color: var(--kajian-primer);
	font-size: 0.8rem;
	font-weight: 600;
}

/* =========================================================================
   5. LANDING PAGE
   ========================================================================= */
.kajian-wrap {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.kajian-hero {
	background: linear-gradient( 160deg, var(--kajian-primer) 0%, var(--kajian-primer-gelap) 100% );
	color: #fff;
	padding: 3.5rem 0 4rem;
	text-align: center;
	font-family: var(--kajian-font);
}

.kajian-hero__judul {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: clamp( 1.75rem, 5.5vw, 2.75rem );
	line-height: 1.2;
}

.kajian-hero__tagline {
	margin: 0 auto 1.75rem;
	max-width: 34rem;
	font-size: clamp( 1rem, 3vw, 1.15rem );
	color: rgba(255, 255, 255, 0.85);
}

.kajian-hero__aksi {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.kajian-hero__sekunder {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.95rem;
}

.kajian-hero__sekunder:hover {
	color: #fff;
}

/* Bagian cara kerja: 3 langkah. */
.kajian-langkah {
	padding: 3rem 0;
	font-family: var(--kajian-font);
}

.kajian-langkah__daftar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 1.75rem;
}

@media ( min-width: 768px ) {
	.kajian-langkah__daftar {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.kajian-langkah__item {
	text-align: center;
	padding: 0 0.5rem;
}

.kajian-langkah__nomor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background: var(--kajian-primer);
	color: var(--kajian-aksen);
	font-size: 1.35rem;
	font-weight: 700;
}

.kajian-langkah__item h3 {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
}

.kajian-langkah__item p {
	margin: 0;
	color: var(--kajian-teks-redup);
	font-size: 0.95rem;
}

/* Bagian daftar seri & penutup. */
.kajian-seri {
	padding: 2.5rem 0 3rem;
	background: var(--kajian-latar);
	font-family: var(--kajian-font);
}

.kajian-judul-bagian {
	margin: 0;
	text-align: center;
	font-size: clamp( 1.4rem, 4vw, 1.9rem );
}

.kajian-sub-bagian {
	margin: 0.5rem auto 0;
	max-width: 32rem;
	text-align: center;
	color: var(--kajian-teks-redup);
}

.kajian-penutup {
	padding: 3.5rem 0;
	text-align: center;
	font-family: var(--kajian-font);
}

.kajian-penutup .kajian-btn {
	margin: 1.5rem auto 0;
}

/* =========================================================================
   6. KOTAK INFO (ajakan masuk / katalog kosong di "Kajian Saya")
   ========================================================================= */
.kajian-kotak-info {
	max-width: 28rem;
	margin: 2rem auto;
	padding: 2rem 1.5rem;
	background: var(--kajian-permukaan);
	border: 1px solid var(--kajian-garis);
	border-radius: var(--kajian-radius);
	box-shadow: var(--kajian-bayangan);
	text-align: center;
	font-family: var(--kajian-font);
}

.kajian-kotak-info h2 {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
}

.kajian-kotak-info p {
	color: var(--kajian-teks-redup);
	margin: 0 0 1.25rem;
}

/* =========================================================================
   7. PROGRES TONTON ("Kajian Saya")
   ========================================================================= */
.kajian-progres {
	height: 8px;
	margin-top: 0.35rem;
	border-radius: 999px;
	background: var(--kajian-garis);
	overflow: hidden;
}

.kajian-progres__isi {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--kajian-primer);
}

/* =========================================================================
   8. BAR BELI LENGKET — halaman detail seri di HP.
      Harga + tombol selalu dalam jangkauan jempol; hilang di layar besar.
   ========================================================================= */
.kajian-beli-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.25rem calc( 0.75rem + env( safe-area-inset-bottom ) );
	background: var(--kajian-permukaan);
	border-top: 1px solid var(--kajian-garis);
	box-shadow: 0 -4px 16px rgba(31, 41, 51, 0.12);
	font-family: var(--kajian-font);
}

.kajian-beli-bar__harga {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--kajian-primer);
	white-space: nowrap;
}

.kajian-beli-bar .kajian-btn {
	width: auto;
	flex: 1;
	max-width: 220px;
}

/* Beri ruang di bawah konten agar tidak tertutup bar. */
body.kajian-ada-beli-bar {
	padding-bottom: 84px;
}

@media ( min-width: 768px ) {
	.kajian-beli-bar {
		display: none;
	}

	body.kajian-ada-beli-bar {
		padding-bottom: 0;
	}
}

/* =========================================================================
   9. BANNER DEMO — pengingat mode uji coba, tampil di semua halaman.
   ========================================================================= */
.kajian-banner-demo {
	background: #7c2d12;
	color: #fde68a;
	text-align: center;
	font-family: var(--kajian-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.45rem 1rem;
}

/* =========================================================================
   10. NAVIGASI BAWAH ALA APLIKASI — hanya layar HP.
   ========================================================================= */
.kajian-nav-bawah {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 998;
	display: flex;
	background: var(--kajian-permukaan);
	border-top: 1px solid var(--kajian-garis);
	box-shadow: 0 -4px 16px rgba(31, 41, 51, 0.08);
	padding-bottom: env( safe-area-inset-bottom );
	font-family: var(--kajian-font);
}

.kajian-nav-bawah__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.5rem 0 0.55rem;
	color: var(--kajian-teks-redup);
	font-size: 0.7rem;
	font-weight: 600;
	text-decoration: none;
	min-height: var(--kajian-tap);
}

.kajian-nav-bawah__item svg {
	width: 22px;
	height: 22px;
}

.kajian-nav-bawah__item--aktif,
.kajian-nav-bawah__item:hover,
.kajian-nav-bawah__item:focus {
	color: var(--kajian-primer);
}

/* Beri ruang bawah untuk nav di semua halaman (layar HP). */
body {
	padding-bottom: 68px;
}

/* Saat bar beli tampil (halaman detail seri), nav bawah mengalah. */
body.kajian-ada-beli-bar .kajian-nav-bawah {
	display: none;
}

@media ( min-width: 768px ) {
	.kajian-nav-bawah {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

/* =========================================================================
   11. CHECKOUT: RINGKASAN PEMBELI (data diambil dari profil, tanpa form)
   ========================================================================= */
.kajian-pembeli-ringkas {
	background: var(--kajian-latar);
	border: 1px solid var(--kajian-garis);
	border-radius: var(--kajian-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	font-family: var(--kajian-font);
}

.kajian-pembeli-ringkas__judul {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kajian-teks-redup);
}

.kajian-pembeli-ringkas__data {
	margin: 0 0 0.5rem;
	line-height: 1.55;
}

.kajian-pembeli-ringkas__ubah {
	font-size: 0.875rem;
	color: var(--kajian-primer);
	text-decoration: underline;
}

/* Baris form field yang dikirim tersembunyi tidak boleh memakan ruang. */
.form-row.kajian-field-tersembunyi {
	display: none;
}

/* =========================================================================
   12. HALAMAN 404
   ========================================================================= */
.kajian-404 {
	max-width: 28rem;
	margin: 3.5rem auto;
	padding-inline: 1.25rem;
	text-align: center;
	font-family: var(--kajian-font);
}

.kajian-404__kode {
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--kajian-primer);
	line-height: 1;
	margin: 0;
}

.kajian-404 h1 {
	font-size: 1.4rem;
	margin: 0.75rem 0 0.5rem;
}

.kajian-404 p {
	color: var(--kajian-teks-redup);
	margin: 0 0 1.5rem;
}

.kajian-404 .kajian-btn {
	margin-bottom: 0.75rem;
}

/* =========================================================================
   13. INDIKATOR MENU AKTIF (layar besar) — bukan hanya beda warna teks.
   Astra menu horizontal muncul di >=922px; item aktif = .current-menu-item.
   ========================================================================= */
@media ( min-width: 922px ) {
	.main-header-menu .current-menu-item > .menu-link,
	.main-header-menu .current_page_item > .menu-link {
		color: var(--kajian-primer);
		font-weight: 700;
		box-shadow: inset 0 -3px 0 var(--kajian-aksen);
	}
}

/* =========================================================================
   14. WOOCOMMERCE — jarak antar tombol aksi (Bayar / Batal, dll).
   ========================================================================= */
.woocommerce .woocommerce-button,
.woocommerce a.button,
.woocommerce button.button {
	margin: 0 0.5rem 0.5rem 0;
}

/* =========================================================================
   15. HALAMAN AKUN SAYA (WooCommerce) — rapikan di layar HP.
   Navigasi jadi daftar penuh yang seragam + jarak ke konten di bawahnya.
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( max-width: 768px ) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 1.75rem;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		border: 1px solid var(--kajian-garis);
		border-radius: var(--kajian-radius);
		overflow: hidden;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link {
		margin: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link a {
		display: block;
		padding: 0.9rem 1.1rem;
		border-bottom: 1px solid var(--kajian-garis);
		font-family: var(--kajian-font);
		color: var(--kajian-teks);
		text-decoration: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child a {
		border-bottom: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
		background: var(--kajian-primer);
		color: #fff;
		font-weight: 600;
	}
}

/* =========================================================================
   16. HALAMAN "PESANAN DITERIMA" & DETAIL PESANAN — stack rapi di HP.
   ========================================================================= */
@media ( max-width: 768px ) {
	.woocommerce ul.order_details.woocommerce-order-overview {
		display: block;
		padding: 0;
		margin: 0 0 1.5rem;
	}

	.woocommerce ul.order_details.woocommerce-order-overview li {
		float: none;
		width: 100%;
		border: 0;
		border-bottom: 1px solid var(--kajian-garis);
		padding: 0.55rem 0;
		margin: 0;
		text-align: left;
		font-size: 0.95rem;
	}

	.woocommerce ul.order_details.woocommerce-order-overview li:last-child {
		border-bottom: 0;
	}

	/* Tabel rincian order (termasuk info Tripay) tidak melebar keluar layar. */
	.woocommerce-order .shop_table,
	.woocommerce-order .woocommerce-table {
		display: block;
		overflow-x: auto;
	}
}

/* =========================================================================
   17. NOTICE WOOCOMMERCE — beri jarak tombol (mis. "Lihat keranjang")
   agar tidak menempel pada teks notice.
   ========================================================================= */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	display: inline-block;
	margin-top: 0.85rem;
}

/* =========================================================================
   18. TAUTAN DAFTAR DI MODAL LOGIN TUTOR
   ========================================================================= */
.kajian-modal-daftar {
	margin: 1.1rem 0 0;
	text-align: center;
	font-size: 0.95rem;
	color: var(--kajian-teks-redup);
	font-family: var(--kajian-font);
}

.kajian-modal-daftar a {
	color: var(--kajian-primer);
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================================
   19. NAMA SITUS (BRAND) DI HEADER
   Astra bawaan menampilkan "Adara Kajian" (26px, mengecil di HP) sehingga
   terlihat lebih kecil dari judul halaman di bawahnya. Naikkan agar brand
   menjadi anchor visual header. Selektor .ast-site-title-wrap .site-title
   lebih spesifik daripada .site-title milik Astra sehingga menang.
   ========================================================================= */
.ast-site-title-wrap .site-title {
	font-size: 2rem;
	line-height: 1.25;
}

.ast-site-title-wrap .site-title a {
	font-weight: 700;
}