/*
 * Front page sections. Loaded only on is_front_page().
 * Section order mirrors her Wix site — see the map in front-page.php.
 *
 * Colour discipline: her two tones appear only as full-bleed FILLS. Every
 * label, link, and button on top of them is neutral ink. Squinted at, the page
 * should read as a soft gray/beige site with two gentle washes.
 *
 * BLEED RULE: only a background colour field may reach the viewport edge.
 * Every piece of content — grids, type, objects, rules — stays inside the
 * container. A composition that bleeds looks composed at 1440px and abandoned
 * at 2560px.
 *
 * RASTER RULE: no image is laid out wider than ~90% of its native pixel width.
 * Native sizes are noted beside each cap below; if an asset is replaced, redo
 * the arithmetic rather than trusting the old number.
 */

/*
 * No trailing padding. Every section owns its own padding and its own field
 * colour, so a gap here would paint a stray band of paper between the last
 * field and the footer — which is exactly what it did.
 */
.home-main {
	padding-bottom: 0;
}

/* 1. Hero ---------------------------------------------------------------- */

/*
 * Asymmetric by design: type left across seven of twelve columns, the hourglass
 * right across four, the two optically balanced against a hairline that runs
 * out of the gap between them. That rule is the "eşik" the headline names.
 * Everything is container-bound — see the BLEED RULE above.
 */
.hero {
	padding-block: var(--myco-space-4xl) var(--myco-space-5xl);
	background: var(--myco-color-bg);
}

.hero__grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.hero__eyebrow {
	margin-bottom: var(--myco-space-lg);
}

.hero__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2.75rem, 8vw, 4.5rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.032em;
	line-height: 0.94;
	text-wrap: balance;
}

.hero__title-line {
	display: block;
}

.hero__title-accent {
	display: block;
	color: var(--myco-color-primary-soft);
	font-style: italic;
}

.hero__lede {
	max-width: 32ch;
	margin-bottom: var(--myco-space-2xl);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	line-height: 1.45;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--myco-space-xl);
	align-items: center;
}

/*
 * Hourglass artwork is 298x481 native — the whole asset, there is no larger
 * source. 16.5rem (264px) is ~89% of native, the ceiling the RASTER RULE
 * allows. Do not raise it; it goes soft immediately.
 */
.hero__object {
	/*
	 * 12rem (192px) on phones: 264px would fill four fifths of a 375px screen,
	 * and at 2x DPR it asks for 528px from a 298px asset. 192px keeps it an
	 * object rather than a banner. The 16.5rem desktop cap is set below.
	 */
	max-width: 12rem;
	margin: 0 auto;
}

.hero__image {
	display: block;
	width: 100%;
	height: auto;
	/* drop-shadow follows the alpha channel; box-shadow would draw a rectangle. */
	filter: drop-shadow(0 18px 34px rgba(43, 40, 40, 0.18));
}

/* 2. Kairos / book club -------------------------------------------------- */

.kairos {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-blue);
}

.kairos__grid {
	display: grid;
	gap: var(--myco-space-2xl);
	align-items: center;
}

/*
 * Antique book artwork is 1044x648 native. 30rem (480px) is 46% of that, so it
 * stays sharp on 2x displays. Container-bound — it no longer bleeds left.
 */
.kairos__object {
	max-width: 30rem;
	margin: 0;
}

.kairos__image {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 22px 40px rgba(43, 40, 40, 0.2));
}

.kairos__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.03em;
	line-height: 1;
}

.kairos__lede {
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-text);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.125rem, 2.2vw, 1.4rem);
	font-style: italic;
	line-height: 1.5;
}

.kairos__text {
	max-width: 44ch;
	color: var(--myco-color-primary-soft);
}

.kairos__actions {
	margin-top: var(--myco-space-xl);
}

.kairos__quote {
	position: relative;
	width: min(calc(100% - var(--myco-gutter) * 2), 44rem);
	margin: var(--myco-space-4xl) auto 0;
	padding-block: var(--myco-space-xl);
	border-top: var(--myco-hairline);
	border-bottom: var(--myco-hairline);
}

/* Oversized hanging quote mark, set into the margin on wide screens. */
.kairos__quote::before {
	content: "\201D";
	position: absolute;
	top: 0.06em;
	left: 0;
	color: rgba(43, 40, 40, 0.16);
	font-family: var(--myco-font-serif);
	font-size: 6rem;
	line-height: 1;
	pointer-events: none;
}

.kairos__quote-body {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.kairos__quote-body p {
	margin: 0;
	font-family: var(--myco-font-serif);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-style: italic;
	line-height: 1.4;
	text-wrap: balance;
}

.kairos__quote-cite {
	margin-top: var(--myco-space-lg);
	color: var(--myco-color-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

/* Shared section furniture ------------------------------------------------ */

/*
 * A section head that is NOT centred. Every section on this page uses its own
 * composition; what they share is the eyebrow/title pairing and the hairline
 * that closes the head off from the content below it.
 */
.section-head {
	max-width: 34ch;
	margin-bottom: var(--myco-space-3xl);
	padding-bottom: var(--myco-space-lg);
	border-bottom: var(--myco-hairline);
}

.section-head__title {
	margin: 0;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

/* 3. Kairos Akademi + Kitaplarım ------------------------------------------ */

.akademi {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-rose);
}

.akademi__grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.akademi__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.akademi__text {
	max-width: 34ch;
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-style: italic;
	line-height: 1.5;
}

/* Click-to-load player ---------------------------------------------------- */

.lite-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--myco-color-primary);
}

.lite-video__poster,
.lite-video__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/*
 * The whole poster is the target — a small play button inside a large image is
 * a needlessly precise hit area. The label sits bottom-left rather than a
 * centred red lozenge, so the plate stays quiet until hovered.
 */
.lite-video__button {
	position: absolute;
	inset: 0;
	display: flex;
	gap: var(--myco-space-md);
	align-items: flex-end;
	justify-content: flex-start;
	padding: var(--myco-space-lg);
	background: linear-gradient(to top, rgba(43, 40, 40, 0.62) 0%, rgba(43, 40, 40, 0.12) 45%, rgba(43, 40, 40, 0) 70%);
	color: var(--myco-color-white);
	text-decoration: none;
	transition: background var(--myco-transition);
}

.lite-video__button:hover,
.lite-video__button:focus-visible {
	background: linear-gradient(to top, rgba(43, 40, 40, 0.74) 0%, rgba(43, 40, 40, 0.3) 55%, rgba(43, 40, 40, 0.12) 100%);
}

.lite-video__button:focus-visible {
	outline: 3px solid var(--myco-color-white);
	outline-offset: -6px;
}

/* Triangle drawn with borders — no icon font, no SVG request. */
.lite-video__icon {
	flex: none;
	width: 0;
	height: 0;
	margin-bottom: 0.15em;
	border-top: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-left: 0.85rem solid currentColor;
}

.lite-video__label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

.lite-video__note {
	margin-top: var(--myco-space-sm);
	color: var(--myco-color-muted-strong);
	font-size: var(--myco-font-size-xs);
}

/* Books band -------------------------------------------------------------- */

.akademi__books {
	margin-top: var(--myco-space-4xl);
	padding-top: var(--myco-space-2xl);
	border-top: var(--myco-hairline);
}

.akademi__books-eyebrow {
	margin-bottom: var(--myco-space-2xl);
}

.akademi__books-grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.book {
	display: grid;
	gap: var(--myco-space-lg);
	align-items: start;
}

/*
 * Covers are 673x600 native; 16rem (256px) is 38% of that. Presented as
 * objects on a plinth — the shadow sits under the cover, not around it.
 */
.book__cover {
	max-width: 16rem;
	margin: 0;
}

.book__image {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 22px rgba(43, 40, 40, 0.22));
}

.book__title {
	margin-bottom: var(--myco-space-sm);
	font-size: var(--myco-font-size-xl);
	font-weight: 400;
	font-variation-settings: "opsz" 72;
}

.book__text {
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-primary-soft);
	font-size: var(--myco-font-size-sm);
	line-height: 1.6;
}

/* 4. Son Videolarım -------------------------------------------------------- */

.home-videos {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

/* The index: hairline-ruled rows, the way a contents column is set. */
.video-index {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--myco-hairline);
}

.video-index__item {
	border-bottom: var(--myco-hairline);
}

.video-index__link {
	display: grid;
	gap: var(--myco-space-lg);
	grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr);
	align-items: center;
	padding-block: var(--myco-space-lg);
	color: inherit;
	text-decoration: none;
}

.video-index__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--myco-color-surface-strong);
}

/* 140px rendered against a 320px mqdefault — sharp past 2x. */
.video-index__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-index__title {
	font-size: var(--myco-font-size-sm);
	line-height: 1.45;
	transition: color var(--myco-transition);
}

.video-index__link:hover .video-index__title,
.video-index__link:focus-visible .video-index__title {
	color: var(--myco-color-accent-strong);
}

.home-videos__more {
	margin-top: var(--myco-space-2xl);
}

/* 5. Gündemden Yazılar ----------------------------------------------------- */

.home-posts {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-blue);
}

.home-posts__grid {
	display: grid;
	gap: var(--myco-space-2xl);
}

.home-posts__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-posts__lede {
	max-width: 30ch;
	margin-bottom: var(--myco-space-lg);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.5;
}

.home-posts__list {
	display: grid;
	border-top: var(--myco-hairline);
}

/*
 * Homepage entries are rows, not cards: no panel, no radius, no shadow. The
 * shared .card-post component keeps its own styling for the archive; these
 * rules restyle it for this context only.
 */
.home-posts__list .card-post {
	display: grid;
	gap: var(--myco-space-lg);
	padding: 0;
	padding-block: var(--myco-space-xl);
	border: 0;
	border-bottom: var(--myco-hairline);
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.home-posts__list .card-post__media {
	display: block;
	overflow: hidden;
	max-width: 12rem;
	aspect-ratio: 4 / 3;
}

.home-posts__list .card-post__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-posts__list .card-post__body {
	padding: 0;
}

.home-posts__list .card-post__title {
	margin-bottom: var(--myco-space-xs);
	font-size: var(--myco-font-size-xl);
	font-weight: 400;
	font-variation-settings: "opsz" 72;
	line-height: 1.25;
}

.home-posts__list .card-post__excerpt {
	max-width: 58ch;
	margin-bottom: var(--myco-space-sm);
	color: var(--myco-color-primary-soft);
	font-size: var(--myco-font-size-sm);
	line-height: 1.6;
}

.home-posts__list .card-post__meta {
	color: var(--myco-color-muted-strong);
	font-size: var(--myco-font-size-xs);
}

/*
 * The shared .entry-category is a pill, which is right in an archive but reads
 * as a UI chip against a large colour field. Here it becomes a small-caps
 * eyebrow — the same information, set as typography instead of a control.
 */
.home-posts__list .entry-categories {
	margin-bottom: var(--myco-space-xs);
}

.home-posts__list .entry-category {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--myco-color-muted-strong);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--myco-tracking-label);
	text-transform: uppercase;
}

.home-posts__list .entry-category:hover,
.home-posts__list .entry-category:focus-visible {
	color: var(--myco-color-accent-strong);
}

/*
 * No featured image: do NOT render an empty frame. The entry keeps the row but
 * leads with its category eyebrow set larger, so the absence reads as a
 * typographic choice rather than a missing asset.
 */
.card-post--plain .card-post__title {
	font-size: var(--myco-font-size-2xl);
}

.home-posts__list .card-post--plain {
	padding-left: var(--myco-space-lg);
	border-left: 2px solid var(--myco-color-club-2);
}

/* 6. İlham Verecek Notlar (newsletter) ------------------------------------- */

.home-notes {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-bg);
}

.home-notes__inner {
	display: grid;
	gap: var(--myco-space-2xl);
	align-items: center;
}

/*
 * The single approved portrait on the whole site. Native 1362x2048, capped at
 * 24rem (384px) — 28% of native, comfortably sharp.
 */
.home-notes__portrait {
	max-width: 24rem;
	margin: 0;
}

.home-notes__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 20px 34px rgba(43, 40, 40, 0.16));
}

.home-notes__title {
	margin-bottom: var(--myco-space-lg);
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-notes__text {
	max-width: 42ch;
	margin-bottom: var(--myco-space-md);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.55;
}

.home-notes__body .myco-button {
	margin-top: var(--myco-space-lg);
}

/* 7. Yaklaşan Etkinlikler -------------------------------------------------- */

.home-events {
	padding-block: var(--myco-space-4xl);
	background: var(--myco-color-rose);
}

.home-events__inner {
	display: grid;
	gap: var(--myco-space-xl);
	text-align: left;
}

.home-events__title {
	margin: 0;
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.home-events__text {
	max-width: 44ch;
	margin-bottom: var(--myco-space-md);
	color: var(--myco-color-primary-soft);
	font-family: var(--myco-font-serif);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.55;
}

.home-events__text--muted {
	color: var(--myco-color-muted-strong);
	font-family: var(--myco-font-sans);
	font-size: var(--myco-font-size-sm);
	font-style: normal;
}

/* Breakpoints -------------------------------------------------------------- */

@media (min-width: 48rem) {
	.kairos__quote::before {
		left: -0.62em;
	}

	.akademi__books-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--myco-space-3xl);
	}

	.book {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	}

	.home-posts__list .card-post--media {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		align-items: start;
	}

	.home-notes__inner {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}

	.home-events__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: var(--myco-space-3xl);
		align-items: start;
	}
}

@media (min-width: 64rem) {
	.hero {
		padding-block: var(--myco-space-5xl) var(--myco-space-6xl);
	}

	.hero__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-xl);
	}

	/*
	 * All three share row 1 and are placed explicitly, so the hairline lands in
	 * the object column without magic numbers. Being a static grid item rather
	 * than an absolutely positioned overlay, it paints in tree order — first,
	 * i.e. behind its siblings — with no z-index needed. The earlier version
	 * was an absolute ::before and had to fight the positioned-layer paint
	 * order to stay behind the hourglass.
	 */
	.hero__grid::before {
		content: "";
		grid-row: 1;
		grid-column: 8 / 13;
		align-self: center;
		height: 0;
		border-top: var(--myco-hairline);
	}

	.hero__type {
		grid-row: 1;
		grid-column: 1 / 8;
		align-self: center;
	}

	/*
	 * Re-scaled for the narrower track. The headline now measures against 7 of
	 * 12 columns (~536px at 1024, ~757px at 1440), not the full container, so
	 * the vw coefficient drops as the column does. At 6.4vw the long line
	 * "Zamanın Dışında" reaches its 5.75rem ceiling exactly as the container
	 * caps out at 1320px — it never outruns its own column.
	 */
	.hero__title {
		font-size: clamp(3.75rem, 6.4vw, 5.75rem);
	}

	.hero__object {
		grid-row: 1;
		grid-column: 9 / 13;
		align-self: center;
		max-width: 16.5rem;
		margin: 0 0 0 auto;
	}

	.kairos {
		padding-block: var(--myco-space-5xl);
	}

	.kairos__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
	}

	.kairos__object {
		grid-column: 1 / 7;
	}

	.kairos__body {
		grid-column: 8 / 13;
	}

	.kairos__quote {
		margin-top: var(--myco-space-5xl);
	}

	/* Akademi: copy left across four columns, player right across eight. */
	.akademi {
		padding-block: var(--myco-space-5xl);
	}

	.akademi__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
		align-items: center;
	}

	.akademi__intro {
		grid-column: 1 / 5;
	}

	.akademi__player {
		grid-column: 6 / 13;
	}

	/* Videos: lead across seven, index across four, mirroring the hero. */
	.home-videos {
		padding-block: var(--myco-space-5xl);
	}

	/*
	 * Two columns of rows, not a card grid. column-gap only — the hairline on
	 * each row is the horizontal rhythm, so a row gap would break the ruling.
	 */
	.video-index {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--myco-space-3xl);
	}

	/* Blog: heading column left, entries right — a contents page. */
	.home-posts {
		padding-block: var(--myco-space-5xl);
	}

	.home-posts__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
		align-items: start;
	}

	.home-posts__intro {
		position: sticky;
		top: var(--myco-space-2xl);
		grid-column: 1 / 5;
	}

	.home-posts__list {
		grid-column: 6 / 13;
	}

	.home-notes {
		padding-block: var(--myco-space-5xl);
	}

	.home-notes__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
	}

	.home-notes__portrait {
		grid-column: 1 / 5;
	}

	.home-notes__body {
		grid-column: 6 / 12;
	}

	.home-events {
		padding-block: var(--myco-space-5xl);
	}

	.home-events__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--myco-space-2xl);
	}

	.home-events__lead {
		grid-column: 1 / 6;
	}

	.home-events__body {
		grid-column: 7 / 13;
	}
}