/* ==========================================================================
   Abi Yudi Official — Theme styles
   Palette: hijau muda (Syafiq-style), putih, gold
   ========================================================================== */

:root {
	--ayo-green: #5dae3b;
	--ayo-green-light: #8ccb5e;
	--ayo-green-soft: #eef7e6;
	--ayo-green-dark: #1e6b30;
	--ayo-green-deep: #0f4a22;
	--ayo-gold: #cfa33a;
	--ayo-gold-light: #f3d67e;
	--ayo-gold-dark: #a67b1b;
	--ayo-gold-grad: linear-gradient(180deg, #f6df90 0%, #d9ac43 55%, #b4851f 100%);
	--ayo-cream: #fbf8ee;
	--ayo-ink: #1d2b20;
	--ayo-muted: #66756a;
	--ayo-border: #e3ebdd;
	--ayo-radius: 16px;
	--ayo-shadow: 0 10px 30px -12px rgba(15, 74, 34, .25);

	--font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Playfair Display", Georgia, serif;
	--font-arabic: "Amiri", serif;
	--container: 1200px;
	--header-h: 84px;
	--dots: radial-gradient(circle, rgba(255, 255, 255, .16) 2px, transparent 2.6px) 0 0 / 22px 22px;
	--geo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23f3d67e' stroke-width='1.3'%3E%3Cpolygon points='44.0,18.0 51.3,26.4 62.4,25.6 61.6,36.7 70.0,44.0 61.6,51.3 62.4,62.4 51.3,61.6 44.0,70.0 36.7,61.6 25.6,62.4 26.4,51.3 18.0,44.0 26.4,36.7 25.6,25.6 36.7,26.4'/%3E%3Crect x='26' y='26' width='36' height='36' transform='rotate(45 44 44)'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='88' cy='0' r='8'/%3E%3Ccircle cx='0' cy='88' r='8'/%3E%3Ccircle cx='88' cy='88' r='8'/%3E%3C/g%3E%3C/svg%3E");
	--rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23f3d67e'%3E%3Cpolygon stroke-width='2' opacity='0.55' points='200.0,10.0 253.8,70.1 334.4,65.6 329.9,146.2 390.0,200.0 329.9,253.8 334.4,334.4 253.8,329.9 200.0,390.0 146.2,329.9 65.6,334.4 70.1,253.8 10.0,200.0 70.1,146.2 65.6,65.6 146.2,70.1'/%3E%3Cpolygon stroke-width='1.5' opacity='0.45' points='200.0,50.0 242.5,97.4 306.1,93.9 302.6,157.5 350.0,200.0 302.6,242.5 306.1,306.1 242.5,302.6 200.0,350.0 157.5,302.6 93.9,306.1 97.4,242.5 50.0,200.0 97.4,157.5 93.9,93.9 157.5,97.4'/%3E%3Cpolygon stroke-width='1.5' opacity='0.4' points='200.0,90.0 231.2,124.8 277.8,122.2 275.2,168.8 310.0,200.0 275.2,231.2 277.8,277.8 231.2,275.2 200.0,310.0 168.8,275.2 122.2,277.8 124.8,231.2 90.0,200.0 124.8,168.8 122.2,122.2 168.8,124.8'/%3E%3Ccircle cx='200' cy='200' r='70' stroke-width='1.5' opacity='.5'/%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='1' stroke-dasharray='2 8' opacity='.6'/%3E%3Cpolygon fill='%23f3d67e' stroke='none' opacity='.22' points='200.0,154.0 213.0,168.6 232.5,167.5 231.4,187.0 246.0,200.0 231.4,213.0 232.5,232.5 213.0,231.4 200.0,246.0 187.0,231.4 167.5,232.5 168.6,213.0 154.0,200.0 168.6,187.0 167.5,167.5 187.0,168.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--ayo-ink);
	background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--ayo-green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ayo-gold-dark); }
h1, h2, h3, h4 { line-height: 1.25; color: var(--ayo-ink); margin: 0 0 .5em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ayo-gold); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: #fff; padding: .6em 1em; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }
.container--mid { max-width: 980px; }
.gold {
	background: var(--ayo-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: .5em; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ayo-gold-dark); margin-bottom: .6em;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ayo-gold); border-radius: 2px; }
.eyebrow--light { color: var(--ayo-gold-light); }
.eyebrow--light::before { background: var(--ayo-gold-light); }
.chip { display: inline-block; padding: .2em .75em; border-radius: 999px; background: var(--ayo-green-soft); color: var(--ayo-green-dark); font-size: .74rem; font-weight: 600; }
.ayo-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(4px); }
.ayo-btn--ghost:hover { background: #fff; color: var(--ayo-green-dark) !important; }

/* ---------- Topbar ---------- */
.topbar { background: var(--ayo-green-deep); color: rgba(255, 255, 255, .88); font-size: .82rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1em; min-height: 40px; }
.topbar__greet { margin: 0; }
.topbar__greet strong { color: var(--ayo-gold-light); font-weight: 600; }
.topbar__arabic { font-family: var(--font-arabic); font-size: 1.15em; color: var(--ayo-gold-light); margin-right: .4em; }
.topbar__right { display: flex; align-items: center; gap: 1.2em; }
.topbar__wa { color: #fff; text-decoration: none; font-weight: 500; white-space: nowrap; }
.topbar__wa i { color: #4ee07f; }
.topbar__wa:hover { color: var(--ayo-gold-light); }

/* ---------- Socials ---------- */
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: .45em; flex-wrap: wrap; }
.socials__item { display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; transition: .15s; }
.socials--top .socials__item { width: 28px; height: 28px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .1); font-size: .8rem; }
.socials--top .socials__item:hover { background: var(--ayo-gold); color: var(--ayo-green-deep); }
.socials--hero .socials__item, .socials--footer .socials__item, .socials--drawer .socials__item { width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; color: #fff; }
.socials__item--instagram { --brand: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.socials__item--tiktok { --brand: #111; }
.socials__item--youtube { --brand: #ff0000; }
.socials__item--facebook { --brand: #1877f2; }
.socials__item--wa_channel { --brand: #25d366; }
.socials--hero .socials__item { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.socials--hero .socials__item:hover, .socials--footer .socials__item:hover, .socials--drawer .socials__item { background: var(--brand); border-color: transparent; transform: translateY(-2px); }
.socials--footer .socials__item { background: rgba(255, 255, 255, .08); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ayo-border); transition: box-shadow .2s; }
.admin-bar .site-header { top: 32px; }
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(15, 74, 34, .45); }
.site-header__inner { display: flex; align-items: center; gap: 1.5em; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .7em; text-decoration: none; color: var(--ayo-ink); flex: none; }
.brand__img { height: 56px; width: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .1)); }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; color: var(--ayo-green-dark); letter-spacing: .01em; }
.brand__name em { font-style: normal; color: var(--ayo-gold-dark); }
.brand__tag { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ayo-muted); font-weight: 500; }

.main-nav { margin-left: auto; }
.main-nav__head, .main-nav__account, .main-nav__social { display: none; }
.main-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25em; }
.main-nav .menu > li { position: relative; display: flex; align-items: center; }
.main-nav .menu > li > a {
	display: block; padding: .6em .95em; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem;
	color: var(--ayo-ink); transition: .15s;
}
.main-nav .menu > li > a:hover, .main-nav .menu > li.current-menu-item > a, .main-nav .menu > li.current-menu-ancestor > a, .main-nav .menu > li.current_page_parent > a {
	color: var(--ayo-green-dark); background: var(--ayo-green-soft);
}
.main-nav .menu > li.menu-item-has-children > a { padding-right: 2.1em; }
.nav-caret { position: absolute; right: .55em; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ayo-muted); font-size: .65rem; cursor: pointer; padding: .3em; pointer-events: none; }
.main-nav .sub-menu {
	list-style: none; margin: 0; padding: .7em; position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
	width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: .25em; background: #fff; border-radius: 18px;
	border: 1px solid var(--ayo-border); box-shadow: 0 24px 60px -20px rgba(15, 74, 34, .35); opacity: 0; visibility: hidden; transition: .18s;
}
.main-nav .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.main-nav .menu > li:hover > .sub-menu, .main-nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.main-nav .sub-menu a { display: flex; align-items: center; gap: .7em; padding: .6em .75em; border-radius: 12px; text-decoration: none; color: var(--ayo-ink); font-size: .9rem; font-weight: 500; line-height: 1.3; }
.main-nav .sub-menu a i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ayo-green-soft); color: var(--ayo-green-dark); font-size: .9rem; transition: .15s; }
.main-nav .sub-menu a:hover { background: var(--ayo-cream); color: var(--ayo-green-dark); }
.main-nav .sub-menu a:hover i { background: var(--ayo-gold-grad); color: var(--ayo-green-deep); }

.site-header__actions { display: flex; align-items: center; gap: .8em; margin-left: auto; }
.header-login { font-weight: 600; text-decoration: none; color: var(--ayo-green-dark); font-size: .95rem; }
.header-account { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; padding: .3em .9em .3em .3em; border-radius: 999px; background: var(--ayo-green-soft); color: var(--ayo-green-dark); }
.header-account__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); }
.header-account__text { display: grid; line-height: 1.1; font-weight: 600; font-size: .88rem; }
.header-account__text small { font-weight: 500; font-size: .7rem; color: var(--ayo-muted); }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--ayo-border); background: #fff; cursor: pointer; padding: 0 11px; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ayo-green-dark); }
.nav-toggle span:nth-child(2) { width: 70%; }
.nav-overlay { position: fixed; inset: 0; background: rgba(10, 40, 20, .5); z-index: 950; }
.nav-open .site-header { z-index: 1001; }
.nav-close { border: 0; background: var(--ayo-green-soft); color: var(--ayo-green-dark); width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
	position: relative; color: #fff; overflow: hidden; padding: 72px 0 120px;
	background: linear-gradient(120deg, #2f8a35 0%, #5dae3b 55%, #8ccb5e 100%);
}
.hero__pattern { position: absolute; inset: 0; background: var(--geo) repeat; opacity: .16; mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 55%, #000 100%); }
.hero::before { content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 214, 126, .35), transparent 65%); }
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3em; align-items: center; }
.hero__badge { display: inline-flex; gap: .5em; align-items: center; padding: .45em 1em; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-size: .82rem; font-weight: 600; }
.hero__badge i { color: var(--ayo-gold-light); }
.hero__title {
	font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.12; margin: .45em 0 .4em;
	background: var(--ayo-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 3px 0 rgba(15, 74, 34, .45)) drop-shadow(0 10px 18px rgba(15, 74, 34, .25));
}
.hero__sub { font-size: 1.12rem; max-width: 560px; opacity: .96; font-weight: 500; }
.hero__actions { display: flex; gap: .8em; flex-wrap: wrap; margin: 1.8em 0 2em; }
.hero__actions .ayo-btn { padding: .95em 1.6em; font-size: 1rem; }
.hero__follow { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; font-size: .85rem; font-weight: 600; opacity: .95; }
.hero__visual { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero__poster { position: relative; display: block; width: min(380px, 100%); border-radius: 22px; overflow: hidden; transform: rotate(2.5deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 0 0 8px rgba(255, 255, 255, .18); transition: transform .3s; }
.hero__poster:hover { transform: rotate(0) scale(1.02); }
.hero__poster img { display: block; width: 100%; }
.hero__poster-tag { position: absolute; left: 14px; top: 14px; padding: .45em .9em; border-radius: 999px; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-weight: 700; font-size: .78rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.hero__emblem { width: min(400px, 100%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 12px rgba(255, 255, 255, .18), 0 30px 60px -20px rgba(0, 0, 0, .4); }
.hero__emblem img { width: 52%; }
/* Foto tokoh: berdiri di atas lingkaran gold, bagian bawah tertutup gelombang hero */
.hero--photo .hero__visual { align-self: end; min-height: 0; margin-bottom: -120px; }
.hero__photo { position: relative; width: min(450px, 100%); margin: 0 auto; }
.hero__photo::before { content: ""; position: absolute; left: 50%; bottom: 14%; width: 96%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--ayo-gold-grad); box-shadow: 0 0 0 14px rgba(255, 255, 255, .16), 0 0 0 30px rgba(255, 255, 255, .07), 0 30px 60px -20px rgba(0, 0, 0, .35); }
.hero__photo img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(15, 74, 34, .35)); }
.hero--photo .hero__float--a { top: auto; bottom: 22%; left: -56px; }
.hero--photo .hero__float--b { bottom: 10%; right: -24px; }
.hero__float { position: absolute; display: flex; gap: .7em; align-items: center; padding: .7em 1em; border-radius: 16px; background: #fff; color: var(--ayo-ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); font-size: .8rem; line-height: 1.3; animation: floaty 5s ease-in-out infinite; }
.hero__float i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-size: 1rem; }
.hero__float strong { display: block; color: var(--ayo-green-dark); font-size: .9rem; }
.hero__float span { color: var(--ayo-muted); }
.hero__float--a { left: -10px; top: 18%; }
.hero__float--b { right: -6px; bottom: 12%; animation-delay: -2.5s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5em; margin-bottom: 2.2em; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; color: var(--ayo-green-dark); margin: 0; }
.section-sub { color: var(--ayo-muted); margin: .5em 0 0; max-width: 620px; }
.section-sub i { color: var(--ayo-gold); }
.link-more { display: inline-flex; gap: .5em; align-items: center; font-weight: 600; text-decoration: none; color: var(--ayo-green-dark); padding: .6em 1.1em; border-radius: 999px; border: 1.5px solid var(--ayo-border); transition: .15s; white-space: nowrap; }
.link-more:hover { border-color: var(--ayo-gold); color: var(--ayo-gold-dark); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; }

/* Featured kajian */
.section--featured { padding-top: 40px; }
.feature-event {
	display: grid; grid-template-columns: 380px 1fr; gap: 0; border-radius: 26px; overflow: hidden; background: #fff;
	border: 1px solid #efe1b5; box-shadow: 0 30px 60px -30px rgba(15, 74, 34, .35);
}
.feature-event--noposter { grid-template-columns: 1fr; }
.feature-event--noposter .feature-event__info { grid-template-columns: repeat(4, 1fr); }
.feature-event__poster { display: block; background: var(--ayo-green-soft); }
.feature-event__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feature-event__body { padding: 2.4em 2.6em; background: linear-gradient(180deg, #fff, var(--ayo-cream)); position: relative; }
.feature-event__body::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 18px solid rgba(207, 163, 58, .1); }
.feature-event__label { display: inline-flex; gap: .5em; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ayo-green-dark); background: var(--ayo-green-soft); padding: .4em .9em; border-radius: 999px; }
.feature-event__theme { margin: 1.2em 0 0; display: inline-block; padding: .2em 1.2em; border-radius: 999px; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-family: var(--font-display); font-weight: 700; }
.feature-event__title { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 800; line-height: 1.05; margin: .25em 0 .2em; color: var(--ayo-green-dark); }
.feature-event__sub { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ayo-gold-dark); margin: 0 0 .6em; }
.feature-event__by { color: var(--ayo-muted); font-size: .95rem; }
.feature-event__by i { color: var(--ayo-gold); }
.feature-event__info { list-style: none; padding: 0; margin: 1.4em 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.4em; }
.feature-event__info li { display: flex; gap: .8em; align-items: flex-start; }
.feature-event__info i { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ayo-green-dark); color: #fff; }
.feature-event__info strong { display: block; color: var(--ayo-ink); line-height: 1.3; }
.feature-event__info span { font-size: .84rem; color: var(--ayo-muted); }
.feature-event__done { padding: .9em 1.1em; border-radius: 14px; background: var(--ayo-green-soft); color: var(--ayo-green-dark); font-size: .92rem; }
.feature-event__actions { display: flex; gap: .7em; flex-wrap: wrap; margin-top: 1.2em; position: relative; z-index: 1; }
.countdown { display: flex; gap: .7em; margin: .4em 0 .6em; }
.countdown div { min-width: 74px; text-align: center; padding: .6em .4em; border-radius: 14px; background: var(--ayo-green-dark); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15); }
.countdown b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--ayo-gold-light); }
.countdown span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.upcoming-list { display: grid; gap: .8em; margin-top: 1.6em; }

/* About */
.section--about { background: var(--ayo-cream); position: relative; overflow: hidden; }
.section--about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(207, 163, 58, .14) 1.6px, transparent 2px) 0 0 / 24px 24px; pointer-events: none; }
.about { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5em; align-items: center; }
.about__ring { width: min(380px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #fff; position: relative; box-shadow: 0 30px 60px -30px rgba(15, 74, 34, .4); }
.about__ring::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid transparent; background: var(--ayo-gold-grad) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.about__ring::after { content: ""; position: absolute; inset: -34px; border-radius: 50%; border: 2px dashed rgba(93, 174, 59, .45); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.about__ring img { width: 66%; }
.about__lead { font-size: 1.08rem; color: #3b4a3f; margin: 1em 0 1.6em; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.pillars div { text-align: center; display: grid; gap: .6em; justify-items: center; font-size: .86rem; font-weight: 600; color: var(--ayo-green-dark); line-height: 1.3; }
.pillars i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; color: var(--ayo-green-dark); background: radial-gradient(circle at 30% 30%, #fff, #f6ebc8); border: 3px solid var(--ayo-gold); box-shadow: 0 8px 18px -10px rgba(166, 123, 27, .8); }

/* Konsultasi section */
.section--konsul { background: linear-gradient(180deg, #fff 0%, var(--ayo-green-soft) 100%); }

/* Article cards */
.card-post { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--ayo-border); transition: transform .2s, box-shadow .2s; }
.card-post:hover { transform: translateY(-4px); box-shadow: var(--ayo-shadow); }
.card-post__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ayo-green-soft); }
.card-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card-post:hover .card-post__media img { transform: scale(1.04); }
.card-post__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #0c3f1d, #1e6b30); }
.card-post__placeholder img { width: 30% !important; height: auto !important; object-fit: contain !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); transform: none !important; }
.tag-exclusive { position: absolute; top: 12px; left: 12px; display: inline-flex; gap: .4em; align-items: center; padding: .35em .8em; border-radius: 999px; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-size: .74rem; font-weight: 700; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); }
.tag-exclusive--static { position: static; box-shadow: none; }
.card-post__body { padding: 1.3em 1.4em 1.5em; display: flex; flex-direction: column; flex: 1; }
.card-post__meta { display: flex; gap: .7em; align-items: center; font-size: .8rem; color: var(--ayo-muted); margin-bottom: .6em; flex-wrap: wrap; }
.card-post__title { font-size: 1.15rem; margin: 0 0 .5em; line-height: 1.35; }
.card-post__title a { color: var(--ayo-ink); text-decoration: none; }
.card-post__title a:hover { color: var(--ayo-green-dark); }
.card-post__excerpt { color: var(--ayo-muted); font-size: .92rem; flex: 1; }
.card-post__more { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--ayo-green-dark); }
.is-exclusive .card-post__more { color: var(--ayo-gold-dark); }

/* Video cards */
.card-video { display: grid; gap: .8em; }
.card-video__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.card-video__media img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: .3s; }
.card-video__media:hover img { opacity: .75; transform: scale(1.04); }
.card-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-size: 1.3rem; box-shadow: 0 0 0 10px rgba(255, 255, 255, .25); transition: .2s; }
.card-video__play i { margin-left: 4px; }
.card-video__media:hover .card-video__play { transform: translate(-50%, -50%) scale(1.08); }
.card-video__plat { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.card-video--youtube .card-video__plat { background: #ff0000; }
.card-video__dur { position: absolute; right: 10px; bottom: 10px; padding: .15em .55em; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; }
.card-video__title { font-size: 1.02rem; margin: 0; line-height: 1.4; }
.card-video__title a { color: var(--ayo-ink); text-decoration: none; }
.card-video__title a:hover { color: var(--ayo-green-dark); }
.channel-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.channel-card { display: flex; align-items: center; gap: 1em; padding: 1.5em; border-radius: 20px; color: #fff !important; text-decoration: none; transition: transform .2s; position: relative; overflow: hidden; }
.channel-card:hover { transform: translateY(-4px); }
.channel-card > i { font-size: 2.4rem; }
.channel-card strong { display: block; font-size: 1.15rem; }
.channel-card span { font-size: .85rem; opacity: .9; }
.channel-card em { margin-left: auto; font-style: normal; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.channel-card--youtube { background: linear-gradient(135deg, #c4302b, #ff4e45); }
.channel-card--tiktok { background: linear-gradient(135deg, #111, #2b2b2b); box-shadow: inset 4px 0 0 #25f4ee, inset -4px 0 0 #fe2c55; }
.channel-card--instagram { background: linear-gradient(45deg, #f9a43b, #ee2a7b, #6228d7); }
.video-channels { display: flex; gap: .7em; flex-wrap: wrap; margin-bottom: 2em; }
.vc { display: inline-flex; gap: .5em; align-items: center; padding: .6em 1.1em; border-radius: 999px; color: #fff !important; text-decoration: none; font-weight: 600; font-size: .88rem; }
.vc--youtube { background: #ff0000; } .vc--tiktok { background: #111; } .vc--facebook { background: #1877f2; } .vc--instagram { background: linear-gradient(45deg, #f9a43b, #ee2a7b, #6228d7); }
.video-player { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; margin-bottom: 2em; box-shadow: var(--ayo-shadow); }
.video-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-player__ext { position: relative; display: grid; place-items: center; height: 100%; color: #fff; text-decoration: none; }
.video-player__ext img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.video-player__ext span { position: relative; padding: .8em 1.4em; border-radius: 999px; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-weight: 700; }

/* Lightbox */
.video-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; }
.video-lightbox[hidden] { display: none; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.video-lightbox__box { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; }
.video-lightbox__frame, .video-lightbox__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }
.video-lightbox__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; font-size: 1.1rem; }

/* Hobi */
.section--hobi { background: #fff; position: relative; overflow: hidden; }
.hobi { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4em; align-items: center; }
.hobi__photo { position: relative; margin: 0; max-width: 440px; justify-self: center; width: 100%; }
.hobi__photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 28px; background: var(--ayo-gold-grad); opacity: .9; }
.hobi__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -28px rgba(15, 74, 34, .55); }
.hobi__photo figcaption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; gap: .5em; align-items: center; padding: .55em 1.1em; border-radius: 999px; background: rgba(12, 63, 29, .9); color: #fff; font-weight: 600; font-size: .86rem; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.hobi__photo figcaption i { color: var(--ayo-gold-light); }
.hobi__list { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; gap: .9em; }
.hobi__list li { display: flex; gap: 1.1em; align-items: center; padding: 1em 1.2em; border-radius: 18px; background: var(--ayo-green-soft); border: 1px solid #dcefcd; transition: .2s; }
.hobi__list li:hover { transform: translateX(4px); border-color: var(--ayo-gold); background: #fff; box-shadow: var(--ayo-shadow); }
.hobi__icon { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; position: relative; background: linear-gradient(135deg, var(--ayo-green-dark), #2f8a35); color: #fff; font-size: 1.45rem; box-shadow: 0 10px 20px -12px rgba(15, 74, 34, .8); }
.hobi__icon i + i { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); border: 2px solid #fff; }
.hobi__list li > div > strong { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--ayo-green-dark); }
.hobi__list li > div > span { display: block; font-size: .9rem; color: var(--ayo-muted); line-height: 1.5; margin-top: .15em; }
.hobi__quote { position: relative; margin: 1.6em 0 0; padding: 1.1em 1.3em 1.1em 3.4em; border-left: 4px solid var(--ayo-gold); border-radius: 0 16px 16px 0; background: var(--ayo-cream); }
.hobi__quote i { position: absolute; left: 1.1em; top: 1.05em; color: var(--ayo-gold); font-size: 1.2rem; }
.hobi__quote p { margin: 0; font-style: italic; color: #3b4a3f; font-size: 1rem; }
.hobi__quote cite { display: block; margin-top: .4em; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--ayo-gold-dark); }

/* Perkuliahan */
.kuliah-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin-bottom: 2.4em; }
.kuliah-hub__card { position: relative; display: grid; gap: .35em; padding: 1.6em 1.6em 1.4em; border-radius: 22px; text-decoration: none; color: #fff; overflow: hidden; background: linear-gradient(130deg, #0c3f1d, #1e6b30); box-shadow: 0 20px 40px -24px rgba(15, 74, 34, .8); transition: .2s; }
.kuliah-hub__card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; background: var(--rosette) center / contain no-repeat; opacity: .35; }
.kuliah-hub__card:hover { transform: translateY(-3px); color: #fff; }
.kuliah-hub__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-size: 1.4rem; margin-bottom: .5em; }
.kuliah-hub__card strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--ayo-gold-light); }
.kuliah-hub__card span { opacity: .9; font-size: .95rem; }
.kuliah-hub__card em { font-style: normal; font-weight: 600; font-size: .88rem; margin-top: .6em; color: #fff; }
.kuliah-hub__title { font-family: var(--font-display); color: var(--ayo-green-dark); font-size: 1.5rem; margin: 0 0 .8em; }

/* Membership CTA */
.member-cta {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5em; align-items: center; padding: 3em; border-radius: 30px; color: #fff; position: relative; overflow: hidden;
	background: radial-gradient(90% 120% at 100% 0%, rgba(140, 203, 94, .28) 0%, transparent 60%), linear-gradient(130deg, #0c3f1d 0%, #155a28 50%, #1e6b30 100%);
	box-shadow: 0 30px 60px -30px rgba(15, 74, 34, .7); border: 2px solid rgba(243, 214, 126, .5);
}
.member-cta::before { content: ""; position: absolute; inset: 0; background: var(--geo) repeat; opacity: .12; -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 60%); pointer-events: none; }
.member-cta::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; background: var(--rosette) center / contain no-repeat; opacity: .55; pointer-events: none; }
.member-cta > * { position: relative; z-index: 1; }
.member-cta h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.member-cta p { opacity: .92; font-size: 1.05rem; }
.member-steps { list-style: none; padding: 0; margin: 1.4em 0 1.8em; display: flex; gap: .6em; flex-wrap: wrap; }
.member-steps li { display: flex; align-items: center; gap: .6em; padding: .5em 1em .5em .5em; border-radius: 999px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .1); font-size: .88rem; font-weight: 500; }
.member-steps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); }
.member-cta__benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.member-cta__benefits li { padding: 1.2em; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(243, 214, 126, .22); display: grid; gap: .5em; }
.member-cta__benefits i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ayo-gold-grad); color: var(--ayo-green-deep); font-size: 1.1rem; }
.member-cta__benefits strong { display: block; color: var(--ayo-gold-light); }
.member-cta__benefits span { font-size: .84rem; opacity: .9; }

/* Social grid */
.section--social { padding-top: 0; }
.social-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; }
.social-card { display: grid; justify-items: center; gap: .3em; padding: 1.6em 1em; border-radius: 20px; background: #fff; border: 1px solid var(--ayo-border); text-decoration: none; color: var(--ayo-ink); transition: .2s; text-align: center; }
.social-card i { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; margin-bottom: .4em; background: var(--brand); }
.social-card span { font-size: .8rem; color: var(--ayo-muted); word-break: break-word; }
.social-card:hover { transform: translateY(-4px); box-shadow: var(--ayo-shadow); border-color: transparent; color: var(--ayo-ink); }
.social-card--instagram { --brand: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.social-card--tiktok { --brand: #111; }
.social-card--youtube { --brand: #ff0000; }
.social-card--facebook { --brand: #1877f2; }
.social-card--wa_channel { --brand: #25d366; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: 60px 0 68px; background: radial-gradient(120% 140% at 100% 0%, rgba(140, 203, 94, .35) 0%, transparent 55%), linear-gradient(118deg, #0c3f1d 0%, #155a28 45%, #1e6b30 100%); border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #b4851f, #f6df90 50%, #b4851f) 1; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--geo) repeat; opacity: .14; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 80%); mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 80%); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin: .2em 0 .3em; max-width: 820px; background: var(--ayo-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.page-hero__sub { max-width: 680px; font-size: 1.05rem; line-height: 1.7; margin: 0; color: rgba(255, 255, 255, .92); }
.page-hero__sub i { color: var(--ayo-gold-light); }
.page-hero__ornament { position: absolute; right: -40px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%); background: var(--rosette) center / contain no-repeat; pointer-events: none; }
.page-hero .eyebrow { margin-top: .6em; }
.crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .82rem; margin-bottom: .9em; padding: .45em 1em; border-radius: 999px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .12); }
.crumbs .fa-house { font-size: .9em; opacity: 1; color: var(--ayo-gold-light); }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { color: var(--ayo-gold-light); }
.crumbs > i { font-size: .6rem; opacity: .7; }
.crumbs span { color: var(--ayo-gold-light); }
.page-hero--article .page-hero__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: .5em 1.4em; font-size: .9rem; align-items: center; }
.article-meta img { width: 28px; height: 28px; box-sizing: border-box; object-fit: contain; vertical-align: middle; background: #fff; border-radius: 50%; padding: 4px; }
.section--page { padding: 56px 0 80px; }
.section--article { padding: 48px 0 40px; }
.section--related { background: var(--ayo-cream); }

/* ---------- Entry content ---------- */
.entry-content { font-size: 1.05rem; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content:not(.entry-content--app) h2 { font-family: var(--font-display); color: var(--ayo-green-dark); font-size: 1.7rem; margin-top: 1.6em; }
.entry-content:not(.entry-content--app) h3 { color: var(--ayo-green-dark); margin-top: 1.4em; }
.entry-content:not(.entry-content--app) blockquote { margin: 1.5em 0; padding: 1.2em 1.5em; border-left: 5px solid var(--ayo-gold); background: var(--ayo-cream); border-radius: 0 16px 16px 0; font-style: italic; }
.entry-content:not(.entry-content--app) ul li::marker { color: var(--ayo-green); }
.entry-content:not(.entry-content--app) img { border-radius: 14px; }
.entry-content--app { font-size: 1rem; }
.entry-content--app > * + * { margin-top: 0; }
.article-cover { margin: 0 0 2em; border-radius: 22px; overflow: hidden; box-shadow: var(--ayo-shadow); }
.article-cover img { display: block; width: 100%; }
.share { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; margin: 2.2em 0 0; padding-top: 1.4em; border-top: 1px solid var(--ayo-border); font-weight: 600; font-size: .9rem; }
.share a, .share button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; transition: transform .15s; }
.share a:hover, .share button:hover { transform: translateY(-2px); color: #fff; }
.share__wa { background: #25d366; } .share__fb { background: #1877f2; } .share__tg { background: #229ed9; } .share__copy { background: var(--ayo-green-dark); }
.share__copy.is-copied { background: var(--ayo-gold); }
.author-box { display: flex; gap: 1.2em; align-items: center; margin-top: 2em; padding: 1.5em; border-radius: 20px; background: var(--ayo-green-soft); }
.author-box img { width: 72px; height: 72px; flex: none; box-sizing: border-box; object-fit: contain; background: #fff; border-radius: 50%; padding: 10px; box-shadow: 0 6px 16px -8px rgba(15, 74, 34, .35); }
.author-box strong { color: var(--ayo-green-dark); font-size: 1.1rem; }
.author-box p { margin: .2em 0 .3em; color: var(--ayo-muted); font-size: .92rem; }
.author-box a { font-weight: 600; text-decoration: none; }

/* Filter chips & pagination */
.filter-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 2em; }
.filter-chips a { padding: .5em 1.1em; border-radius: 999px; border: 1.5px solid var(--ayo-border); text-decoration: none; color: var(--ayo-ink); font-weight: 500; font-size: .9rem; }
.filter-chips a:hover { border-color: var(--ayo-green); }
.filter-chips a.is-active { background: var(--ayo-green-dark); border-color: var(--ayo-green-dark); color: #fff; }
.pagination { margin-top: 2.5em; }
.pagination ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: .4em; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 .8em; border-radius: 12px; display: grid; place-items: center; text-decoration: none; border: 1.5px solid var(--ayo-border); color: var(--ayo-ink); font-weight: 600; }
.pagination .current { background: var(--ayo-green-dark); border-color: var(--ayo-green-dark); color: #fff; }

/* Materi */
.materi-list { display: grid; gap: 1em; }
.materi-card { display: grid; grid-template-columns: 76px 1fr auto; gap: 1.2em; align-items: center; padding: 1.1em 1.3em; border-radius: 18px; background: #fff; border: 1px solid var(--ayo-border); transition: .2s; }
.materi-card:hover { box-shadow: var(--ayo-shadow); border-color: #cfe6bd; }
.materi-card__icon { width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: .1em; background: var(--ayo-green-soft); color: var(--ayo-green-dark); }
.materi-card__icon i { font-size: 1.8rem; }
.materi-card__icon span { font-size: .66rem; font-weight: 700; letter-spacing: .06em; }
.is-exclusive .materi-card__icon { background: #fdf3d6; color: var(--ayo-gold-dark); }
.materi-card.has-thumb { grid-template-columns: 176px 1fr auto; padding: .9em 1.3em .9em .9em; }
.materi-card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--ayo-green-soft); }
.materi-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.materi-card:hover .materi-card__thumb img { transform: scale(1.05); }
.materi-card__ext { position: absolute; left: 8px; bottom: 8px; display: inline-flex; gap: .35em; align-items: center; padding: .25em .6em; border-radius: 999px; background: rgba(15, 74, 34, .88); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .05em; }
.is-exclusive .materi-card__ext { background: var(--ayo-gold-grad); color: var(--ayo-green-deep); }
.materi-card__meta { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--ayo-muted); }
.materi-card h3 { font-size: 1.1rem; margin: .3em 0 .2em; }
.materi-card h3 a { color: var(--ayo-ink); text-decoration: none; }
.materi-card p { margin: 0; color: var(--ayo-muted); font-size: .9rem; }
.download-box { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; padding: 1.3em 1.5em; border-radius: 18px; background: var(--ayo-cream); border: 1px solid #efe1b5; margin-bottom: 2em; }
.download-box > i { font-size: 2rem; color: var(--ayo-gold-dark); }
.download-box div { flex: 1; display: grid; }
.download-box span { font-size: .85rem; color: var(--ayo-muted); }

/* Event detail */
.event-detail { display: grid; grid-template-columns: 420px 1fr; gap: 2.5em; align-items: start; }
.event-detail__poster { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--ayo-shadow); position: sticky; top: calc(var(--header-h) + 20px); }
.event-detail__poster img { display: block; width: 100%; }
.event-detail__list { padding: 1.4em !important; border-radius: 18px; background: var(--ayo-green-soft); }
.event-detail__list i { background: #fff !important; }
.event-detail__content { margin-top: 1.8em; }

/* Search + 404 */
.search-big { display: flex; gap: .6em; align-items: center; padding: .4em .4em .4em 1.2em; border-radius: 999px; border: 1.5px solid var(--ayo-border); margin-bottom: 2em; max-width: 640px; }
.search-big i { color: var(--ayo-muted); }
.search-big input { flex: 1; border: 0; font: inherit; padding: .6em 0; outline: none; min-width: 0; }
.notfound__inner { text-align: center; max-width: 620px; }
.notfound__code { font-family: var(--font-display); font-size: 7rem; font-weight: 800; line-height: 1; background: var(--ayo-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Footer ---------- */
.footer-cta { background: var(--ayo-green-soft); padding: 34px 0; border-top: 1px solid var(--ayo-border); }
.footer-cta__inner { display: flex; align-items: center; gap: 1.4em; flex-wrap: wrap; }
.footer-cta__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #25d366; color: #fff; font-size: 2rem; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .8); }
.footer-cta__text { flex: 1; min-width: 240px; }
.footer-cta__text h2 { font-size: 1.35rem; margin: 0 0 .2em; color: var(--ayo-green-dark); }
.footer-cta__text p { margin: 0; color: var(--ayo-muted); }
.site-footer { background: var(--ayo-green-deep); color: rgba(255, 255, 255, .82); position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ayo-gold-grad); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 2.5em; padding-top: 64px; padding-bottom: 48px; }
.site-footer h3 { color: var(--ayo-gold-light); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.2em; }
.site-footer ul:not(.socials) { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { color: var(--ayo-gold-light); }
.site-footer__col li a { font-size: .92rem; }
.site-footer__about p { margin: 1.2em 0 1.4em; font-size: .92rem; }
.brand--footer .brand__img { height: 64px; filter: drop-shadow(0 0 1px rgba(255,255,255,.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__name em { color: var(--ayo-gold-light); }
.brand--footer .brand__tag { color: rgba(255, 255, 255, .6); }
.contact-list li { display: flex; gap: .8em; align-items: flex-start; }
.contact-list i { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--ayo-gold-light); }
.contact-list a, .contact-list span { display: grid; line-height: 1.3; font-weight: 500; }
.contact-list small { font-size: .76rem; opacity: .65; font-weight: 400; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; }
.site-footer__bottom-inner { display: flex; justify-content: space-between; gap: 1em; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.site-footer__bottom p { margin: 0; }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 800; display: inline-flex; align-items: center; gap: .55em; padding: .8em 1.2em .8em .9em; border-radius: 999px; background: #25d366; color: #fff !important; text-decoration: none; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .9); transition: transform .2s; }
.wa-float i { font-size: 1.6rem; }
.wa-float:hover { transform: translateY(-3px); }

/* ---------- Responsive ---------- */
@media (min-width: 1025px) {
	.main-nav .sub-menu:not(:has(> li:nth-child(5))) { width: 280px; grid-template-columns: 1fr; }
	.site-header__actions .ayo-btn { white-space: nowrap; }
}
@media (max-width: 1320px) {
	.main-nav .menu > li > a { padding: .6em .75em; }
	.brand__tag { display: none; }
}
@media (max-width: 1180px) {
	.main-nav .menu > li > a { padding: .55em .55em; font-size: .92rem; }
	.site-header__inner { gap: 1em; }
	.brand__name { font-size: 1.12rem; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
	.site-header__actions { gap: .5em; }
	.site-header__actions .header-cta { padding-left: .9em; padding-right: .9em; }
	.site-header__actions .header-cta i { display: none; }
}
@media (max-width: 1024px) {
	:root { --header-h: 72px; }
	.nav-toggle { display: inline-flex; }
	/* backdrop-filter would trap the fixed drawer inside the header */
	.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
	.site-header__actions .header-login, .site-header__actions .header-cta, .site-header__actions .header-account { display: none; }
	.main-nav {
		position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 1000; background: #fff; padding: 1em 1.2em 2em;
		overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; display: flex; flex-direction: column; gap: 1em; margin: 0;
		box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .3);
	}
	.main-nav.is-open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
	.site-header__inner { gap: .8em; }
	.brand { min-width: 0; }
	.brand__text { min-width: 0; }
	.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.main-nav__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: .8em; border-bottom: 1px solid var(--ayo-border); }
	.main-nav__head .brand__img { height: 44px; }
	.main-nav__head .brand__tag { display: none; }
	.main-nav__account { display: flex; gap: .6em; flex-wrap: wrap; align-items: center; padding-top: 1em; border-top: 1px solid var(--ayo-border); }
	.main-nav__account .header-cta { flex: 1; }
	.main-nav__social { display: block; }
	.main-nav .menu { flex-direction: column; align-items: stretch; gap: .15em; }
	.main-nav .menu > li { display: block; }
	.main-nav .menu > li > a { padding: .8em 1em; border-radius: 12px; font-size: 1rem; }
	.nav-caret { top: 1.55em; right: .4em; pointer-events: auto; width: 40px; height: 40px; font-size: .8rem; transition: transform .2s; }
	.nav-caret[aria-expanded="true"] { transform: translateY(-50%) rotate(180deg); }
	.main-nav .sub-menu { position: static; transform: none; width: auto; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: .2em 0 .5em .6em; display: none; opacity: 1; visibility: visible; }
	.main-nav .menu > li:hover > .sub-menu, .main-nav .menu > li:focus-within > .sub-menu { transform: none; }
	.main-nav .menu > li.is-open > .sub-menu { display: grid; }
	.hero__inner, .about, .hobi, .member-cta, .event-detail { grid-template-columns: 1fr; }
	.hobi { gap: 3em; }
	.hobi__photo { max-width: 380px; }
	.hero { padding: 48px 0 100px; }
	.hero__visual { min-height: 0; margin-top: 1em; }
	.hero--photo .hero__visual { margin-bottom: -100px; }
	.hero__photo { width: min(380px, 88%); }
	.feature-event { grid-template-columns: 1fr; }
	.feature-event--noposter .feature-event__info { grid-template-columns: 1fr 1fr; }
	.feature-event__poster img { max-height: 520px; object-fit: contain; background: var(--ayo-green-soft); }
	.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.social-grid { grid-template-columns: repeat(3, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.event-detail__poster { position: static; max-width: 480px; }
	.channel-cards { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .topbar__greet { display: none; } .topbar__inner { justify-content: center; } }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 640px) {
	.container { padding-left: 16px; padding-right: 16px; }
	.page-hero { padding: 40px 0 46px; }
	.page-hero__ornament { width: 230px; height: 230px; right: -110px; opacity: .55; }
	.page-hero::before { -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
	.topbar__greet { display: none; }
	.topbar__inner { justify-content: center; }
	.brand__img { height: 44px; }
	.nav-toggle { width: 44px; height: 44px; }
	.brand__name { font-size: 1.12rem; }
	.section { padding: 56px 0; }
	.hero__title { font-size: 2.1rem; }
	.hero__actions .ayo-btn { width: 100%; }
	.hero__float { display: none; }
	.hero__poster { transform: none; }
	.feature-event__body { padding: 1.6em 1.3em; }
	.feature-event__info, .feature-event--noposter .feature-event__info { grid-template-columns: 1fr; }
	.countdown div { min-width: 0; flex: 1; }
	.countdown b { font-size: 1.35rem; }
	.feature-event__actions .ayo-btn { flex: 1 1 100%; }
	.grid-3 { grid-template-columns: 1fr; }
	.pillars { grid-template-columns: repeat(2, 1fr); }
	.member-cta { padding: 2em 1.3em; border-radius: 22px; }
	.member-cta::after { width: 200px; height: 200px; right: -110px; top: -110px; opacity: .3; }
	.hobi__photo { max-width: calc(100% - 22px); justify-self: start; }
	.kuliah-hub { grid-template-columns: 1fr; }
	.hobi__list li { padding: .9em 1em; gap: .9em; }
	.hobi__icon { width: 54px; height: 54px; font-size: 1.25rem; }
	.hero__pattern { -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 100%); mask-image: linear-gradient(180deg, transparent 58%, #000 100%); }
	.member-cta__benefits { grid-template-columns: 1fr; }
	.social-grid { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr; gap: 2em; }
	.materi-card { grid-template-columns: 56px 1fr; }
	.ayo-konsul__grid { grid-template-columns: 1fr 1fr; gap: .7em; }
	.ayo-konsul-card { padding: 1.1em 1em; gap: .4em; }
	.ayo-konsul-card p, .ayo-konsul-card__go { display: none; }
	.ayo-konsul-card h3 { font-size: .92rem; }
	.ayo-konsul-card__icon { width: 44px; height: 44px; font-size: 1.1rem; }
	.materi-card__icon { width: 56px; height: 56px; }
	.materi-card.has-thumb { grid-template-columns: 1fr; padding: .8em .8em 1em; gap: .9em; }
	.materi-card.has-thumb .materi-card__body, .materi-card.has-thumb .materi-card__action { padding: 0 .4em; }
	.materi-card__action { grid-column: 1 / -1; }
	.wa-float span { display: none; }
	.wa-float { padding: .8em; }
	.section-head { align-items: flex-start; }
	.author-box { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Beranda tambahan (v1.1) */
.about__ring--photo { overflow: hidden; }
.about__ring--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.about__lead p { margin: 0 0 .8em; }
.section--free .entry-content { max-width: 900px; margin: 0 auto; }
.customize-partial-edit-shortcut button { z-index: 50; }

/* =========================================================================
   Palet hijau muda (Syafiq Shop) + emas metalik
   ========================================================================= */
:root {
	--ayo-green: #5bb043;
	--ayo-green-light: #8fd14f;
	--ayo-green-dark: #2e8b34;
	--ayo-green-deep: #1f6b25;
	--ayo-gold: #e8b52a;
	--ayo-gold-light: #ffd23f;
	--ayo-gold-dark: #b8860b;
	--ayo-gold-grad: linear-gradient(180deg, #fff2b0 0%, #ffd84a 35%, #f3b929 65%, #c98a12 100%);
	--sy-grad: linear-gradient(118deg, #3c9637 0%, #55aa3f 50%, #7cc043 100%);
	--sy-glow: radial-gradient(120% 140% at 100% 0%, rgba(214, 240, 120, .35) 0%, transparent 55%);
	--gold-edge: drop-shadow(1px 0 0 #e3610f) drop-shadow(-1px 0 0 #e3610f) drop-shadow(0 1px 0 #e3610f) drop-shadow(0 -1px 0 #e3610f) drop-shadow(0 3px 0 #a8320a);
	--gold-edge-text: 1px 1px 0 #e3610f, -1px -1px 0 #e3610f, 1px -1px 0 #e3610f, -1px 1px 0 #e3610f, 0 3px 0 #a8320a, 0 5px 10px rgba(0, 0, 0, .18);
}
.topbar { background: #3a9235; }
.hero { background: var(--sy-glow), var(--sy-grad); }
.page-hero { background: var(--sy-glow), var(--sy-grad); }
.member-cta { background: var(--sy-glow), var(--sy-grad); }
.kuliah-hub__card { background: var(--sy-grad); }
.card-post__placeholder { background: var(--sy-grad); }
.site-footer { background: linear-gradient(180deg, #3c9637 0%, #4ea33d 100%); color: #fff; }
.site-footer a { color: #fff; }
.site-footer p, .site-footer small, .contact-list span, .site-footer__bottom { color: rgba(255, 255, 255, .92); }
.site-footer h3, .site-footer a:hover, .brand--footer .brand__name em { color: #ffe066; text-shadow: 0 1px 0 #a8500a, 0 2px 4px rgba(0, 0, 0, .2); }
.contact-list i, .site-footer .socials__item { background: rgba(255, 255, 255, .16); }
.hero, .page-hero, .member-cta, .kuliah-hub__card, .site-footer, .topbar { text-shadow: 0 1px 2px rgba(0, 50, 0, .22); }
/* Judul emas bergaya metalik dengan tepi oranye-merah */
.hero__title, .page-hero__title, .notfound__code, .hero .gold, .page-hero .gold, .member-cta .gold { filter: var(--gold-edge); text-shadow: none; }
.member-cta h2, .kuliah-hub__card strong { color: #ffd23f; text-shadow: var(--gold-edge-text); }
.member-cta__benefits strong, .countdown b { color: #ffd23f; text-shadow: 0 1px 0 #b8380b, 0 2px 4px rgba(0, 0, 0, .22); }
.crumbs span, .crumbs .fa-house, .page-hero__sub i, .eyebrow--light, .topbar__greet strong, .topbar__arabic, .hero__badge i { color: #ffe066; }

/* ---------- Ebook ---------- */
.ebook-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em 1.3em; }
.ebook-card { display: flex; flex-direction: column; gap: .8em; }
.ebook-card__cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; overflow: hidden; background: var(--ayo-green-soft); box-shadow: 0 18px 30px -18px rgba(15, 74, 34, .55), inset 6px 0 0 rgba(0, 0, 0, .08); transition: transform .25s, box-shadow .25s; }
.ebook-card__cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .15) 60%, transparent); pointer-events: none; }
.ebook-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ebook-card:hover .ebook-card__cover { transform: translateY(-5px); box-shadow: 0 26px 36px -20px rgba(15, 74, 34, .6); }
.ebook-card__blank { position: absolute; inset: 0; display: grid; place-content: center; gap: .6em; padding: 1.2em; text-align: center; color: #fff; background: var(--sy-grad, linear-gradient(135deg, #3c9637, #7cc043)); }
.ebook-card__blank i { font-size: 2.2rem; color: #ffd23f; }
.ebook-card__blank b { font-size: 1rem; line-height: 1.3; }
.ebook-card__type { position: absolute; right: 10px; bottom: 10px; padding: .3em .7em; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ayo-green-dark); font-size: .72rem; font-weight: 700; }
.ebook-card__type .fa-file-pdf { color: #d93025; }
.ebook-card__body h3 { margin: 0 0 .3em; font-size: 1.02rem; line-height: 1.35; }
.ebook-card__body h3 a { color: var(--ayo-ink); text-decoration: none; }
.ebook-card__body h3 a:hover { color: var(--ayo-green-dark); }
.ebook-card__body p { margin: 0 0 .5em; font-size: .86rem; color: var(--ayo-muted); line-height: 1.5; }
.ebook-card__btn { font-size: .85rem; font-weight: 600; color: var(--ayo-gold-dark); text-decoration: none; }
.article-cover--book { max-width: 360px; margin-left: auto; margin-right: auto; border-radius: 6px 16px 16px 6px; }
@media (max-width: 960px) { .ebook-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ebook-grid { grid-template-columns: repeat(2, 1fr); gap: 1.3em 1em; } .ebook-card__body p { display: none; } }