/*
 * About Us restyle -- implementasi 2026-08-30 (prompt IMPLEMENTATION dari
 * Ferdian, visual reference "Prinsip Hero About Us -- ZENOS Template").
 * Scoped SELURUHNYA ke body.zsd-halaman-about-us (lihat
 * zsd_body_class_about_us() di includes/about-us-restyle.php) -- TIDAK ADA
 * selector di file ini yang boleh bocor ke halaman lain.
 *
 * Breakpoint LOCKED sesuai spec:
 *   Desktop >1024px | Tablet 641-1024px | Mobile <=640px
 *
 * Hero Option B LOCKED: centered text -> image below -> button setelah
 * image, di SEMUA breakpoint (desktop/tablet/mobile) -- tidak ada varian
 * side-by-side seperti Option A, jadi tidak perlu override structural per
 * breakpoint untuk Hero (cuma ukuran/spacing yang menyesuaikan).
 *
 * REVISI 2026-09-11 -- rollout "global visual setting" (roadmap: Home,
 * Journal, Shop, Product Detail sudah selesai, About Us berikutnya).
 * SEBELUMNYA token warna/font di sini hardcode, sengaja disamakan manual
 * dengan Contact Us (coklat oranye kecoklatan, Playfair Display) supaya
 * kedua halaman kerasa satu sistem visual walau keduanya belum ikut
 * setting global. Sekarang decoupled dari itu: default --zsd-jr- token
 * di-declare langsung di sini (nilai identik dengan default .zsd-journal,
 * satu sumber kebenaran preset ada di includes/journal.php lewat fungsi
 * zsd_journal_daftar_preset_palet, zsd_journal_daftar_preset_aksen, dan
 * zsd_journal_daftar_preset_font) lalu --zsd-au- alias ke --zsd-jr-.
 * Preset override lewat body class zsd-about-us-palet, zsd-about-us-aksen,
 * zsd-about-us-font (bukan data attribute -- halaman ini native rewrite
 * rule + get_header/get_footer tema, sama pola dengan Shop/Product Detail,
 * lihat zsd_body_class_about_us(), includes/about-us-restyle.php).
 * Radius 15px TETAP token layout, di luar cakupan setting visual, tidak
 * disentuh.
 *
 * CATATAN: komentar-komentar baru terkait rollout ini di file ini SENGAJA
 * tidak pernah menulis tanda bintang yang langsung diikuti garis miring di
 * mana pun -- dua karakter itu berurutan menutup komentar CSS lebih awal,
 * pernah kejadian nyata di rollout Product Detail (rule custom property
 * hilang total dari CSSOM walau teks sumbernya kelihatan benar).
 */

body.zsd-halaman-about-us {
	--zsd-jr-bg: #fdfaf5;
	--zsd-jr-krem: #f2e8da;
	--zsd-jr-krem-muda: #f8f2e9;
	--zsd-jr-coklat: #6b5744;
	--zsd-jr-coklat-muda: #a9927a;
	--zsd-jr-teks: #2c2620;
	--zsd-jr-teks-muted: #8a7f6f;
	--zsd-jr-border: #e7dccb;
	--zsd-jr-aksen: var(--zsd-jr-coklat);
	--zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

	--zsd-au-coklat: var(--zsd-jr-aksen);
	--zsd-au-coklat-gelap: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black);
	--zsd-au-teks: var(--zsd-jr-teks);
	--zsd-au-teks-muted: var(--zsd-jr-teks-muted);
	--zsd-au-krem: var(--zsd-jr-krem);
	--zsd-au-putih-hangat: var(--zsd-jr-krem-muda);
	--zsd-au-border: var(--zsd-jr-border);
	--zsd-au-radius: 15px;
	--zsd-au-font-heading: var(--zsd-jr-font-heading);
}

/* ---------------------------------------------------------------------
   Preset overrides -- nilai copy verbatim dari assets/journal-publik.css
   (satu sumber kebenaran preset, includes/journal.php), supaya About Us
   konsisten persis dengan Journal, Home, Shop, dan Product Detail untuk
   preset yang sama.
--------------------------------------------------------------------- */

body.zsd-halaman-about-us.zsd-about-us-palet-terracotta-hangat {
	--zsd-jr-bg: #fdf8f3;
	--zsd-jr-krem: #f0e0d0;
	--zsd-jr-krem-muda: #f7ebdf;
	--zsd-jr-coklat: #8a4b32;
	--zsd-jr-coklat-muda: #c08b6f;
	--zsd-jr-teks: #2e2117;
	--zsd-jr-teks-muted: #9c8672;
	--zsd-jr-border: #e8d2bd;
}

body.zsd-halaman-about-us.zsd-about-us-palet-zaitun-alami {
	--zsd-jr-bg: #f9faf5;
	--zsd-jr-krem: #e8ecdc;
	--zsd-jr-krem-muda: #f1f4e9;
	--zsd-jr-coklat: #5b6b4a;
	--zsd-jr-coklat-muda: #93a17f;
	--zsd-jr-teks: #262b1f;
	--zsd-jr-teks-muted: #8b937d;
	--zsd-jr-border: #dde3cd;
}

body.zsd-halaman-about-us.zsd-about-us-palet-abu-batu-modern {
	--zsd-jr-bg: #f7f7f5;
	--zsd-jr-krem: #e9e7e2;
	--zsd-jr-krem-muda: #f2f1ed;
	--zsd-jr-coklat: #5c5850;
	--zsd-jr-coklat-muda: #948d80;
	--zsd-jr-teks: #262420;
	--zsd-jr-teks-muted: #928d84;
	--zsd-jr-border: #dedad2;
}

body.zsd-halaman-about-us.zsd-about-us-aksen-terracotta { --zsd-jr-aksen: #b3572f; }
body.zsd-halaman-about-us.zsd-about-us-aksen-hijau-sawo { --zsd-jr-aksen: #6b7a4f; }
body.zsd-halaman-about-us.zsd-about-us-aksen-biru-dusty { --zsd-jr-aksen: #4f7686; }
body.zsd-halaman-about-us.zsd-about-us-aksen-mustard    { --zsd-jr-aksen: #c08a2e; }

body.zsd-halaman-about-us.zsd-about-us-font-editorial-klasik {
	--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}

body.zsd-halaman-about-us.zsd-about-us-font-editorial-hangat {
	--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}

/* Fix yang sama seperti Cek Pesanan (assets/cek-pesanan.css) -- endpoint
   custom /about-us/ ini BUKAN Page WP beneran, jadi tema Botiga otomatis
   nyisipin <header class="page-header"><h1 class="page-title"></h1></header>
   KOSONG (tanpa judul) tepat sebelum content-wrapper, tetap makan tinggi
   walau kosong. Disembunyikan total + margin atas/bawah wrapper bawaan tema
   dinolkan, KEDUANYA di-scope cuma ke halaman ini. */
body.zsd-halaman-about-us .page-header {
	display: none;
}
body.zsd-halaman-about-us .container.content-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

.zsd-au-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 72px 24px 112px;
	color: var(--zsd-au-teks);
}

.zsd-au-wrap * {
	box-sizing: border-box;
}

.zsd-au-wrap img {
	max-width: 100%;
	display: block;
}

/* ---------------------------------------------------------------------
   HERO -- Option B LOCKED: centered text, image below, button setelah image
--------------------------------------------------------------------- */

.zsd-au-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	padding-bottom: 64px;
}

/* REVISI (MODE: TARGETED FIX -- ABOUT US CUSTOMIZATION, bagian 1): base flex
   column dipindah ke sini (dulu cuma dideklarasikan di rule khusus split-kiri/
   split-kanan) supaya SEMUA layout (termasuk 'center' default & 'full-image'
   baru) punya struktur vertikal yang sama dan konsisten membungkus tombol
   reveal "Ada Cerita di Balik Toko Ini" yang sekarang dipindah ke dalam wadah
   ini (lihat includes/about-us-restyle.php) -- tidak lagi jadi bar terpisah.
   align-items:center di sini SAMA PERSIS dgn perataan 'center' yang sudah ada
   sebelumnya (tidak mengubah tampilan layout 'center'), split-kiri/
   split-kanan override ke flex-start seperti sebelumnya. */
.zsd-au-hero-teks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.zsd-au-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-au-coklat);
}

.zsd-au-headline {
	margin: 0;
	max-width: 720px;
	font-family: var(--zsd-au-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.18;
	color: var(--zsd-au-teks);
}

.zsd-au-hero-deskripsi {
	margin: 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--zsd-au-teks-muted);
}

/* Gambar sebagai CONTENT, bukan fondasi layout (PRINSIP LOCKED) -- frame
   rasio tetap (aspect-ratio) + object-fit:cover menjaga komposisi aman
   untuk landscape/portrait/square apapun tanpa merusak proporsi tampilan,
   sama seperti "Keunggulan" Hero Option A di reference ("Gambar selalu
   rapi di dalam frame", "Tidak terpengaruh perbedaan rasio"). */
.zsd-au-hero-gambar-wrap {
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 10;
	border-radius: var(--zsd-au-radius);
	overflow: hidden;
	background: var(--zsd-au-krem);
	margin-top: 8px;
}

.zsd-au-hero-gambar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Tombol -- LABEL LOCKED (section 1 & 3), bukan seller setting. POSISI
   sekarang mengikuti komposisi Hero yang dipilih (bagian dari flex column
   `.zsd-au-hero-teks`, lihat rule base-nya di atas) -- tidak ada lagi
   margin-top manual di sini, spacing terhadap deskripsi di atasnya sudah
   ditangani `gap` milik `.zsd-au-hero-teks`. */
.zsd-au-tombol-buka {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	border-radius: var(--zsd-au-radius);
	background: var(--zsd-au-coklat);
	color: var(--zsd-au-putih-hangat);
	font-size: 15px;
	font-weight: 600;
	padding: 15px 28px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.zsd-au-tombol-buka:hover {
	background: var(--zsd-au-coklat-gelap);
}

.zsd-au-tombol-buka:focus-visible {
	outline: 2px solid var(--zsd-au-coklat);
	outline-offset: 3px;
}

.zsd-au-tombol-panah {
	transition: transform 0.2s ease;
}

.zsd-au-tombol-buka:hover .zsd-au-tombol-panah {
	transform: translateX(3px);
}

/* Tombol tetap ditampilkan setelah reveal (bukan dihilangkan) supaya tidak
   ada perubahan layout mendadak, tapi ditandai "selesai" -- cukup senyap,
   bukan style baru yang mencolok. */
.zsd-au-tombol-buka--selesai {
	opacity: 0.55;
	cursor: default;
}
.zsd-au-tombol-buka--selesai:hover {
	background: var(--zsd-au-coklat);
}
.zsd-au-tombol-buka--selesai:hover .zsd-au-tombol-panah {
	transform: none;
}

/* --- Hero layout "Split – Teks Kiri" / "Split – Teks Kanan" (BARU 2026-09-11,
   rollout Settings About Us, LOCKED spec bagian 1: "seller chooses from
   curated ZENOS compositions") -- 'center' (default, di atas) TIDAK diubah
   sama sekali, supaya tampilan toko yang sudah live tidak berubah kalau
   seller belum sengaja ganti layout-nya. --- */
.zsd-au-hero--split-kiri,
.zsd-au-hero--split-kanan {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	text-align: left;
}
.zsd-au-hero--split-kanan {
	grid-template-columns: 1fr 1fr;
}
.zsd-au-hero--split-kanan .zsd-au-hero-teks {
	order: 2;
}
.zsd-au-hero--split-kanan .zsd-au-hero-gambar-wrap {
	order: 1;
}
.zsd-au-hero--split-kiri .zsd-au-hero-teks,
.zsd-au-hero--split-kanan .zsd-au-hero-teks {
	/* display/flex-direction/gap sudah dari base rule `.zsd-au-hero-teks` di
	   atas -- di sini cuma override perataan ke kiri (bukan center). */
	align-items: flex-start;
}
.zsd-au-hero--split-kiri .zsd-au-headline,
.zsd-au-hero--split-kanan .zsd-au-headline,
.zsd-au-hero--split-kiri .zsd-au-hero-deskripsi,
.zsd-au-hero--split-kanan .zsd-au-hero-deskripsi {
	max-width: none;
}
.zsd-au-hero--split-kiri .zsd-au-hero-gambar-wrap,
.zsd-au-hero--split-kanan .zsd-au-hero-gambar-wrap {
	max-width: none;
	margin-top: 0;
	aspect-ratio: 4 / 5;
}

/* --- Layout "Full Image" (BARU -- MODE: TARGETED FIX, bagian 2): gambar jadi
   visual utama full-width, teks (kalau ada) tampil sbg caption centered di
   bawahnya -- pola SAMA PERSIS dgn `.zsd-au-cerita-item--full-image` yang
   sudah ada (reuse treatment, bukan bikin pola baru), cuma di-scope ke Hero.
   `.zsd-au-hero` dasarnya sudah flex column + align-items:center +
   text-align:center (lihat rule paling atas file ini) -- cukup dipakai apa
   adanya, gambar ditaruh di atas teks lewat `order`. --- */
.zsd-au-hero--full-image .zsd-au-hero-gambar-wrap {
	order: -1;
	width: 100%;
	max-width: none;
	aspect-ratio: 16 / 8;
	margin-top: 0;
}
.zsd-au-hero--full-image .zsd-au-hero-teks {
	/* display/flex-direction/align-items/gap sudah dari base rule
	   `.zsd-au-hero-teks` (center-aligned, sama seperti layout 'center') --
	   di sini cuma batasi lebar teks supaya tidak terlalu lebar dibanding
	   gambar full-width di atasnya. */
	max-width: 640px;
}

/* --- Tombol reveal "Ada Cerita di Balik Toko Ini" (REVISI -- MODE: TARGETED
   FIX, bagian 1): SEKARANG bagian dari `.zsd-au-hero-teks` di SEMUA layout
   (sebelumnya elemen terpisah sejajar gambar, dgn override `grid-column: 1/-1`
   yang bikin jadi bar selebar container di layout split -- override itu
   DIHAPUS, bukan lagi grid item Hero level). Tanpa override apa pun tombol
   otomatis ikut perataan teks tiap layout: center (text-align:center,
   inline-flex jadi center) dan split-kiri/split-kanan/full-image
   (align-items:flex-start atau center pada `.zsd-au-hero-teks`nya masing2). --- */

.zsd-au-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--zsd-au-radius);
	background: var(--zsd-au-coklat);
	color: var(--zsd-au-putih-hangat);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.zsd-au-hero-cta:hover {
	background: var(--zsd-au-coklat-gelap);
	color: var(--zsd-au-putih-hangat);
}

/* ---------------------------------------------------------------------
   REVEAL -- storytelling transition, BUKAN accordion/expand/modal.
   Default (tanpa JS aktif): SELALU tampil normal -- fallback aman kalau JS
   gagal load, sesuai progressive enhancement di about-us-restyle.js.
   Teknik "grid-template-rows: 0fr -> 1fr" dipakai supaya tinggi konten bisa
   dianimasikan smooth TANPA JS perlu menghitung tinggi piksel manual (yang
   rapuh terhadap perubahan responsive/konten).
--------------------------------------------------------------------- */

#zsdAboutUsKonten {
	display: grid;
	grid-template-rows: 1fr;
}

.zsd-au-wrap.zsd-au-js-aktif #zsdAboutUsKonten {
	grid-template-rows: 0fr;
	opacity: 0;
	overflow: hidden;
	transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

.zsd-au-wrap.zsd-au-js-aktif #zsdAboutUsKonten.zsd-au-konten--terbuka {
	grid-template-rows: 1fr;
	opacity: 1;
}

.zsd-au-konten-inner {
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.zsd-au-wrap.zsd-au-js-aktif #zsdAboutUsKonten {
		transition: none;
	}
	.zsd-au-tombol-panah {
		transition: none;
	}
	.zsd-au-tombol-buka {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   Section heading generik (dipakai Cerita Kami/Yang Kami Jaga/Nilai Kami)
--------------------------------------------------------------------- */

.zsd-au-section-judul {
	margin: 0 0 18px;
	font-family: var(--zsd-au-font-heading);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--zsd-au-teks);
}

.zsd-au-section-judul--tengah {
	text-align: center;
}

/* ---------------------------------------------------------------------
   CERITA KAMI -- teks + gambar pendukung
--------------------------------------------------------------------- */

/* REVISI 2026-09-11 (rollout Settings About Us, Story Builder LOCKED spec
   bagian 2): `.zsd-au-cerita` SEKARANG cuma wrapper vertikal utk BEBERAPA
   `.zsd-au-cerita-item` (dulu cuma 1 kartu teks+gambar statis) -- role
   "1 kartu 2 kolom" yang dulu ada di sini PINDAH ke `.zsd-au-cerita-item`
   (base + 4 modifier layout kurasi ZENOS: split-kiri/split-kanan/full-image/
   center), border-top per kartu (bukan cuma 1 di section) supaya tiap cerita
   kelihatan sebagai unit terpisah saat ada lebih dari 1. */
.zsd-au-cerita {
	display: flex;
	flex-direction: column;
}

.zsd-au-cerita-item {
	padding: 72px 0;
	border-top: 1px solid var(--zsd-au-border);
}

.zsd-au-cerita-teks p {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--zsd-au-teks-muted);
}

.zsd-au-cerita-teks p:last-child {
	margin-bottom: 0;
}

.zsd-au-cerita-gambar-wrap {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--zsd-au-radius);
	overflow: hidden;
	background: var(--zsd-au-krem);
}

.zsd-au-cerita-gambar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Layout "Split – Teks Kiri" / "Split – Teks Kanan" (default) --------- */
.zsd-au-cerita-item--split-kiri,
.zsd-au-cerita-item--split-kanan {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.zsd-au-cerita-item--split-kanan {
	grid-template-columns: 0.9fr 1.1fr;
}
.zsd-au-cerita-item--split-kanan .zsd-au-cerita-teks {
	order: 2;
}
.zsd-au-cerita-item--split-kanan .zsd-au-cerita-gambar-wrap {
	order: 1;
}

/* --- Layout "Full Image" -- gambar penuh, teks jadi caption di bawahnya --- */
.zsd-au-cerita-item--full-image .zsd-au-cerita-gambar-wrap {
	aspect-ratio: 16 / 8;
	margin-bottom: 24px;
}
.zsd-au-cerita-item--full-image .zsd-au-cerita-teks {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

/* --- Layout "Center – Teks Tengah" -- teks rata tengah, gambar di bawah, lebih ramping --- */
.zsd-au-cerita-item--center {
	text-align: center;
}
.zsd-au-cerita-item--center .zsd-au-cerita-teks {
	max-width: 640px;
	margin: 0 auto 32px;
}
.zsd-au-cerita-item--center .zsd-au-cerita-gambar-wrap {
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 16 / 10;
}

/* --- Tanpa gambar (opsional -- seller belum upload) -- teks jadi 1 kolom penuh --- */
.zsd-au-cerita-item--tanpa-gambar.zsd-au-cerita-item--split-kiri,
.zsd-au-cerita-item--tanpa-gambar.zsd-au-cerita-item--split-kanan {
	display: block;
}
.zsd-au-cerita-item--tanpa-gambar .zsd-au-cerita-teks {
	max-width: 720px;
}

/* ---------------------------------------------------------------------
   YANG KAMI JAGA -- 3 poin
--------------------------------------------------------------------- */

.zsd-au-jaga {
	padding: 72px 0;
	border-top: 1px solid var(--zsd-au-border);
}

.zsd-au-jaga-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.zsd-au-jaga-item {
	text-align: center;
	padding: 8px 12px;
	position: relative;
}

/* BARU 2026-09-11 -- "Nilai Kami" (tipe lain dari Value Section yang SAMA,
   lihat zsd_render_au_value_section()) pakai nomor urut 01-04, "Yang Kami
   Jaga" tidak -- preserve "existing conceptual presentation" tiap tipe
   sesuai LOCKED spec bagian 3. */
.zsd-au-value-nomor {
	display: block;
	font-family: var(--zsd-au-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--zsd-au-coklat);
	opacity: 0.6;
	margin-bottom: 6px;
}

.zsd-au-jaga-ikon {
	width: 30px;
	height: 30px;
	color: var(--zsd-au-coklat);
	margin: 0 auto 18px;
}

.zsd-au-jaga-item h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--zsd-au-teks);
}

.zsd-au-jaga-item p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--zsd-au-teks-muted);
}

/* ---------------------------------------------------------------------
   NILAI KAMI -- 4 nilai
--------------------------------------------------------------------- */

.zsd-au-nilai {
	padding: 72px 0;
	border-top: 1px solid var(--zsd-au-border);
}

.zsd-au-nilai-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.zsd-au-nilai-item {
	background: var(--zsd-au-krem);
	border-radius: var(--zsd-au-radius);
	padding: 26px 20px;
	text-align: center;
}

.zsd-au-nilai-ikon {
	width: 26px;
	height: 26px;
	color: var(--zsd-au-coklat);
	margin: 0 auto 14px;
}

.zsd-au-nilai-item h3 {
	margin: 0 0 6px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--zsd-au-teks);
}

.zsd-au-nilai-item p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--zsd-au-teks-muted);
}

/* ---------------------------------------------------------------------
   CLOSING -- teks polos, editorial, generous whitespace (Botanical
   decorative treatment DI-SKIP, lihat catatan di includes/about-us-restyle.php)
--------------------------------------------------------------------- */

.zsd-au-closing {
	padding: 88px 0 24px;
	border-top: 1px solid var(--zsd-au-border);
	text-align: center;
}

.zsd-au-closing-teks {
	max-width: 620px;
	margin: 0 auto;
	font-family: var(--zsd-au-font-heading);
	font-style: italic;
	font-size: clamp(18px, 2.2vw, 22px);
	line-height: 1.7;
	color: var(--zsd-au-teks);
}

/* =======================================================================
   TABLET (641px - 1024px) -- Hero tetap centered/image-below/button-below
   (Option B tidak punya varian side-by-side), cuma penyesuaian ukuran.
   Cerita Kami di-stack vertikal (teks dulu, baru gambar) -- ruang tablet
   tidak cukup lega untuk kolom berdampingan tanpa terasa sesak. Yang Kami
   Jaga tetap 3 kolom (masih muat), Nilai Kami turun ke 2 kolom.
   ======================================================================= */

@media (max-width: 1024px) {
	.zsd-au-wrap {
		padding: 56px 24px 88px;
	}

	.zsd-au-cerita-item--split-kiri,
	.zsd-au-cerita-item--split-kanan {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: left;
	}
	.zsd-au-cerita-item--split-kanan .zsd-au-cerita-teks,
	.zsd-au-cerita-item--split-kanan .zsd-au-cerita-gambar-wrap {
		order: initial;
	}

	.zsd-au-cerita-gambar-wrap {
		aspect-ratio: 16 / 10;
		max-width: 560px;
		margin: 0 auto;
	}

	.zsd-au-hero--split-kiri,
	.zsd-au-hero--split-kanan {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.zsd-au-hero--split-kanan .zsd-au-hero-teks,
	.zsd-au-hero--split-kanan .zsd-au-hero-gambar-wrap {
		order: initial;
	}
	.zsd-au-hero--split-kiri .zsd-au-hero-teks,
	.zsd-au-hero--split-kanan .zsd-au-hero-teks {
		align-items: center;
	}

	/* Full Image (BARU -- MODE: TARGETED FIX, bagian 2/5): rasio lebih tinggi
	   di tablet -- ruang lebih sempit dari desktop, 16:8 jadi kurang nyaman
	   dibaca & berisiko motong bagian penting gambar. */
	.zsd-au-hero--full-image .zsd-au-hero-gambar-wrap {
		aspect-ratio: 16 / 10;
	}

	.zsd-au-nilai-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =======================================================================
   MOBILE (<= 640px) -- natural vertical flow, tidak ada horizontal
   overflow/clipping, touch target nyaman (tombol full-width).
   ======================================================================= */

@media (max-width: 640px) {
	.zsd-au-wrap {
		padding: 44px 18px 72px;
	}

	.zsd-au-hero {
		gap: 18px;
		padding-bottom: 48px;
	}

	.zsd-au-hero-gambar-wrap {
		aspect-ratio: 4 / 3;
	}

	/* Full Image (BARU -- MODE: TARGETED FIX, bagian 2/5): di mobile pakai
	   rasio yang sama dengan hero gambar standar -- 16:8 terlalu pendek/gepeng
	   di layar sempit dan berisiko motong bagian penting gambar. */
	.zsd-au-hero--full-image .zsd-au-hero-gambar-wrap {
		aspect-ratio: 4 / 3;
	}

	.zsd-au-tombol-buka {
		width: 100%;
		justify-content: center;
		padding: 16px 24px;
	}

	.zsd-au-cerita,
	.zsd-au-jaga,
	.zsd-au-nilai {
		padding: 48px 0;
	}

	.zsd-au-jaga-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.zsd-au-nilai-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.zsd-au-closing {
		padding: 56px 0 12px;
	}
}