/* İGSA theme — supplementary a11y + responsive rules (tokens live in theme.json). */

/* ============================================================================
   Canvas — measured on the live source, 2026-08-09.

   The source has exactly TWO layouts, not a fluid range:
     • below 768px it serves `<meta viewport width=320>` and draws a fixed
       320px canvas that the phone scales up to the physical width;
     • at 768px and above it serves `width=device-width` and draws a fixed
       980px canvas, centred, with full-bleed bands behind it. That canvas does
       NOT reflow: the same page measures 1108px tall at 768, 1024, 1440 and
       1920. Below ~1024 the canvas stops fitting and the page scrolls
       sideways (the source's own scrollWidth is 1021 at a 768 viewport).

   The clone therefore has one breakpoint, at 768px, and pins the desktop
   canvas to 980px so a tablet sees what the source shows a tablet rather than
   a re-imagined tablet layout. `overflow-x: hidden` used to be set here to
   suppress the sideways scroll; it also suppressed the evidence, so it is
   gone — any overflow is now visible to the verifier and judged against the
   source's own overflow at the same viewport.
   ========================================================================== */
@media (min-width: 768px) {
	html { min-width: 980px; }
}

/* ----------------------------------------------------------------------------
   Keyboard focus ring — the source's own, measured by tabbing through the live
   site (tools/state-paint-check.mjs, 2026-08-16):

     outline:    none          (Wix declares `outline-width: 3px` with
                                `outline-style: none`, which paints nothing —
                                confirmed at 0 changed pixels)
     box-shadow: rgb(255,255,255) 0 0 0 1px, rgb(17,109,255) 0 0 0 3px

   A 1px white separator inside a 3px #116DFF ring, so the indicator keeps its
   contrast on the burgundy nav, the navy dropdown and white page alike. The
   clone previously drew a 3px burgundy outline at 2px offset — invented, not
   measured, and invisible against the burgundy nav bar it most often landed on.

   Programmatic .focus() does NOT reproduce this: the ring only appears under
   real keyboard focus, so it has to be tested by pressing Tab.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-block-navigation-item__content):focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff;
	border-radius: 0;
	/* The source raises z-index on focus so the ring is never overlapped by the next
	   control. Inert on the clone's static elements, correct on its positioned ones. */
	z-index: 1;
}

/* Accessible visually-hidden text (WordPress convention). Used for the home H1, which is
   present for SEO/screen-readers but not shown — the source Wix home had no visible H1. */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none;
	height: auto; width: auto; margin: 0; padding: 0.5rem 1rem;
	background: var(--wp--preset--color--navy); color: #fff; z-index: 100000;
}

/* Skip link (WordPress injects it for block themes) — ensure it is styled + visible on focus. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Minimum 44px touch targets for interactive controls. */
.wp-block-navigation-item__content,
.wp-block-button__link,
.wp-block-search__button,
.wp-block-social-link-anchor {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================================
   Header — 1:1 with the source (measured on the live Wix site at 1425px):
   sticky, 155px tall = 106px white utility row + 49px burgundy nav bar.
   Utility row is ONE row: social icons + TR/EN on the left, logo absolutely
   centred (251x87), Kitaplar/İletişim buttons (161x40) on the right.
   Nav items: Poppins ExtraLight 17px white, 58px apart, centred.
   ========================================================================== */
.igsa-header { position: sticky; top: 0; z-index: 500; padding: 0 !important; }
.igsa-header > * { margin-block: 0 !important; }
.igsa-header__utility {
	position: relative;
	min-height: 106px;
	padding-inline: 46px 27px;
	padding-block: 0;
}
.igsa-header__utility-left { gap: 42px; }
/* Social icons — the source's own 27x27 glyphs, 40px apart (x46, 86, 126). */
.igsa-social {
	display: flex; align-items: center; gap: 13px;
	list-style: none; margin: 0; padding: 0;
}
.igsa-social li { margin: 0; padding: 0; }
.igsa-social a { display: block; line-height: 0; }
.igsa-social img { display: block; width: 27px; height: 27px; }
.igsa-social a:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }

/* The source renders EVERY image with object-fit: cover, the site chrome included. The
   clone left the six chrome images per page (three social icons, the header logo, the
   footer logo and the footer payment strip) at the initial `fill`. Measured across ten
   routes: all six have a natural aspect ratio equal to their box, so neither value crops
   or stretches and the pixels are unchanged — but the computed style differed from the
   source's on 265 images, which is not what a 1:1 clone reports. */
.igsa-social img, .custom-logo, .igsa-footer__logo, .igsa-footer__pay { object-fit: cover; }

/* Logo: absolutely centred on the page, exactly like the source. */
.igsa-header__brand {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.igsa-header__brand .wp-block-site-logo { pointer-events: auto; }
.igsa-header__brand .wp-block-site-logo img { display: block; width: 251px; height: auto; }

/* Kitaplar / İletişim: square burgundy 161x40, 1px navy border, ExtraLight 16px. */
.igsa-header__quicklinks .wp-block-buttons { gap: 7px; flex-wrap: nowrap; }
.igsa-header__quicklinks .wp-block-button { margin: 0; flex: 0 0 auto; }
.igsa-btn-sm .wp-block-button__link {
	/* Colour is deliberately NOT set here. theme.json's button element owns the fill,
	   the label colour and their hover inversion; a component rule at this specificity
	   silently beat the token's :hover, which is why these buttons did nothing on
	   hover while the source's invert to white over 0.4s. */
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 200;
	/* source: 22.4px (1.4em) on the desktop canvas, 19.51px on the 320 one */
	line-height: 22.4px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 0;
	padding: 0;
	width: 161px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


/* Burgundy nav bar: 49px tall, items centred, cart pinned right (like the source). */
.igsa-header__nav { position: relative; padding: 0 !important; min-height: 49px; }
.igsa-header__nav .wp-block-navigation { padding: 0 clamp(1rem, 4vw, 2rem); min-height: 49px; }
.igsa-header__nav .wp-block-navigation__container { min-height: 49px; align-items: center; }
.igsa-header__nav .wp-block-navigation .wp-block-navigation__container { gap: 78px; }
/* The 980 canvas is authored separately on the source and lays the menu out to its own
   measurements. Read off the live source at 768 on 2026-08-21:

     Turkish   x79, 242, 412, 560, 674, 822   box widths 104, 112, 90, 56, 90, 76
     English   x55, 171, 294, 396, 462, 563, 650, 766   (two more items, so tighter)

   Every one of those box widths is the clone's own label width plus 10px of padding on
   each side, so the row reproduces exactly from a left-aligned start, 10px item padding
   and the gap left over: 58px for the six Turkish items, 11px for the eight English ones.
   The clone was keeping the desktop's centred 78px gap at every width, which put the
   Turkish row a uniform 11px right of the source and wrapped the English row onto a
   second line, making every English page 118px taller than the source at this canvas.

   The source also ends this row with a "More" overflow item the clone has no counterpart
   for; that is recorded in config/known-differences.json rather than papered over here. */
@media (min-width: 768px) and (max-width: 1024.98px) {
	/* The block editor puts BOTH `wp-block-navigation__container` and
	   `wp-block-navigation` on the <ul>, so a `.wp-block-navigation` selector hits the
	   wrapper and the list; these are keyed on the element name so the inset is applied
	   once. */
	.igsa-header__nav nav.wp-block-navigation {
		padding-left: 79px !important;
		padding-right: 0 !important;
	}
	.igsa-header__nav .wp-block-navigation ul.wp-block-navigation__container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 58px;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	/* The base rule further down sets `padding: 7.7px 0 0` on these at the same
	   specificity and later in the file, so the tablet padding needs one more class. */
	.igsa-header__nav ul.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-left: 10px;
		padding-right: 10px;
	}
	html[lang^="en"] .igsa-header__nav nav.wp-block-navigation { padding-left: 55px !important; }
	html[lang^="en"] .igsa-header__nav .wp-block-navigation ul.wp-block-navigation__container { gap: 11px; }
}
.igsa-header__nav .wp-block-navigation-item__content {
	color: #fff;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 200;
	font-size: 17px;
	/* 33px, measured on the source's nav labels at 1440 (box y116 h33, i.e. the
	   line box IS the run height). The clone's 1.2 gave 20.4px, which put the
	   ink centre 14px above the source's on every route at every desktop width. */
	line-height: 33px;
	letter-spacing: normal;
	text-transform: none;
	/* The 44px tap target is centred in the 49px band, which lands its label 7.5px
	   above the source's. The source paints the label ink at y120 in a band that
	   starts at 106; top-aligning the label inside the tap target and insetting it
	   11.5px puts it there without shrinking the target. */
	align-items: flex-start;
	/* border-box, or the inset would be ADDED to the 44px tap target and grow the
	   whole nav band from 49px to 55.5px, pushing every page 6.5px down. */
	box-sizing: border-box;
}
/* The 44.5px tap target and its label inset belong to the TOP-LEVEL items only. Applied
   to every .wp-block-navigation-item__content they also inflated the dropdown's rows,
   which the source draws 32px tall — seven of them made the panel 311.5px instead of the
   source's 224px. */
.igsa-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	/* Pinned, so the inset below places the label WITHOUT feeding back into the band:
	   the <li> and <ul> centre their children, so an unpinned height moves the item by
	   half of any padding change and the label only travels half as far as intended. */
	height: 44.5px;
	/* 7.7px, re-measured 2026-08-17 once the source's own Poppins metrics were in place:
	   the source paints the label ink at y120.0 and 11.5px was painting it at y123.8. */
	padding: 7.7px 0 0;
}
/* Submenu rows: 32px on the source (panel 216.5x224 over seven rows). */
.igsa-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	height: 32px;
	padding: 0 5px;
	line-height: 32px;
}
.igsa-header__nav .wp-block-navigation-item__content:hover { color: #9b3314; }
/* The source's nav draws no dropdown indicator, but it does keep a toggle in the
   keyboard path: a 24x24 <button aria-label="Daha fazla Eğitimler sayfası"> hidden
   with clip-path: inset(50%), sitting between the "Eğitimler" link and "Blog" in the
   tab order (measured with tools/tab-order.mjs). `display: none` removed the clone's
   equivalent from the accessibility tree altogether, so the two sites' tab orders
   diverged. Hidden the same way instead, so it paints nothing and still stops. */
.igsa-header__nav .wp-block-navigation__submenu-icon {
	position: absolute;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	clip-path: inset(50%);
}
.igsa-header__nav .wp-block-navigation__responsive-container-open svg { fill: #fff; }
/* The desktop dropdown is measured, not guessed — see the block below. */
/* Nav-bar cart — the source draws a solid white shopping bag (105.5x126.1 viewBox)
   rendered at 23x27.5, with a dark-red item count inside it, sitting 181px in from the
   right edge of the 1425px canvas. The offset is expressed proportionally so it holds
   its place as the viewport changes. */
.igsa-cart {
	position: absolute;
	right: clamp(1rem, 12.74%, 181px);
	top: 13px;	/* source: cart top 119 within a nav bar starting at 106 */
	margin: 0 !important;	/* WordPress block-gap adds a 16px top margin to nav children */
	display: block;
	line-height: 0;
	color: #fff;
	text-decoration: none;
}
.igsa-cart svg { display: block; width: 23px; height: 27.5px; fill: currentColor; overflow: visible; }
.igsa-cart text {
	fill: #8b0000;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 50px;
	font-weight: 200;
}

.igsa-cart:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
@media (max-width: 767.98px) { .igsa-cart { display: none; } }

/* Language switcher (TR|EN).
   Measured on the live source 2026-08-09 (tmp/lang-spec.mjs), both canvases:
     container  1px solid #959595 on #fff — 144x40 desktop, 261x26 phone
     TR (current) bg #e8e6e6, EN bg #fff, both navy 16px, lh 22.4
     labels inset 14px (TR) and 15px (EN) from their own box
   The two cells are NOT equal width, and the inequality is not authored: each
   cell is `flex: 1 1 auto`, so it starts at its own content width (inset +
   label) and then takes an equal share of the slack. That reproduces the
   source's 69.59/72.41 at 1440 AND its 128.09/130.91 at 320 from one rule —
   the 2.82px difference is just "EN" being 1.81px wider than "TR" plus the 1px
   inset difference. Hard-coding widths per breakpoint would not. */
.igsa-lang {
	display: inline-flex; align-items: stretch; gap: 0;
	font-family: var(--wp--preset--font-family--poppins); font-size: 16px; font-weight: 200;
	line-height: 22.4px;
	width: 144px; height: 40px; box-sizing: border-box;
	border: 1px solid #959595; background: #fff;
}
.igsa-lang__link, .igsa-lang__cur {
	flex: 1 1 auto;
	display: inline-flex; align-items: center; justify-content: flex-start;
	padding: 0 0 0 14px; color: var(--wp--preset--color--navy); text-decoration: none;
	box-sizing: border-box; white-space: nowrap;
}
.igsa-lang > :nth-child(2) { padding-left: 15px; }
.igsa-lang__cur { background: #e8e6e6; cursor: default; }
.igsa-lang__link { background: #fff; }
.igsa-lang__link:hover { color: #6e6e6d; }
.igsa-header__utility-left .igsa-social { flex-wrap: nowrap; }

/* Header responsive: below 1080px the absolute logo would collide with the side
   clusters, so fall back to a stacked (logo on its own row) layout. */
@media (max-width: 767.98px) {
	.igsa-header__utility { flex-wrap: wrap; justify-content: center; row-gap: 0.75rem; padding-inline: 1rem; padding-block: 0.7rem; min-height: 0; }
	.igsa-header__brand { position: static; left: auto; top: auto; transform: none; order: -1; flex-basis: 100%; justify-content: center; }
	.igsa-header__brand .wp-block-site-logo img { width: min(251px, 62vw); }
	.igsa-header__utility-left { gap: 1.25rem; justify-content: center; }
}
@media (max-width: 767.98px) {
	.igsa-header__utility-left { gap: 1rem; }
}

/* Mobile menu toggle.  The source puts it in the top-right of the header
   (#MENU_AS_CONTAINER_TOGGLE, 50x50 at x250 y24 of its 320 canvas — i.e. 20px in
   from the right edge). The clone left it in normal flow inside the burgundy nav
   bar, where it shared a band with the Kitaplar / İletişim buttons; those come
   later in the DOM and are also position:static, so they painted over it and
   swallowed the tap. Measured 2026-08-09: the menu could not be opened by
   tapping at ANY phone width (320/360/375/390/412/430 all confirmed) — only a
   scripted .click() that bypasses hit-testing worked. Placing it where the
   source has it both restores the source's layout and frees the tap target. */
@media (max-width: 767.98px) {
	/* anchor the toggle to the header, not the burgundy nav strip, so top/right
	   are the source's own 320-canvas coordinates */
	.igsa-header__nav, .igsa-header__nav .wp-block-navigation { position: static; }
	.igsa-header__nav .wp-block-navigation__responsive-container-open {
		position: absolute; top: 24px; right: 20px;
		width: 50px; height: 50px; z-index: 20;
		display: flex; align-items: center; justify-content: center;
	}
	/* Moving the toggle out of the burgundy strip puts it on the header's WHITE
	   background, where the strip's white glyph fill made it invisible — the
	   control was on screen and operable but could not be seen at any phone width.
	   The source draws it solid black (#000, sampled off the live phone render). */
	.igsa-header__nav .wp-block-navigation__responsive-container-open svg {
		width: 24px; height: 24px; fill: #000;
	}
	.igsa-header__nav .wp-block-navigation__responsive-container-open { color: #000; }
}

/* ----------------------------------------------------------------------------
   Desktop dropdown ("Eğitimler") — every number below was measured on the live
   source at 1440x900 by hovering the trigger and reading the mounted panel
   (tools/dropdown-probe.mjs, artifacts/interaction/dropdown__home__1440x900.json):

     trigger   613,116 148x33          panel   584,156 216.5x224
     panel     ul, bg #1D1D36, NO border, NO radius, NO shadow, padding 0, z 99999
     row       216.5x32, transparent, text centred, inner inset 5px + 8.5px
     label     17px / line-height 32px / w200 Poppins, #FFFFFF
     hover     #FFFFFF -> #9B3314, transition `color 0.4s ease`
     open      panel becomes visible 225/261/271ms after the pointer arrives
               (declared: `transition: visibility 0s ease 0.2s`)
     close     1034/1034/1032ms after the pointer leaves — a 1s hold, stable to
               within 2ms across runs, cancelled by re-entering the trigger
     sibling   moving to another top-level item closes it in 30ms, not 1000ms
     travel    the 7px gap between trigger and panel does NOT close it

   The clone was WordPress core's default: opened instantly, closed instantly (so
   the pointer could never cross the gap), 202x334 left-aligned under the trigger,
   1px rgba(0,0,0,.15) border, 44px rows, left-aligned 25.5px lines, and — worst —
   `--wp--preset--color--contrast` (#26272B) text on the #1D1D36 panel, a contrast
   ratio of 1.05:1. Seven links were on screen and unreadable.

   Timing is reproduced with asymmetric visibility delays rather than JS: the
   resting rule carries the 1s close delay, the open states carry the 200ms open
   delay, and a `:has()` rule cancels the hold when a sibling item takes over.
   That means core's width/height collapse must go — it is not transitioned, so
   the panel would snap shut instantly and leave an invisible 1s ghost.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.igsa-header__nav .wp-block-navigation .has-child.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		left: 50%;
		/* The source centres the panel on the trigger using the row's INNER width
		   (216.5 - 2x5px), which lands it 5px right of true centre. Reproduced as
		   the rule rather than as a fudge factor. */
		transform: translateX(calc(-50% + 5px));
		/* 44.5px trigger box + 3.2px puts the panel top at y156, where the source
		   paints it. The source's own gap is 7px below a 33px-tall trigger; the
		   clone's tap target is 44.5px tall for accessibility, so the same absolute
		   position is a smaller relative offset. */
		top: calc(100% + 3.2px);
		width: 216.5px;
		min-width: 0;
		height: auto;
		overflow: visible;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: #1d1d36;
		z-index: 99999;
		/* No fade: the source toggles visibility outright. Core's `opacity .1s
		   linear` is a WordPress invention that the source does not have. */
		opacity: 1;
		visibility: hidden;
		transition: visibility 0s linear 1s;
	}
	/* No :focus-within here. Tabbing onto the "Eğitimler" link does NOT open the
	   source's panel — the source puts a hidden toggle button after the link and opens
	   on activation, so a keyboard user meets link, toggle, Blog. Opening on
	   :focus-within instead walked the clone's user through all seven submenu links and
	   left the panel hanging open, a tab order the source does not have. */
	.igsa-header__nav .wp-block-navigation .has-child.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
	.igsa-header__nav .wp-block-navigation .has-child.wp-block-navigation-submenu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		visibility: visible;
		width: 216.5px;
		min-width: 0;
		height: auto;
		overflow: visible;
		transition-delay: 0.2s;
	}
	/* Activating the toggle opens with no delay: a 200ms lag on a deliberate press
	   reads as an unresponsive control, and the 200ms is a hover-intent delay that has
	   no meaning for a keyboard press. */
	.igsa-header__nav .wp-block-navigation .has-child.wp-block-navigation-submenu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}
	/* Escape closes at once. The 1s hold is hover intent — it exists so the pointer can
	   cross the gap into the panel — and has no meaning for a deliberate keyboard
	   dismissal, which the source also closes immediately. Scoped to the focused
	   toggle so the pointer path keeps its hold. */
	.igsa-header__nav .wp-block-navigation .has-child.wp-block-navigation-submenu:not(:hover) .wp-block-navigation-submenu__toggle[aria-expanded="false"]:focus ~ .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}
	/* Hovering a DIFFERENT top-level item drops the 1s hold, as on the source. */
	.igsa-header__nav .wp-block-navigation__container:has(> .wp-block-navigation-item:hover) > .has-child.wp-block-navigation-submenu:not(:hover) > .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}

	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 0; }
	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		/* The 44px tap-target floor above would make these rows 44px; the source's
		   are 32. A 216.5x32 row is still well over WCAG 2.5.8's 24x24 minimum,
		   so matching the source costs nothing here. */
		min-height: 0;
		/* 5px on the row + 8.5px on the label, exactly as the source nests them */
		padding: 0 5px;
		font-size: 17px;
		font-weight: 200;
		line-height: 32px;	/* the line box IS the 32px row */
		letter-spacing: normal;
		text-align: center;
		color: #fff;
		transition: color 0.4s ease;
	}
	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content > span,
	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label {
		padding: 0 8.5px;
		white-space: nowrap;
	}
	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.igsa-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		color: #9b3314;
	}
}

/* Course/blog cards: content is always visible (NOT hover-only, Wix defect fix). */
.igsa-card,
.wp-block-post-template > li {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-block-post-template.is-layout-grid > li { overflow: hidden; }
.wp-block-post-template > li:hover,
.wp-block-post-template > li:focus-within {
	box-shadow: 0 6px 20px rgba(29, 29, 54, 0.12);
}
.wp-block-post-template > li .wp-block-post-title { padding: 0 1rem; margin-top: 1rem; }
.wp-block-post-template > li .wp-block-post-excerpt { padding: 0 1rem 1.25rem; color: var(--wp--preset--color--muted); }

/* ----------------------------------------------------------------------------
   Mobile overlay navigation — measured on the source's open phone menu
   (#MENU_AS_CONTAINER, 2026-08-09):

     scrim   0,0 320x657   rgba(29,29,54,.6)
     panel   101,0 219x657 white, flush right
     item    111,46 189x42 — 42px pitch, first at y46
     label   16px/700 navy #1D1D36, right-aligned to x290
     current #8B0000

   The clone had a full-width NAVY panel with white 18px/200 centred labels, and
   — worse — its course submenu inherited the body's #26272B, i.e. dark grey on
   dark navy at a contrast ratio of about 1.05:1. Those seven links were on
   screen and effectively invisible.
   -------------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(29, 29, 54, 0.6) !important;
	padding: 0 !important;
	/* core lays this container out as a COLUMN, so `justify-content: flex-end`
	   pushed the panel to the bottom instead of the right, and a flex-basis on
	   the panel set its height. */
	display: flex !important; flex-direction: row !important;
	justify-content: flex-end !important; align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	background: #fff;
	flex: 0 0 219px; width: 219px; max-width: 219px;
	margin-left: auto !important; margin-right: 0 !important;
	min-height: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 37px 10px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	min-height: 42px; justify-content: flex-end; margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 16px; font-weight: 700; line-height: 42px; padding: 0;
	color: var(--wp--preset--color--navy);
	width: 100%; text-align: right;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] {
	color: #8b0000;
}
/* Course submenu: the source's phone menu does not expand it, so the clone
   exposes more than the source does. Keeping those links reachable is worth the
   difference — but they must be legible, which means the same navy on white as
   their parents, indented rather than recoloured. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent; border: 0; padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	font-weight: 400; padding-right: 12px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--navy); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { fill: var(--wp--preset--color--navy); }

/* ============================================================================
   Footer — 1:1 with the source (measured on the live site at 1440px, 2026-08-06):
   a 522px burgundy band, 21px top padding, three columns whose left edges land at
   x=56 / 447 / 1081. The brand column is 210px wide, so its two lines wrap exactly
   as they do on the source; the "Hızlı Menü" and "İletişim" headings sit 75px below
   the brand text, and the quick menu splits into two sub-columns 357px apart.

   The credit line sits on its own full-bleed WHITE strip below the burgundy
   band, in black — measured on the source 2026-08-08.
   ========================================================================== */
.igsa-footer {
	padding: 0;
	font-family: var(--wp--preset--font-family--poppins); font-weight: 200;
	position: relative;
}
.igsa-footer a { color: var(--wp--preset--color--base); text-decoration: underline; }
.igsa-footer__cols p { margin: 0; }
.igsa-footer h1, .igsa-footer h2, .igsa-footer h3 { color: #fff; }

/* Letter-spacing.  The source tracks most of its footer out by 0.05em and the
   clone was tracking nothing, which is why footer labels measured up to 13%
   narrower than the source's for the same words at the same size — the single
   largest cause of text-geometry failures in the 2026-08-09 run (2,928 of
   11,107). Values verified per run against the live source: 0.7px @14, 0.75px
   @15, 0.8px @16 — i.e. exactly 0.05em — and 0 on the four runs listed below,
   which Wix authored separately and really does render untracked. */
.igsa-footer__brandname,
.igsa-footer__h,
.igsa-footer__contact p,
.igsa-footer .wp-block-navigation-item__content { letter-spacing: .05em; }
/* Untracked on the source: the phone block, the last legal link and the credit
   line. Confirmed on both locales (TR "Mesafeli Satış Sözleşmesi" / EN
   "Distance Sales Agreement" are the same 7th menu item). */
.igsa-footer__contact p.igsa-footer__phones,
.igsa-footer .wp-block-navigation-item:nth-child(7) .wp-block-navigation-item__content,
p.igsa-footer-copyright { letter-spacing: 0; }

.igsa-footer__h { font-size: 16px; font-weight: 700; margin: 0 0 27px; line-height: normal; color: #fff; }
.igsa-footer__brandname { font-size: 14px; line-height: 37.8px; }
/* The label's width is spacing the source types as characters, not CSS: its
   markup is `Gsm:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;` and
   `Telefon: &nbsp;&nbsp; <a>…</a>`. A CSS `min-width` widened the BOX but left
   the ink at the label's own 36.7px against the source's 73.6px, and the gate
   compares inked text rects — so the two phone rows failed on every route at
   every viewport. Carrying the same characters makes the ink identical without
   any width rule, on both canvases. */
.igsa-footer__contact .igsa-footer__label { display: inline; white-space: pre-wrap; }
.igsa-footer .wp-block-navigation-item__content { text-decoration: underline; }


/* ---- desktop footer: the source's four-quarter band ------------------------
   Measured on the live source at 1024 / 1440 / 1920 (2026-08-09). The band is
   522px tall at EVERY width and its four content blocks track the viewport as
   exact eighths — brand at W/8-124, quick-menu column A at 3W/8-93, column B at
   5W/8-96, contact at 7W/8-179 — i.e. four equal quarters, each holding a
   fixed-width block centred on the quarter. Expressing that as `50% - Npx`
   inside a four-column grid reproduces it at any width and, unlike `vw`, is not
   thrown off by the scrollbar.                                                */
@media (min-width: 768px) {
	.igsa-footer { height: 522px; overflow: hidden; }
	.igsa-footer .igsa-footer__cols {
		display: grid !important;
		grid-template-columns: repeat(4, 25%);
		max-width: none; margin: 0; width: 100%; gap: 0;
		align-items: start;
	}
	.igsa-footer .igsa-footer__brand,
	.igsa-footer .igsa-footer__menu,
	.igsa-footer .igsa-footer__contact { flex-basis: auto !important; padding: 0; }

	/* brand — a 210px block centred on the first quarter, text at +21/+105,
	   logo at +135, payment badges at +254 */
	.igsa-footer .igsa-footer__cols > .igsa-footer__brand { margin-left: calc(50% - 124px) !important; width: 210px; padding-top: 21px !important; }
	.igsa-footer__brand > * { max-width: 210px; }
	.igsa-footer__brandname { text-align: center; }
	/* 0.5px, not 9px: the source overlaps the mark 8px into the bottom of the three-line
	   brand text (its blocks are absolutely positioned and free to overlap), painting it
	   at y1791.9 where the clone stacked it at y1800.4 — and the payment strip below
	   inherited the same 8.5px error on every route. */
	.igsa-footer__brand .igsa-footer__logo { display: block; width: 210px; height: auto; margin: 0.5px 0 0; }
	.igsa-footer__brand .igsa-footer__pay { display: block; width: 272px; max-width: 272px; height: auto; margin: 30px 0 0 2px; }

	/* quick menu — spans quarters 2 and 3; the heading sits in quarter 2 and the
	   list balances into two column boxes, one per quarter */
	.igsa-footer__menu { grid-column: span 2; padding-top: 98px !important; }
	/* 38px, not 53px: a 43.2px line box carries ~10px of half-leading above its
	   ink that the old 23px one did not, so the same gap put the first link's ink
	   15px below the source's. */
	/* 25px, re-measured 2026-08-16: at 38px the first link's ink landed 13px below
	   the source's on every route at every desktop width. */
	.igsa-footer__menu .igsa-footer__h { margin-left: calc(25% - 93px); margin-bottom: 25px; }
	/* The navigation block is a flex container whose <ul> shrink-wraps; a
	   multicol's percentages resolve against the COLUMN box, so the list has to
	   span the two quarters before `50% - 94.5px` lands on the source's x. */
	.igsa-footer__menu .wp-block-navigation { display: block !important; width: 100%; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation__container {
		display: block; width: 100%; columns: 2; column-gap: 0; font-size: 16px;
	}
	/* Pitch comes from the line box, not a margin. Each source link is its own
	   <p> with `line-height:2.7em` (=43.2px at 16px) — except the last two, which
	   Wix authored at 2.4em (=38.4px). A <p> with no margin advances by exactly
	   its own line-height, which reproduces the source's measured tops
	   (5194 → 5238 → 5281 → 5324, and 5194 → 5235 in the second column).
	   The clone's 23px line-height + 20px margin gave a 46.3px pitch, so every
	   item drifted further down the column than the source's (+6, +9, +13, +16). */
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item {
		display: block; margin: 0; break-inside: avoid;
		margin-left: calc(50% - 94.5px);
	}
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item__content {
		min-height: 0; line-height: 43.2px; padding: 0; display: inline;
	}
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item:nth-child(n+6) .wp-block-navigation-item__content {
		line-height: 38.4px;
	}
	/* The source splits the seven links 4 + 3, and both columns start on the same
	   line (Hakkımızda and Gizlilik Politikası are both at y5194). Balanced
	   columns put the break wherever the taller line boxes happen to land it —
	   after the change above that was 3 + 4 — so the split is stated. */
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item:nth-child(4) { break-after: column; }

	/* contact — a 358px block centred on the fourth quarter */
	.igsa-footer .igsa-footer__cols > .igsa-footer__contact { margin-left: calc(50% - 179px) !important; width: 358px; padding-top: 98px !important; }
	/* 25px, re-measured 2026-08-16: the address block's ink sat 6px low at 31px. */
	.igsa-footer__contact .igsa-footer__h { text-align: center; max-width: 196px; margin-bottom: 25px; }
	/* One 33px rhythm for the whole block: the source's address runs two 33px
	   lines and the phone block starts exactly one line later (y 3015.48 →
	   3081.48 = 2 x 33), so no paragraph gap. */
	/* 320px, not the source's measured 302px ink width: the email address inks
	   302.25px once the 0.05em tracking above is applied, so a 302px box wraps
	   it. The source's own contact block is 358px wide. */
	.igsa-footer__contact p { max-width: 320px; font-size: 15px; line-height: 33px; }

	/* the credit line sits on a white strip across the bottom of the band */
	p.igsa-footer-copyright {
		position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
		height: 67px; box-sizing: border-box; background: #fff; color: #000;
		font-size: 13px; text-align: center;
		/* Deliberately NOT a flex container. Flex blockifies every child and drops
		   the whitespace between them, so "Saklıdır. Zum Kreatif tarafından" rendered
		   as "Saklıdır.Zum Kreatiftarafından" — the paragraph's two text nodes and its
		   <a> became three flex items. Centring is done with padding instead: the
		   strip is 67px and the credit line's box is 19.5px at 13px/normal, and the
		   source sits it 3.5px above the exact middle. */
		display: block;
		padding: 20.25px 1rem 0;
	}
}
/* The source leaves the credit line's line-height at `normal` on BOTH canvases;
   the clone inherited the body's 1.65, which made it 21.45px at 13px (desktop)
   and 19.8px at 12px (phone) and stretched the two-line phone version by 5px. */
p.igsa-footer-copyright { line-height: normal; }
.igsa-footer-copyright a { color: #000; }

@media (max-width: 767.98px) {
	.igsa-footer { padding: 21px 1.25rem 0; }
	.igsa-footer .igsa-footer__cols { max-width: none; margin-inline: auto; align-items: flex-start; }
	.igsa-footer__menu, .igsa-footer__contact { padding-top: 2rem; }
	.igsa-footer__brand { max-width: none; text-align: center; }
	.igsa-footer__brand .igsa-footer__logo, .igsa-footer__brand .igsa-footer__pay { margin-inline: auto; max-width: 100%; display: block; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation__container { column-gap: 2rem; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item { display: block; margin-bottom: 19px; }
	.igsa-footer__contact p { font-size: 15px; line-height: 33px; }
	p.igsa-footer-copyright {
		margin: 3rem -1.25rem 0; padding: 27px 1rem; background: #fff; font-size: 13px; color: #000;
	}
}

/* ============================================================================
   Home hero slideshow — the source draws it on a fixed 1440x623 canvas: each
   text run sits at an absolute y in Rubik (Medium for the light runs, Bold for
   the heavy ones), and the photo is composited at a per-slide opacity over a
   per-slide colour underlay. Both are reproduced here.

   `--s` is a "source pixel": 1px at a 1440px band, shrinking proportionally
   below that, so the whole canvas scales without re-laying-out. Below 1024px
   the absolute canvas would be unreadable, so the runs fall back to a centred
   stack with a readable font floor (the source's own phone view is a zoomed
   320px canvas — the fixed-canvas defect this rebuild corrects).
   ========================================================================== */
.igsa-slideshow {
	position: relative; width: 100%; overflow: hidden; background: #1d1d36;
	container-type: inline-size;
	--s: min(1px, 0.06944cqw);	/* 100 / 1440 */
}
.igsa-slides { position: relative; }
.igsa-slide {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	transition: opacity 0.6s ease;
	display: flex; align-items: center; justify-content: center;
}
.igsa-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.igsa-slide:not(.is-active) { pointer-events: none; }

/* Photo layer: the source paints a solid colour and lays the photo over it at a
   set opacity, which is what gives each slide its own wash. */
.igsa-slide__bg {
	position: absolute; inset: 0; z-index: 0; background-color: var(--ul);
}
.igsa-slide__bg::after {
	content: ""; position: absolute; inset: 0;
	background-image: var(--bg); background-size: cover; background-position: center;
	opacity: var(--op);
}
/* The source serves a separate crop per device class rather than scaling one file:
   320x721 on the phone canvas against 1440x623 on the desktop one. Using the desktop
   file here would `cover` a tall narrow band with a wide short photo and zoom into
   its middle. `--bgm` is the source's own phone crop; it falls back to `--bg`. */
@media (max-width: 767.98px) {
	.igsa-slide__bg::after { background-image: var(--bgm, var(--bg)); }
}
.igsa-slide__inner {
	position: relative; z-index: 1; text-align: center; width: 100%;
	box-sizing: border-box;
}
.igsa-slide__line {
	margin: 0;
	font-family: var(--wp--preset--font-family--rubik);
	/* the source's w400 runs are set in Rubik Medium, its w700 runs in Rubik Bold */
	font-weight: var(--fw);
	font-synthesis-weight: none;
	color: var(--c);
	font-size: max(15px, min(calc(var(--fs) * 1px), calc(var(--fs) * var(--s))));
	line-height: var(--lh);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.igsa-slide__line[style*="--fw:400"] { font-weight: 500; }
/* The four big display runs are Helvetica Bold on the source. Helvetica is a
   licensed Monotype face that cannot be redistributed with this site, so the
   platform Helvetica/Arial is used — same metrics, same look on macOS/Windows. */
.igsa-slide__line.is-helv { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; }
.igsa-slide__line.is-mont { font-family: var(--wp--preset--font-family--poppins); font-weight: 700; }

/* 1980 | 46 yıl | 2026 — a fixed-width row with the middle value in a burgundy chip. */
.igsa-slide__years {
	display: flex; align-items: baseline; justify-content: space-between;
	width: min(285px, calc(285 * var(--s))); margin-inline: auto;
}
.igsa-slide__chip {
	/* measured on the source: the chip is Rubik Medium (500), not bold */
	background: var(--wp--preset--color--burgundy); color: #fff; font-weight: 500;
	padding: 0.08em 0.5em; text-shadow: none;
}

/* "Arayın" / "Detaylar": 161x27 burgundy plates stacked 4px apart, label set in
   the owners' own uploaded face (see fonts.css). */
.igsa-slide__cta { display: flex; flex-direction: column; align-items: center; gap: max(4px, calc(4 * var(--s))); }
.igsa-slide__cta a {
	background: var(--wp--preset--color--burgundy); color: #fff; text-decoration: none;
	font-family: "IGSA Button", var(--wp--preset--font-family--poppins), sans-serif;
	font-weight: 700; font-size: max(14px, min(19px, calc(19 * var(--s))));
	line-height: 1.4;
	width: min(161px, calc(161 * var(--s))); min-height: max(27px, calc(27 * var(--s)));
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	/* The source draws a 2px #800020 border on the #800020 fill — invisible at rest, and
	   the reason the hovered button reads as a burgundy outline once the fill goes white.
	   border-box so adding it does not change the measured 161x27 box. */
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--burgundy); border-radius: 0;
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
/* Measured on the source's hero CTA: fill #800020 -> #FFFFFF with the label going
   #FFFFFF -> #800020 and the 2px border staying burgundy, over
   `border-color, background-color 0.4s`. The clone darkened the fill to #5C0017 instead,
   left the label white and had no transition at all. */
@media (hover: hover) {
	.igsa-slide__cta a:hover { background: #fff; color: var(--wp--preset--color--burgundy); }
}
@media (hover: none) {
	.igsa-slide__cta a:active { background: #fff; color: var(--wp--preset--color--burgundy); }
}
.igsa-slide__cta a:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }

/* The closing slide carries the İGSA mark and the LAAD logo in the band's top corners. */
.igsa-slide__mark { position: absolute; z-index: 2; display: block; }
.igsa-slide__mark img { display: block; width: 100%; height: auto; }
.igsa-slide__mark.is-igsa { width: max(42px, calc(var(--w) * var(--s))); height: auto; }
.igsa-slide__mark.is-laad { width: max(28px, calc(var(--w) * var(--s))); }

/* ---- desktop: the exact 1440x623 canvas ----------------------------------
   The source does NOT shrink this canvas below 1440: measured on the live site
   2026-08-09, the same slide sets "2026 - 2027" at 32px and stands 623px tall
   at a 768, 1024 and 1920 viewport alike, and its absolutely-placed runs stay
   the same distance from the band's CENTRE. So `--s` is pinned to 1px here,
   and the off-centre runs are expressed as an offset from the centre of the
   1440px canvas they were measured on rather than from its left edge.        */
@media (min-width: 768px) {
	.igsa-slideshow { --s: 1px; }
	.igsa-slide__inner { height: 623px; }
	.igsa-slide__line,
	.igsa-slide__cta { position: absolute; top: calc(var(--y) * 1px); left: 0; right: 0; }
	.igsa-slide__line.is-offset {
		left: 50%; right: auto;
		margin-left: calc((var(--cx) - 720) * 1px);
		transform: translateX(-50%); white-space: nowrap;
	}
	.igsa-slide__line[style*="--mw:"] { max-width: calc(var(--mw) * 1px); }
	/* The row carries .igsa-slide__line too, so it is already absolutely placed
	   and centred by margin-inline:auto — adding left:50%+translateX here
	   centred it twice and pushed it 217px right of the source. */
	.igsa-slide__mark { top: calc(var(--y) * 1px); left: 50%; margin-left: calc((var(--x) - 720) * 1px); }
	/* A heading the source spreads over several runs: a transparent band over
	   the canvas rows it occupies, so its children keep absolute placement. */
	.igsa-slide__hgroup {
		position: absolute; left: 0; right: 0;
		top: calc(var(--y) * 1px); height: calc(var(--gh) * 1px);
		margin: 0; font: inherit; color: inherit;
	}
}
.igsa-slide__hgroup { margin: 0; font: inherit; color: inherit; }

/* ---- phone: the source's SECOND canvas, 320x721 ---------------------------
   Below 768 both sides lay out on a `width=320` canvas that the browser scales
   to the device, so these are the source's own phone numbers (--my/--mfs/--mlh
   /--mcx, emitted per run by lib-hero.php from hero-mobile.json). Runs without
   measurements fall back to the centred stack.                                */
@media (max-width: 767.98px) {
	.igsa-slideshow { --s: 1px; }
	.igsa-slide__inner {
		position: relative; height: 721px; padding: 0; min-height: 0;
		display: block;
	}
	.igsa-slide__line.has-m,
	.igsa-slide__cta {
		position: absolute; left: 0; right: 0;
		top: calc(var(--my, var(--y)) * 1px);
	}
	.igsa-slide__line.has-m {
		font-size: calc(var(--mfs) * 1px);
		line-height: var(--mlh);
		max-width: none;
		margin-left: calc((var(--mcx) - 160) * 1px);
	}
	.igsa-slide__line.has-m.igsa-slide__years { width: calc(var(--mrw) * 1px); margin-inline: auto; }
	.igsa-slide__inner > .igsa-slide__line:not(.has-m) { position: static; text-align: center; }
	/* the group's runs are absolutely placed, so the heading itself needs a box
	   of its own or it is invisible to assistive tech and to the verifier */
	.igsa-slide__hgroup { position: absolute; left: 0; right: 0; top: 0; height: 721px; pointer-events: none; }
	.igsa-slide__hgroup > * { pointer-events: auto; }
	.igsa-slide__cta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
	.igsa-slide__cta a { min-height: 27px; width: 161px; font-size: 18px; }
	.igsa-slide__mark { position: absolute; }
	.igsa-slide__mark.is-igsa { left: 28px; top: 57px; width: 50px; }
	.igsa-slide__mark.is-laad { left: 252px; right: auto; top: 54px; width: 36px; }
}

/* Arrows: plain white chevrons inset ~7% from each edge (matches source: 25x52,
   no background plate). The source slideshow has no dot indicators. */
.igsa-slideshow__prev, .igsa-slideshow__next {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	background: transparent; color: #fff; border: 0; cursor: pointer; padding: 0;
	width: 25px; height: 52px; line-height: 0;
	display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)); opacity: 1;
}
.igsa-slideshow__prev svg, .igsa-slideshow__next svg { display: block; width: 25px; height: 49px; }

/* Measured: the source insets each chevron 100px from the band edge at 1440. */
.igsa-slideshow__prev { left: 100px; } .igsa-slideshow__next { right: 100px; }
.igsa-slideshow__prev:focus-visible, .igsa-slideshow__next:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
@media (max-width: 767.98px) {
	.igsa-slideshow__prev { left: 8px; right: auto; }
	.igsa-slideshow__next { right: 8px; left: auto; }
	.igsa-slideshow__prev svg, .igsa-slideshow__next svg { width: 18px; height: 35px; }
}

/* ============================================================================
   Programme cards — 1:1 with the source: a 299x297 square photo with a solid
   burgundy 131px caption block DIRECTLY BELOW it (not an overlay), label in
   Poppins SemiBold 30px white, centred. Grid: 3 x 299px, 26px gutters, 949px
   wide and centred; an incomplete last row centres itself (flex, like source).
   The whole card is one focusable keyboard-operable link (accessibility fix).
   ========================================================================== */
.igsa-programs {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 58px 26px;
	max-width: 949px !important;
	margin-inline: auto;
}
.igsa-programs > .igsa-card { flex: 0 0 299px; max-width: 299px; }
.igsa-card {
	position: relative;
	overflow: hidden;
	border: 0;
	background: var(--wp--preset--color--burgundy);
	isolation: isolate;
	padding: 0;
}
.igsa-card > figure.wp-block-image { margin: 0; line-height: 0; }
.igsa-card > figure.wp-block-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.igsa-card > figure.wp-block-image a { display: block; }

.igsa-card .igsa-card__caption {
	position: static;
	background: var(--wp--preset--color--burgundy);
	min-height: 131px;
	/* The source's title box is shrink-to-fit at 269px inside the 299px card, which
	   "Desen / Yağlı Boya" fills exactly — at a 15px inset our Poppins is a hair wider
	   and wraps it. 12px leaves headroom so it stays on one line like the source; the
	   titles are centred, so the wider box is not visible. */
	padding: 2px 12px 10px;
	pointer-events: none;
}

/* ---- desktop: the source's card grid is an absolutely-placed canvas --------
   Measured on the live source at 1440px, 2026-08-09. The eight cards are NOT a
   tidy 3-column grid: the middle card of row 1 sits 14px lower than its
   neighbours, the cards are 296–299px wide, and rows 2 and 3 tuck their caption
   22px up into the photograph while row 1 does not. A uniform flex grid cannot
   express that, and being 36px out on a row shifts everything below it, so each
   card is placed at its measured offset inside a 948x1414 canvas whose left
   edge is 6px inside the 980px page canvas (centre x=710 at a 1440 viewport).
   --cx/--cy/--cw place the photo, --capx/--capy/--capw the caption bar.        */
@media (min-width: 768px) {
	.igsa-programs {
		display: block !important;
		position: relative;
		width: 948px; height: 1414px;
		max-width: none !important;
		margin-inline: auto;
		transform: translateX(-10px);	/* the source's grid is 10px left of centre */
	}
	.igsa-programs > .igsa-card {
		position: absolute;
		left: var(--cx); top: var(--cy);
		/* The parent's block gap lands as a 16px margin-top on every card after the
		   first, and on an absolutely-positioned box that ADDS to `top`. Every card
		   and caption except the first was therefore 16px below its measured slot,
		   and being 16px out on a row shifts the whole page below it. */
		margin: 0 !important;
		width: var(--cw); max-width: none;
		height: calc(var(--capy) + 131px);
		background: none;
	}
	.igsa-programs > .igsa-card > figure.wp-block-image img {
		width: var(--cw); height: 297px; aspect-ratio: auto;
	}
	.igsa-programs > .igsa-card .igsa-card__caption {
		position: absolute;
		left: var(--capx, 0px); top: var(--capy);
		margin: 0 !important;
		width: var(--capw, var(--cw));
		height: 131px;
		/* The source does NOT centre the title in the 131px plate — each plate has its
		   own hand-set inset, from 2px on "İç Mimarlık" to 21px on "Sertifikalı Resim".
		   Centring put every one of them 25–43px too low. `--capt` carries the measured
		   inset and `--caplh` the line box the source gives that particular title. */
		display: flex; flex-direction: column; justify-content: flex-start;
		padding-top: var(--capt, 1px);
	}
	.igsa-programs > .igsa-card .wp-block-heading a { line-height: var(--caplh, 1.2); }
	/* ---- hover, transcribed from the source (tools/interaction-probe.mjs, 2026-08-16)
	   The source does four things at once, and the clone previously did none of them:
	     the CARD scales to 0.9 and lifts to z-index 1      (all .4s ease-in-out)
	     the burgundy PLATE scales to 1.45 vertically       (all .4s ease-in-out)
	     the TITLE fades out and lifts 1.67px               (all .2s ease-out)
	     the HINT and the CTA fade in                       (all .4s ease-in-out)
	   The plate has to scale without stretching the words inside it, so it is painted
	   by a ::before rather than by the caption's own background. The card stops
	   clipping so the plate can grow past its nominal bottom edge, exactly as the
	   source's does; nothing else in the card overflows now that the photo no longer
	   zooms. Keyboard focus does the same, so the disclosure works without a pointer. */
	.igsa-programs > .igsa-card {
		overflow: visible;
		transition: transform 0.4s ease-in-out;
	}
	.igsa-programs > .igsa-card:hover,
	.igsa-programs > .igsa-card:focus-within { transform: scale(0.9); z-index: 1; }

	.igsa-programs > .igsa-card .igsa-card__caption { background: transparent; }
	.igsa-programs > .igsa-card .igsa-card__caption::before {
		content: ""; position: absolute; inset: 0; z-index: 0;
		background: var(--wp--preset--color--burgundy);
		transition: transform 0.4s ease-in-out;
	}
	.igsa-programs > .igsa-card:hover .igsa-card__caption::before,
	.igsa-programs > .igsa-card:focus-within .igsa-card__caption::before { transform: scaleY(1.45); }
	.igsa-programs > .igsa-card .igsa-card__caption > * { position: relative; z-index: 1; }

	.igsa-programs > .igsa-card .wp-block-heading {
		transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s;
	}
	.igsa-programs > .igsa-card:hover .wp-block-heading,
	.igsa-programs > .igsa-card:focus-within .wp-block-heading {
		opacity: 0; visibility: hidden; transform: translateY(-1.67px);
	}

	/* The hint and the CTA are laid out at the insets the source gives each card, and
	   cross-fade rather than appearing: `display` cannot transition. */
	.igsa-programs > .igsa-card .igsa-card__hint,
	.igsa-programs > .igsa-card .igsa-card__cta {
		display: block; position: absolute; left: 0; right: 0; margin: 0;
		opacity: 0; visibility: hidden;
		transition: opacity 0.4s ease-in-out, visibility 0s;
	}
	.igsa-programs > .igsa-card .igsa-card__hint { top: var(--caphy, 9px); }
	.igsa-programs > .igsa-card .igsa-card__cta  { top: var(--capcy, 128px); }
	.igsa-programs > .igsa-card:hover .igsa-card__hint,
	.igsa-programs > .igsa-card:focus-within .igsa-card__hint,
	.igsa-programs > .igsa-card:hover .igsa-card__cta,
	.igsa-programs > .igsa-card:focus-within .igsa-card__cta { opacity: 1; visibility: visible; }
	/* Two of the source's cards behave differently: their title doubles as the
	   description, so instead of swapping it for a helper line the source keeps it and
	   slides it up to make room for the button. Measured: -65px and -68.33px. */
	.igsa-programs > .igsa-card:nth-child(7) .igsa-card__hint,
	.igsa-programs > .igsa-card:nth-child(3) .igsa-card__hint { display: none; }
	.igsa-programs > .igsa-card:nth-child(7) .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(3) .wp-block-heading {
		transition: transform 0.4s ease-in-out;
	}
	.igsa-programs > .igsa-card:nth-child(7):hover .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(7):focus-within .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(3):hover .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(3):focus-within .wp-block-heading {
		opacity: 1; visibility: visible;
	}
	.igsa-programs > .igsa-card:nth-child(7):hover .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(7):focus-within .wp-block-heading { transform: translateY(-65px); }
	/* The 2D & 3D card also nudges its title 1.11px right — measured
	   matrix(1,0,0,1,1.11111,-68.3333), i.e. 1px of visible travel once the card's
	   0.9 scale is applied. Small, but it is what the source does. */
	.igsa-programs > .igsa-card:nth-child(3):hover .wp-block-heading,
	.igsa-programs > .igsa-card:nth-child(3):focus-within .wp-block-heading { transform: translate(1.11px, -68.33px); }

	/* Card 7 (Güzel Sanatlara Hazırlık) does NOT shrink toward its centre like the
	   others. The source counter-translates its photo and its plate so both stay
	   anchored where they were while the card scales — measured
	   matrix(1,0,0,1,-16.6667,-25.5556) on the photo and
	   matrix(1,0,0,1.45,-16.6667,-2.29885) on the plate. The photo's painted box moves
	   only 886->885.15 x and 226.48->225.88 y, i.e. it stays put and shrinks in place.
	   Without this the clone's photo slid ~15px left and ~23px up on hover. */
	.igsa-programs > .igsa-card:nth-child(7) > figure.wp-block-image {
		transition: transform 0.4s ease-in-out;
	}
	.igsa-programs > .igsa-card:nth-child(7):hover > figure.wp-block-image,
	.igsa-programs > .igsa-card:nth-child(7):focus-within > figure.wp-block-image {
		transform: translate(-16.67px, -25.56px);
	}
	.igsa-programs > .igsa-card:nth-child(7):hover .igsa-card__caption::before,
	.igsa-programs > .igsa-card:nth-child(7):focus-within .igsa-card__caption::before {
		/* translate BEFORE scale: the source's matrix is (1,0,0,1.45,-16.6667,-2.29885),
		   i.e. the offset is not multiplied by the 1.45. Writing scaleY() first would
		   scale it to -3.33 and drop the plate a pixel low. */
		transform: translate(-16.67px, -2.29885px) scaleY(1.45);
	}

	/* DOM order is the source's phone order, so each card's DESKTOP slot is
	   assigned here: 1>1, 2>4, 3>8, 4>2, 5>5, 6>6, 7>3, 8>7. */
	/* --capt / --caplh transcribed from the source at 1440px on 2026-08-16: plate top
	   -> painted title top was 2, 9, 16, 21, 17, 16, 17 and 18px, over line boxes of
	   normal, normal, 36, normal, 34.8, 36, 34.8 and 20.3px respectively. */
	.igsa-programs > .igsa-card:nth-child(1) { --cx: 0px;   --cy: 0px;    --cw: 299px; --capy: 296px; --capt: 1px;    --caplh: normal;  --capcy: 125px; --caphy: -13px; }
	.igsa-programs > .igsa-card:nth-child(4) { --cx: 321px; --cy: 14px;   --cw: 299px; --capy: 297px; --capt: 8px;    --caplh: normal;  --capcy: 127px; --caphy: -3px; }
	.igsa-programs > .igsa-card:nth-child(7) { --cx: 650px; --cy: 0px;    --cw: 298px; --capy: 297px; --capt: 19.5px; --caplh: 36px;  --capcy: 125px; }
	.igsa-programs > .igsa-card:nth-child(2) { --cx: 1px;   --cy: 522px;  --cw: 298px; --capy: 275px; --capx: -1px; --capw: 299px; --capt: 20px;   --caplh: normal;  --capcy: 133px; --caphy: 9px; }
	.igsa-programs > .igsa-card:nth-child(5) { --cx: 325px; --cy: 522px;  --cw: 298px; --capy: 275px; --capx: -1px; --capw: 299px; --capt: 19.6px; --caplh: 34.8px;  --capcy: 129px; --caphy: 13px; }
	.igsa-programs > .igsa-card:nth-child(6) { --cx: 652px; --cy: 522px;  --cw: 296px; --capy: 275px; --capt: 19.5px; --caplh: 36px;  --capcy: 157px; --caphy: 39px; }
	.igsa-programs > .igsa-card:nth-child(8) { --cx: 163px; --cy: 1008px; --cw: 299px; --capy: 275px; --capt: 19.6px; --caplh: 34.8px;  --capcy: 129px; --caphy: 13px; }
	.igsa-programs > .igsa-card:nth-child(3) { --cx: 503px; --cy: 1008px; --cw: 299px; --capy: 275px; --capt: 27.9px; --caplh: 20.3px;  --capcy: 130px; }
}
.igsa-card .wp-block-heading { margin: 0; text-align: center; }
.igsa-card .wp-block-heading a {
	color: #fff; text-decoration: none;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 30px; font-weight: 600; line-height: 1.2;
	display: block; pointer-events: auto;
}
/* The source authors three of the home cards a point smaller. */
.igsa-card--t29 .wp-block-heading a { font-size: 29px; }
.igsa-card .wp-block-heading a::after { content: ""; position: absolute; inset: 0; }
.igsa-card .wp-block-heading a:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
/* Now a <span> inside the card's <h2> (the source keeps it in the heading), so
   it has to be re-established as its own centred block in its own type. */
.igsa-card__sub {
	display: block; margin: 0.2rem 0 0; color: #fff;
	font-size: 14px; font-weight: 600; line-height: 20.3px; text-align: center; opacity: 1;
	font-family: var(--wp--preset--font-family--poppins);
}
.igsa-card .wp-block-heading .igsa-card__sub { text-transform: none; }
@media (max-width: 767.98px) {
	.igsa-programs { gap: 40px 20px; }
	.igsa-programs > .igsa-card { flex: 0 0 min(299px, 86vw); max-width: min(299px, 86vw); }
}

/* ============================================================================
   "Akademiden Kareler" band — 18 uniform 320x320 tiles, 3 columns, 10px
   gutters, 980px wide, edge-to-edge with no frames (matches the source).
   ========================================================================== */
.igsa-kareler {
	display: grid !important;
	grid-template-columns: repeat(3, 320px);
	justify-content: center;
	gap: 10px;
	max-width: 980px !important;
	margin-inline: auto;
	/* The source's gallery canvas sits 1px right of the 980px page canvas. Only where
	   there is room for it: on the 980px tablet canvas the grid already fills the
	   canvas exactly, and the extra pixel made the layout 981px wide. */
	transform: translateX(var(--igsa-kareler-nudge, 0px));
}
@media (max-width: 767.98px) {
	.igsa-kareler {
		grid-template-columns: repeat(3, 1fr);
		/* the source's phone gallery starts at y5038.4; the clone's was 8.5px lower */
		transform: translateY(-8.5px);
	}
}
.igsa-kareler figure.wp-block-image { margin: 0; line-height: 0; }
.igsa-kareler figure.wp-block-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: none; padding: 0; }
/* Gallery band captions stay white on the burgundy background. */
.has-burgundy-background-color .wp-element-caption { color: #fff; opacity: 0.9; font-size: 0.9rem; }
/* Measured on the source: the "Akademiden Kareler" heading occupies a 72px line box
   and is followed by exactly 24px before the gallery grid. The newsletter heading is
   the same 60px type but sits in a 90px line box with no gap after it, so its values
   are set on the newsletter band rather than folded into one compromise here. */
.igsa-section-title { font-size: 60px; font-weight: 600; line-height: 72px; margin: 0 0 24px; }
@media (max-width: 767.98px) { .igsa-section-title { font-size: clamp(30px, 6.6vw, 60px); line-height: 1.2; margin-bottom: 32px; } }

/* ============================================================================
   Newsletter band ("E-MAIL LİSTEMİZE KAYDOLUN") — white background, 60px navy
   heading, 22px bold sub-line, then a 760x55 field butted against a 202x55
   burgundy "Kaydol" button (962px total, centred) exactly like the source.
   ========================================================================== */
.igsa-newsletter { background: #fff; }
/* Measured on the source: 60px heading in a 90px line box with nothing after it,
   then a 22px sub-line in a 33px box followed by 48px, then the form, whose own
   first row sits 7px in. Reproducing those four numbers is what puts the field
   and its label on the source's baselines. */
.igsa-newsletter .igsa-section-title { color: var(--wp--preset--color--navy); line-height: 90px; margin-bottom: 0; }
.igsa-newsletter__sub { font-size: 22px; font-weight: 700; line-height: 33px; color: var(--wp--preset--color--navy); margin: 0 0 48px; }
.igsa-newsletter .wpcf7, .igsa-newsletter form { max-width: 962px !important; width: 100%; margin-inline: auto; }
/* The source's stack, measured: sub-line box, 48px, form box, 7px, label box (16px)
   9px, then the 55px field row. The 48px lives on the form rather than on the
   sub-line because WordPress's constrained-layout rules set `margin-block-end: 0`
   on the sub-line with a specificity this file should not have to fight. */
.igsa-newsletter .wpcf7 { margin-top: 48px; }
/* flow-root, or the label's 7px top margin collapses straight through the form
   and out of the layout, taking the field row 7px up with it. */
.igsa-newsletter form { display: flow-root; }
.igsa-newsletter form > label { margin-top: 7px; margin-bottom: 9px; display: block; }
.igsa-newsletter .igsa-nl-row { display: flex; align-items: stretch; gap: 0; width: 100%; }
.igsa-newsletter .igsa-nl-row br { display: none; }
.igsa-newsletter .igsa-nl-row .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; display: block; }
.igsa-newsletter .igsa-nl-row .wpcf7-form-control-wrap input { width: 100%; }
.igsa-newsletter p { margin: 0; }
.igsa-newsletter label { display: block; font-size: 16px; font-weight: 200; color: var(--wp--preset--color--navy); margin-bottom: 6px; }
.igsa-newsletter input[type="email"], .igsa-newsletter input[type="text"] {
	flex: 1 1 auto; min-width: 0; height: 55px; box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--burgundy); border-radius: 0;
	padding: 3px 3px 3px 15px; font: inherit; font-size: 16px; background: #fff;
	color: var(--wp--preset--color--burgundy);
}
.igsa-newsletter .wpcf7-spinner { display: none; }
.igsa-newsletter input[type="submit"], .igsa-newsletter button[type="submit"] {
	flex: 0 0 202px; width: 202px; height: 55px;
	background: var(--wp--preset--color--burgundy); color: #fff;
	border: 1px solid var(--wp--preset--color--navy); border-radius: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins); font-size: 16px; font-weight: 200;
}
/* A CF7 submit never carries .wp-element-button, so the token cannot reach it. */
@media (hover: hover) {
	.igsa-newsletter input[type="submit"]:hover, .igsa-newsletter button[type="submit"]:hover {
		background: #fff; color: #8b0000; border-color: #8b0000;
	}
}

.igsa-newsletter .wpcf7-response-output { max-width: 962px; margin-inline: auto; color: var(--wp--preset--color--navy); }
@media (max-width: 767.98px) {
	.igsa-newsletter .igsa-nl-row { flex-direction: column; }
	.igsa-newsletter input[type="submit"], .igsa-newsletter button[type="submit"] { width: 100%; flex-basis: auto; }
	.igsa-newsletter__sub { font-size: 18px; margin-bottom: 32px; }
}
.igsa-badge {
	position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
	padding: 0.2rem 0.6rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--burgundy);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Blog listing — white cards on the burgundy band (matches source). */
/* Card grid, measured on the source at 1440px (2026-08-16): three 292px cards with
   a 32px gutter, 940px total, centred - the clone had 314px cards on a 332px pitch.
   The photo is 292x195, i.e. 3:2, not the 4:3 the clone was cropping to. */
@media (min-width: 768px) {
	.igsa-blog-cards {
		display: grid !important;
		grid-template-columns: repeat(3, 292px) !important;
		gap: 32px !important;
		width: 940px; max-width: 940px !important;
		margin-inline: auto;
		justify-content: center;
	}
	/* The source's card is a fixed 545px box: a 195px photo, then the title/excerpt
	   block starting 69.5px below it, then a rule and the Wix Blog counter row. The
	   counters themselves are not reproduced (see known-differences.json - they are
	   Wix analytics with no WordPress counterpart, and inventing view counts would be
	   fabricating a record), but their space is, so everything below the grid lands on
	   the source's baselines. */
	.igsa-blog-cards > li { height: 545px; }
	/* 25px text insets, not 22 + the generic 16px title padding: the source's title and
	   excerpt run 275..517 inside a 292px card, so the box is 242 wide and the clone's
	   216 was wrapping "İç Mimarlar İçin Önemli ve Kısa Bilgi" onto a third line.
	   74.3px puts the title's ink 73px below the photo, where the source has it. */
	.igsa-blog-cards > li > .wp-block-group { padding: 74.3px 25px 0 !important; }
	.igsa-blog-cards > li .wp-block-post-title,
	.igsa-blog-cards > li .wp-block-post-excerpt { padding-left: 0; padding-right: 0; }

	/* Band geometry, measured off the source's own pixels at 1440x900 (2026-08-17):
	   the burgundy runs y395..1195 (the 800px ::before below), the first card row starts
	   at y514.5, and the band ends at y1641 so the footer meets it at y1657. The block
	   editor writes margin/padding inline, which is why these have to shout. */
	.igsa-blog-band {
		margin-top: 51px !important;
		padding-top: 119.5px !important;
		padding-bottom: 4.5px !important;
	}
}
.igsa-blog-cards > li { background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
	/* The generic card rule adds a 1px border the source does not draw, which took
	   the photo from the source's 292px to 290px on every blog card. */
	border: 0; }
.igsa-blog-cards > li .wp-block-post-featured-image { margin: 0; }
.igsa-blog-cards > li .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.igsa-blog-cards > li .wp-block-post-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; text-transform: none; }
.igsa-blog-cards > li .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
/* Hover only. The source's blog card is a click-handling <div> with no anchor inside
   it, so it has no focus state to copy; the clone uses a real link (which the link
   audit requires) and shows the standard focus ring. Underlining on :focus-within as
   well was an invention on top of that. */
/* Gated on the pointer. The source underlines a card title on hover at 1440 and does
   nothing at all on hover at 360, where its feedback is the press instead (the title
   fades to 50% opacity, reproduced with the rest of the CTA family). Ungated, a tap left
   the title underlined on touch, which the source never does. */
@media (hover: hover) {
	.igsa-blog-cards > li:hover .wp-block-post-title a,
	.igsa-blog-cards > li .wp-block-post-title a:hover { text-decoration: underline; }
}
/* The source does not touch the card's shadow on hover; the generic post-card rule
   below does, so switch it off for the blog grid. */
.igsa-blog-cards > li:hover, .igsa-blog-cards > li:focus-within { box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
/* The source shows a three-line grey excerpt under each title, cut with an
   ellipsis, above a hairline rule. */
.igsa-blog-cards__excerpt { margin: 0.9rem 0 0; }
.igsa-blog-cards__excerpt p {
	font-size: 15px; font-weight: 200; line-height: 1.5; color: #5d5d6b;
	margin: 0 0 1.1rem; padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The source runs the burgundy band behind the FIRST row of cards only. */
.igsa-blog-band { position: relative; background: transparent !important; }
.igsa-blog-band > * { position: relative; z-index: 1; }
.igsa-blog-band::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 800px;
	background: var(--wp--preset--color--burgundy); z-index: 0;
}
@media (max-width: 767.98px) { .igsa-blog-band::before { height: 100%; } }
.igsa-blog-band .wp-block-query-pagination { margin-top: 2rem; }
.igsa-blog-band .wp-block-query-pagination a, .igsa-blog-band .wp-block-query-pagination .wp-block-query-pagination-numbers { color: #fff; }

/* ============================================================================
   İletişim — 1:1 with the source: burgundy info panel beside the photo, then the
   map beside the burgundy form panel. Info headings 22px bold, body 16px, all
   centred white. Form fields are placeholder-only in two 2-up rows.
   ========================================================================== */
.igsa-contact-sub { font-size: 20px; font-weight: 200; margin: 0.5rem 0 0; }
.igsa-contact-sub.is-strong { font-weight: 700; margin-bottom: 2.4rem; }
.igsa-contact-row {
	margin-bottom: 0;
	/* the source runs both contact rows across the same 1280px band as the rest */
	position: relative; left: 50%; transform: translateX(-50%);
	/* Band width. The source does NOT clamp this to the viewport and does not cap
	   it at 1280 — measured on three independent components (about checkerboard,
	   contact row, curriculum rows), its half-width is
	       max(490px, (100vw - 160px) / 2)
	   giving 490 / 490 / 560 / 640 / 880 at 768 / 1024 / 1280 / 1440 / 1920.
	   `min(1280px, 100vw)` squeezed the halves to 384 at 768 and capped them at
	   640 from 1440 up, which is why the clone's page height moved with the
	   viewport while the source's is constant to the pixel at every width. */
	width: max(980px, calc(100vw - 160px)); max-width: none !important;
	margin-inline: 0 !important;
	gap: 0 !important;
	align-items: stretch;
}
/* `box-sizing: border-box` is the whole fix here. The columns were content-box,
   so a 50% flex basis meant 640px of CONTENT plus their padding — 720 + 640
   against a 1280 band — and the overflow was then shrunk out of both columns
   proportionally, leaving the burgundy panel 680 and the photo 600. The source
   splits the band 639/641. */
/* `.wp-block-columns >` raises specificity past WordPress's own
   `@media (max-width: 781px) .wp-block-columns:not(.is-not-stacked-on-mobile) >
   .wp-block-column { flex-basis: 100% !important }`, which stacked this row at
   768 and 780 — widths where the source still shows its two halves side by
   side (its photo is 491 wide at x489). */
.igsa-contact-row.wp-block-columns > .wp-block-column {
	flex: 1 1 50% !important; min-width: 0; margin: 0; box-sizing: border-box;
}
.igsa-contact-info { padding: 44px 40px; }
.igsa-contact-info p { font-size: 16px; line-height: 1.6; margin: 0 0 1.6rem; }
.igsa-contact-info a { color: #fff; }
.igsa-contact-h { font-size: 22px !important; font-weight: 700; margin: 0 0 0.65rem; line-height: 1.3; }
/* no inset and no content-size cap: the source's photo fills its whole 641px
   half of the 1280 band. WordPress's constrained layout was capping the figure
   at the global content-size (600px) and centring it, leaving a 40px gutter. */
.igsa-contact-photo { padding: 0 !important; }
.igsa-contact-photo figure { margin: 0 !important; height: 641px; max-width: none !important; width: 100%; }
.igsa-contact-photo img { margin: 0 !important; height: 641px; max-width: none !important; width: 100%; object-fit: cover; }
/* the source's contact photo is square — 641x641 at x719, and it is what sets
   the height of the burgundy info column beside it */
.igsa-contact-photo img { width: 100%; height: 641px; object-fit: cover; display: block; }
.igsa-contact-map { padding: 32px 44px; }
/* The source leaves a deliberate empty band between the form row and the footer
   — its content ends at y1718 and the footer begins at y2235 on a 1440 viewport.
   That 517px of scrolled space is part of the page as the visitor meets it. */
@media (min-width: 768px) {
	.igsa-contact-row + .igsa-contact-row { margin-bottom: 439px; }
}
/* The source's map is 490x591 on its 980 canvas and 280x330 on its 320 one —
   two authored sizes, not one box that overflows. */
.igsa-contact-map .igsa-map, .igsa-contact-map iframe { width: 490px; max-width: none; height: 591px; margin-inline: auto; }
/* Phone canvas: the source drops the map to 280x330 at x20. Painting the 490px
   desktop embed on a 320 canvas expanded the layout viewport to 510, so the
   whole contact page was zoomed out on every phone width. */
@media (max-width: 767.98px) {
	/* Same specificity note as the checkerboard: the desktop row now uses
	   `.igsa-contact-row.wp-block-columns > .wp-block-column`, so the phone
	   stacking has to match it or the 980px band reaches the 320 canvas. */
	.igsa-contact-row { width: auto; left: auto; transform: none; }
	.igsa-contact-row.wp-block-columns { flex-direction: column; }
	.igsa-contact-row.wp-block-columns > .wp-block-column { flex: 1 1 100% !important; }
	.igsa-contact-photo figure,
	.igsa-contact-photo img { height: auto !important; }
	.igsa-contact-map .igsa-map,
	.igsa-contact-map iframe { width: 280px; height: 330px; margin-inline: 0; }
	.igsa-contact-map { padding-left: 20px; }
}

.igsa-contact-form { padding: 52px 44px; }
.igsa-contact-formtitle { font-size: 40px !important; font-weight: 700; margin: 0 0 1.6rem; line-height: 1.2; }
/* Two-up field rows (Ad|Soyad, E-posta|Telefon) then a full-width message box. */
.igsa-contact-form .wpcf7 { max-width: 424px; margin-inline: auto; }
/* The source pitches its form rows 89-92px apart for 42px fields — a ~47px row gap,
   with the two columns close together. */
/* 58px column gap: the source's two-up fields ink 183px wide at x825 and x1066
   inside the same 424px form column (183 + 58 + 183 = 424). */
.igsa-contact-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 47px 58px; align-items: start; }
.igsa-contact-form .wpcf7-form > .igsa-f.is-wide,
.igsa-contact-form .wpcf7-form > input[type="submit"],
.igsa-contact-form .wpcf7-form > .wpcf7-response-output,
.igsa-contact-form .wpcf7-form > .hidden-fields-container,
.igsa-contact-form .wpcf7-form > .wpcf7-form-control-wrap { grid-column: 1 / -1; }
.igsa-contact-form label { display: block; margin: 0; }
.igsa-contact-form input[type="text"], .igsa-contact-form input[type="email"],
.igsa-contact-form input[type="tel"], .igsa-contact-form textarea {
	width: 100%; box-sizing: border-box; border-radius: 0;
	/* The source draws a 1px #E3E3E3 hairline round every contact field; the clone drew
	   none. Measured on /iletisim: 183x42 fields, border 1px rgb(227,227,227). */
	border: 1px solid #e3e3e3;
	height: 42px;
	padding: 0.6rem 0.75rem; background: #fff; color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins); font-size: 16px; font-weight: 200;
}
/* the source's message box is 173px tall, not the browser's rows-based default */
.igsa-contact-form textarea { height: 173px; min-height: 173px; resize: vertical; }
.igsa-contact-form .wpcf7-spinner { display: none; }
.igsa-contact-form input[type="submit"] {
	/* the source runs Gönder the full 424px width of the form */
	justify-self: stretch; width: 100%;
	background: transparent; color: #fff; border: 1px solid #fff; border-radius: 0;
	padding: 0.55rem 1.9rem; margin-top: 0.4rem; cursor: pointer;
	font-family: var(--wp--preset--font-family--poppins); font-size: 15px; font-weight: 200;
}
/* Measured on the source's contact form (both languages): the transparent button fills
   white, its border goes #FFFFFF -> rgb(47,46,46) and its label #FFFFFF -> #000000, over
   `border-color, background-color 0.4s`. The clone turned the label burgundy instead,
   with no transition and no border change. As with every other button, the source moves
   the whole swap to the press on its phone canvas. */
.igsa-contact-form input[type="submit"] {
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
@media (hover: hover) {
	.igsa-contact-form input[type="submit"]:hover {
		background: #fff; color: #000; border-color: rgb(47, 46, 46);
	}
}
@media (hover: none) {
	.igsa-contact-form input[type="submit"]:active {
		background: #fff; color: #000; border-color: rgb(47, 46, 46);
	}
}
.igsa-contact-form .wpcf7-response-output { color: #fff; border-color: #fff; }
.igsa-contact-form .wpcf7-not-valid-tip { color: #ffd9df; font-size: 0.85rem; }
@media (max-width: 767.98px) {
	.igsa-contact-form .wpcf7-form { grid-template-columns: 1fr; }
	.igsa-contact-info, .igsa-contact-form { padding: 32px 1.25rem; }
	.igsa-contact-map { padding: 24px 1.25rem; }
	.igsa-contact-formtitle { font-size: 28px !important; }
	.igsa-contact-photo img { min-height: 260px; }
}

/* Course intro/example videos (referenced from the source CDN, local poster). */
.igsa-video { margin: 1.5rem auto; max-width: 720px; }
.igsa-video video { width: 100%; height: auto; display: block; background: #000; }

/* Course burgundy pricing box (matches source "KLASİK EĞİTİM / … / Detaylı Bilgi").
   Measured on the source 2026-08-09 (/ic-mimarlik-kursu @1440): the two calls to
   action are STACKED, not side by side, and both print white Poppins ExtraLight
   16 — not burgundy SemiBold on white. The first ("Detaylı Bilgi") is a 142x40
   transparent button, the second ("Kayıt için Tıklayın") a 256x46 filled
   burgundy one. */
.igsa-pricebox { margin: 2rem auto; text-align: center; }
.igsa-pricebox p { margin: 0.3rem 0; line-height: 1.35; }
.igsa-pricebox .wp-block-buttons { flex-direction: column; align-items: center; gap: 0; }
.igsa-pricebox .wp-block-button__link {
	background: transparent; color: #fff; font-weight: 200; font-size: 16px;
	min-width: 142px; padding: 9px 16px;
}
.igsa-pricebox .wp-block-button:last-child .wp-block-button__link {
	background: var(--wp--preset--color--burgundy);
	min-width: 256px; padding: 12px 18px; margin-top: 108px;
}
/* No underline: the source treats this as a button and swaps its fill (see the
   CTA-family block near the end of this file). */

/* ============================================================================
   Course pages — 1:1 with the source: no visible title, a 720px text column,
   a Rubik subtitle, the book link as a burgundy bar, 680px videos, 22px
   SemiBold left-aligned section headings and a Rubik pricing box.
   ========================================================================== */
.igsa-course .wp-block-post-content { max-width: 720px; margin-inline: auto; }
.igsa-course .wp-block-post-content > * { max-width: 720px; margin-inline: auto; }
.igsa-course .wp-block-buttons { justify-content: center; }
.igsa-course .wp-block-image { margin-left: auto; margin-right: auto; }
.igsa-course .wp-block-list { margin-left: 1.75rem; }

.igsa-course-sub {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 20px; font-weight: 500; line-height: 1.4;
	color: var(--wp--preset--color--navy); margin: 0 0 1.1rem;
}
.igsa-course-booklink {
	background: var(--wp--preset--color--burgundy);
	margin: 0 auto 1.4rem; padding: 12px 18px; max-width: 720px;
}
.igsa-course-booklink a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 200; }
/* The source treats this as a button: measured 417x40, burgundy fill, 1px #1D1D36
   border, and on hover the fill goes white with an #8B0000 label over
   `border-color, background-color 0.4s`. It does NOT underline — that was invented.
   On the clone the burgundy is painted by the wrapping <p>, so the plate is what
   swaps, keyed on the link being hovered so the trigger area matches the source's
   button rather than the whole bar. */
.igsa-course-booklink { transition: background-color 0.4s ease, border-color 0.4s ease; }
.igsa-course-booklink a { transition: color 0.4s ease; }
@media (hover: hover) {
	.igsa-course-booklink:has(a:hover) { background: #fff; }
	.igsa-course-booklink a:hover { color: #8b0000; }
}
@media (hover: none) {
	.igsa-course-booklink:has(a:active) { background: #fff; }
	.igsa-course-booklink a:active { color: #8b0000; }
}
.igsa-course-vidcap {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 22px; font-weight: 500; color: var(--wp--preset--color--navy);
	margin: 2.2rem 0 1rem;
}
/* Measured on the source 2026-08-09: the section headings ("Kazanımlar",
   "İçerik", "Eğitime Kimler Katılabilir?", "Mezunların Başarısı", "Sanat Tarihi
   Dersleri") render at weight 700, not 600. */
.igsa-course-h {
	font-size: 22px !important; font-weight: 700; line-height: 1.3;
	text-align: left; margin: 2.2rem 0 0.9rem;
}

/* The source does not style its eight course pages alike — the owners built each
   one separately in Wix. Measured 2026-08-06:
     Poppins ExtraLight 16 body / Poppins SemiBold 22 headings  (the rule above)
       ic-mimarlik-kursu, desen-yagliboya-kursu, sanat-tarihi-kursu
     Rubik Light 20 body / Rubik Medium 20 headings
       moda-tasarim-kursu (body in pure black), sertifikali-resim-kursu,
       guzel-sanatlara-hazirlik-kursu, portfolyo-hazirlik-kursu (22px headings)
   igsa-core adds the body class; the defaults above cover the Poppins three. */
.igsa-course--rubik .igsa-course .wp-block-post-content p,
.igsa-course--rubik .igsa-course .wp-block-post-content li {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 20px; font-weight: 300; line-height: 1.45;
}
.igsa-course--rubik .igsa-course-h {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: 20px !important; font-weight: 500; line-height: 1.4;
}
/* the burgundy book bar keeps its own Poppins regardless of the page's body face */
.igsa-course--rubik .igsa-course-booklink a {
	font-family: var(--wp--preset--font-family--poppins); font-size: 16px; font-weight: 200;
}
/* desen-yagliboya + teknik-cizim: the owners set the whole body copy bold on the
   source (Poppins SemiBold rendered at 700). */
.igsa-course--bold .igsa-course .wp-block-post-content p,
.igsa-course--bold .igsa-course .wp-block-post-content li { font-weight: 700; }
.igsa-course--bold .igsa-course .igsa-course-sub {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px; font-weight: 700; line-height: 1.4;
}
.igsa-course--ink .igsa-course .wp-block-post-content p,
.igsa-course--ink .igsa-course .wp-block-post-content li { color: #000; }
.igsa-course--h22 .igsa-course-h { font-size: 22px !important; }
.igsa-course .igsa-video { max-width: 680px; }

/* Teknik Çizim Desteği intro — the source centres a 30px SemiBold question over a
   20px SemiBold list, then repeats the Eğitimler grid full-bleed below it. */
.igsa-tc-h { font-size: 30px !important; font-weight: 600; text-align: center; margin: 0 0 1.6rem; }
.igsa-tc-list { font-size: 20px; font-weight: 600; line-height: 2.1; text-align: center; margin: 0 0 2.6rem; }
.igsa-course--bold .igsa-course .wp-block-post-content p.igsa-tc-list { font-weight: 600; }
.igsa-course .wp-block-post-content > .igsa-tr-band { max-width: none; }

/* Horizontal photo strip (the source's course gallery): 398px-tall tiles that keep their
   own aspect ratio, 10px apart, scrolling sideways inside the 990px content viewport. */
.igsa-course-strip {
	display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
	/* The source's fixed canvas is 980px wide and it overflows nowhere; a 990px
	   strip pushed 5-6px past the canvas on every tablet. */
	max-width: 980px !important; width: 980px; margin: 2.4rem 0;
	position: relative; left: 50%; transform: translateX(-50%);
	padding-bottom: 10px; scroll-snap-type: x proximity;
}
.igsa-course-strip img { height: 398px; width: auto; flex: 0 0 auto; display: block; scroll-snap-align: start; }
.igsa-course-strip:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
.igsa-course-strip::-webkit-scrollbar { height: 8px; }
.igsa-course-strip::-webkit-scrollbar-thumb { background: rgba(29,29,54,0.25); }
@media (max-width: 767.98px) { .igsa-course-strip { width: 100%; max-width: 100% !important; left: auto; transform: none; } }
@media (max-width: 767.98px) { .igsa-course-strip img { height: 260px; } }
/* Burgundy-box lines are <h4> in the source, in Poppins at weight 700 (see
   import-content.php). Keep the paragraph-like rhythm the box had — a heading's
   default margins would push the box taller than the source's. */
.igsa-price-line { font-family: var(--wp--preset--font-family--poppins); font-weight: 700; line-height: 1.4; margin: 0.25rem 0; }
.igsa-pricebox h4.igsa-price-line { margin: 0.25rem 0; }

@media (max-width: 767.98px) {
	.igsa-course-sub { font-size: 18px; }
	.igsa-course-vidcap, .igsa-course-h { font-size: 20px !important; }
}

/* The source has no gap between the header and page content (the hero/banner
   starts immediately at y=155). Remove the theme's default block gap there. */
.wp-site-blocks > main { margin-top: 0 !important; }
.entry-content > *:first-child, .entry-content > .igsa-hero-band { margin-top: 0 !important; }

/* ============================================================================
   Eğitimler (Trainings) — 1:1 with the source: 7 course blocks as image+text
   pairs on alternating white / burgundy bands. White band = text outside the
   photo, navy text, filled burgundy button. Burgundy band = photo outside,
   white text, outlined button. Content column is 1257px wide, centred.
   ========================================================================== */
.igsa-tr-sub  { font-size: 20px; font-weight: 200; margin: 0.6rem 0 0; }
.igsa-tr-sub2 { font-size: 29px; font-weight: 600; margin: 0.5rem 0 0; line-height: 1.25; }

.igsa-tr-band {
	position: relative; left: 50%; transform: translateX(-50%);
	width: 100vw; max-width: none !important; margin-inline: 0; padding: 0;
}
/* The source paints burgundy on the TEXT CELLS (inset to the 1257px column), not as a
   full-bleed band; the first white row is a white card sitting on a burgundy band whose
   bleed continues behind the top of the next row. */
.igsa-tr-band.is-dark .igsa-tr-text { background: var(--wp--preset--color--burgundy); }
.igsa-tr-band.is-inset { background: var(--wp--preset--color--burgundy); padding-top: 72px; padding-bottom: 270px; margin-bottom: -270px; }
.igsa-tr-band.is-inset .igsa-tr-row { background: #fff; }
.igsa-tr-band.is-dark { position: relative; z-index: 1; }
.igsa-tr-row {
	display: flex; flex-wrap: wrap;
	/* The source lays this grid out as four contiguous 320px columns from x=80 to
	   x=1360 at a 1440 viewport - 1280px, i.e. the same `max(980px, 100vw - 160px)`
	   band every other full-bleed component on the site uses. A fixed 1257px made
	   every column 314px and every photo 6px narrow. */
	width: max(980px, calc(100vw - 160px));
	max-width: none; margin-inline: auto;
}
.igsa-tr-unit { flex: 1 1 50%; max-width: 50%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.igsa-tr-band.is-wide .igsa-tr-unit { flex-basis: 100%; max-width: 100%; }
.igsa-tr-unit.is-trio { grid-template-columns: 1fr 1fr 1fr; }
.igsa-tr-photo { align-self: stretch; }
.igsa-tr-photo img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; display: block; }
.igsa-tr-band.is-wide .igsa-tr-photo img { min-height: 555px; }

.igsa-tr-text { padding: 44px 46px; }
.igsa-tr-band.is-wide .igsa-tr-text { text-align: center; padding: 44px 52px; }
.igsa-tr-text h2 {
	font-family: var(--wp--preset--font-family--poppins);
	/* Measured on the source: a `normal` line box (42px at 28px), not 1.22 (34.16px). */
	font-size: 28px; font-weight: 600; line-height: normal; margin: 0 0 1.1rem;
	text-transform: lowercase; color: var(--wp--preset--color--navy);
}
/* Source body copy in these cards is 16px on a 28.8px line with 0.8px tracking;
   the clone had 26.4px and no tracking, which both shortened every card and
   changed where the text wrapped. */
.igsa-tr-text p { font-size: 16px; font-weight: 200; line-height: 28.8px; letter-spacing: 0.8px; margin: 0 0 1rem; color: var(--wp--preset--color--navy); }
.igsa-tr-band.is-dark .igsa-tr-text h2, .igsa-tr-band.is-dark .igsa-tr-text p { color: #fff; }

.igsa-tr-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 150px; min-height: 46px; padding: 0 1.1rem; margin-top: 0.9rem;
	background: var(--wp--preset--color--burgundy); color: #fff; text-decoration: none;
	font-size: 15px; font-weight: 200; border: 1px solid var(--wp--preset--color--burgundy);
	transition: border-color 0.4s ease, background-color 0.4s ease;
}
/* Gated on the pointer: the source moves this swap to :active on its phone canvas, and
   a tap on a touch device would otherwise leave the button stuck in the swapped colours.
   The :active half lives with the rest of the CTA family at the end of this file. */
@media (hover: hover) {
	.igsa-tr-btn:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--burgundy); }
}
.igsa-tr-band.is-dark .igsa-tr-btn { background: transparent; border-color: #fff; }
/* On the dark bands the source's label goes black, not burgundy. */
@media (hover: hover) {
	.igsa-tr-band.is-dark .igsa-tr-btn:hover { background: #fff; color: #000; }
}

@media (max-width: 767.98px) {
	.igsa-tr-unit, .igsa-tr-band.is-wide .igsa-tr-unit { flex-basis: 100%; max-width: 100%; grid-template-columns: 1fr; }
	.igsa-tr-unit.is-trio > .igsa-tr-photo:last-child { display: none; }
	.igsa-tr-photo img, .igsa-tr-band.is-wide .igsa-tr-photo img { min-height: 260px; max-height: 340px; }
	.igsa-tr-text { padding: 32px 1.25rem; }
	.igsa-tr-text h2 { font-size: 24px; }
}

/* ============================================================================
   Page-level typography matched to the source: page titles are 75px Poppins
   SemiBold and rendered lower-case (a deliberate design choice on the source);
   the DOM text keeps its natural casing for assistive tech and SEO.
   ========================================================================== */
.entry-content > h1.wp-block-heading,
h1.igsa-page-title { text-transform: lowercase; }
/* The source sets every 75px page title in a `normal` line box - 113px, not the
   90px a 1.2 factor gives. That 23px shortfall pushed the whole page up on every
   route that has a title. */
h1.igsa-page-title { font-size: var(--wp--preset--font-size--page-title); font-weight: 600; line-height: normal; }

/* About page: burgundy checkerboard headings are 23px bold; the KURULUŞ /
   DİSİPLİNLER sub-headings are 27px SemiBold — measured on the source, which
   sets them in its `poppins-semibold` face (an earlier pass read them as
   ExtraLight). */
.igsa-check__h { font-size: 23px !important; font-weight: 700; line-height: 1.35; margin-bottom: 1.1rem; }
/* Measured on the source: a 40px line box and 26px beneath it, not 36.4/9.6. */
.igsa-sub-h { font-size: 27px !important; font-weight: 600; line-height: 40px; margin-bottom: 26px; }

/* ============================================================================
   Blog posts — the source renders these with Wix's blog template: a Helvetica
   stack, a 14px author/date meta line above a 40px left-aligned title, and a
   740px text column. Matched here (Helvetica is a system font, nothing to load).
   ========================================================================== */
.igsa-post { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.igsa-post > *, .igsa-post .wp-block-post-content > * { max-width: 740px; margin-inline: auto; }
/* Breadcrumb ("All Posts / Latest News"): the source sets it in Poppins
   ExtraLight 16/22.4, not in the article's Helvetica — measured 2026-08-09.
   It runs across the 940px band, not the 740px article column, sets its two
   links 40px apart, and leaves 110px before the author row (measured 2026-08-19:
   strip bottom y206, author row y316). */
.igsa-post__cats {
	display: flex; gap: 40px; margin: 0 auto 110px;
	width: 940px; max-width: 100%;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 16px; font-weight: 200; line-height: 22.4px;
}
.igsa-post__cats a { color: var(--wp--preset--color--navy); text-decoration: none; }
/* The source's category strip does not react to hover (measured: no change). */
.igsa-post__phead { display: none; }

/* Author row — a 32px band holding the placeholder avatar, three 14/21 labels
   16px apart and, at the far right, the "Diğer Eylemler" menu button. There is no
   punctuation between the labels on the source; the clone used to print "·". */
.igsa-post__meta {
	display: flex; align-items: center; height: 32px;
	margin: 0 0 18px;
	font-size: 14px; font-weight: 400; line-height: 21px;
	color: var(--wp--preset--color--navy);
}
.igsa-post__avatar { display: block; width: 32px; height: 32px; margin-right: 12px; border-radius: 50%; overflow: hidden; }
.igsa-post__avatar svg { display: block; width: 100%; height: 100%; }
.igsa-post__metalist { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.igsa-post__author { font-weight: 400; }
.igsa-post__more {
	margin-left: auto;
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; padding: 0;
	border: 0; background: none; cursor: pointer;
	color: var(--wp--preset--color--navy);
}
.igsa-post__more svg { display: block; fill: currentColor; }
.igsa-post__updated { font-size: 14px; color: var(--wp--preset--color--muted); margin: 0 0 1rem; }

/* ---------------------------------------------------------------------------
   Below the article body. Every number here is measured on the live source at
   1440 on 2026-08-19 (/post/renk-armonileri and /post/covid-19-...-1, which
   differ only in that one has tags and the other has none):

     tags nav        y1128  740x31   then 20px
     share row       ...    740x66   hairline above, 18px lead, 19px icons at 49px pitch
     counter bar     ...    740x40   hairline above, 18px lead, 14/21
     (91px)
     "Son Yazılar"   ...    940x361  27px head, 20px, 940x314 card grid
     (91px)
     "Yorumlar"      ...    740x143  24px head, 16px, 37px, 740x58 box
     (39px + 42px)  to the footer

   The hairline is rgba(29,29,54,.2) everywhere except the comment box, which is
   .3, and the card outline, which is solid #1D1D36.
   ------------------------------------------------------------------------- */

/* Hashtags inside the copy. The source links these to its own hashtag archive and
   sets them in #5C5ADB, a different colour and a different destination from the tag
   pills below; they underline on hover and the pills do not. */
.igsa-post__hashtag { color: rgb(92, 90, 219); text-decoration: none; }
/* NOT gated on the pointer: the source underlines these on :hover at 360 as well as at
   1440 (measured 2026-08-20), so gating would drop the effect on the phone canvas
   rather than move it — the same reading as the related-post cards above. */
.igsa-post .wp-block-post-content a.igsa-post__hashtag:hover { text-decoration: underline; }

/* Tag pills. Distinct from the hashtags in the copy — those are body text and
   come through post_content; this row is the post's own tag list. */
.igsa-post__tagnav { margin-top: 23px; }
.igsa-post__tagnav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.igsa-post__tagnav a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(29, 29, 54, 0.2);
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-size: 14px; font-weight: 400; line-height: 17px;
	text-decoration: none;
}
/* Hover darkens the outline only, and does so instantly — the source declares
   `transition: all` but leaves the duration at 0s, so adding an ease here would
   be inventing an animation the source does not play. */
@media (hover: hover) {
	.igsa-post__tagnav a:hover { border-color: rgba(29, 29, 54, 0.6); }
}

/* Share row + counter bar. */
.igsa-post__engage { margin-top: 20px; }
.igsa-post__tagnav + .igsa-post__engage { margin-top: 20px; }
.igsa-post__share {
	display: flex; align-items: center; gap: 30px;
	border-top: 1px solid rgba(29, 29, 54, 0.2);
	padding: 18px 0;
	line-height: 30px;
}
.igsa-post__share-btn {
	display: flex; align-items: center; width: 19px; height: 29px; padding: 0;
	border: 0; background: none; cursor: pointer;
	color: var(--wp--preset--color--navy);
	/* These are links carrying only an icon; the article's link underline would apply. */
	text-decoration: none;
}
.igsa-post__share-btn svg { display: block; fill: currentColor; }
/* Each share glyph takes its network's own colour on hover, instantly. Measured
   on the source 2026-08-19; the link button uses the blog template's accent. */
@media (hover: hover) {
	.igsa-post__share-btn[aria-label*="Facebook"]:hover { color: rgb(68, 100, 163); }
	.igsa-post__share-btn[aria-label*="X"]:hover        { color: rgb(85, 172, 238); }
	.igsa-post__share-btn[aria-label*="LinkedIn"]:hover { color: rgb(0, 119, 181); }
	.igsa-post__share-btn--link:hover                   { color: rgb(92, 90, 219); }
}
.igsa-post__counts {
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid rgba(29, 29, 54, 0.2);
	padding-top: 18px;
	font-size: 14px; font-weight: 400; line-height: 21px;
	color: var(--wp--preset--color--navy);
}
.igsa-post__counts-left { display: flex; gap: 22px; }
.igsa-post__likes { display: flex; align-items: center; gap: 6px; }
.igsa-post__like {
	display: block; width: 19px; height: 19px; padding: 0;
	border: 0; background: none; cursor: pointer;
	color: var(--wp--preset--color--navy);
}
/* The heart is drawn, not filled: transparent fill over a 1.5px #E84A43 stroke,
   and it does not react to hover on the source. */
.igsa-post__like svg { display: block; fill: none; stroke: #e84a43; stroke-width: 1.5px; }

/* "Son Yazılar / Hepsini Gör" strip. The source runs it wider than the article
   column: three 291x314 cards at x249 / 574 / 898 inside a 940px band. */
.igsa-post__related { width: 940px; max-width: 100%; margin: 91px auto 0; }
.igsa-post__related-head { display: flex; align-items: baseline; justify-content: space-between; }
.igsa-post__related-head h2 { font-size: 18px !important; font-weight: 400; line-height: 27px; margin: 0; font-family: inherit; }
.igsa-post__related-head a { font-size: 14px; font-weight: 400; line-height: 21px; color: var(--wp--preset--color--navy); }
.igsa-post__related-list {
	list-style: none; margin: 20px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 291px); justify-content: space-between;
}
.igsa-post__related-list > li > article {
	display: flex; flex-direction: column; height: 100%;
	border: 1px solid var(--wp--preset--color--navy);
	background: #fff;
}
.igsa-post__related-img { display: block; }
.igsa-post__related-list img { display: block; width: 100%; aspect-ratio: 289 / 162; object-fit: cover; }
.igsa-post__related-body { display: flex; flex-direction: column; flex: 1; min-height: 149px; box-sizing: border-box; padding: 24px; }
.igsa-post__related-list a { text-decoration: none; color: var(--wp--preset--color--navy); }
.igsa-post__related-title span { display: block; font-size: 18px; font-weight: 400; line-height: normal; }
.igsa-post__related-foot {
	display: flex; align-items: center; gap: 16px;
	margin-top: auto;
	border-top: 1px solid rgba(29, 29, 54, 0.2);
	padding-top: 15px;
	font-size: 12px; font-weight: 400; line-height: 18px;
}
.igsa-post__rstat { display: flex; align-items: center; gap: 6px; }
.igsa-post__rstat svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.igsa-post__rstat--like { margin-left: auto; }
.igsa-post__rstat--like svg { fill: none; stroke: #e84a43; stroke-width: 1.5px; }
/* Related-post cards. Measured on the source (tools/interaction-lookup.mjs, 2026-08-16):
   both the image link and the title link take their label from #1D1D36 to #5C5ADB on
   hover, and pressing the image lays a 30% black scrim over it. The clone had neither.

   NOT gated on the pointer: unlike the buttons, the source keeps this colour change on
   :hover at 360 as well and adds no press colour, so gating it would have removed the
   effect on the phone canvas instead of moving it. Measured on both canvases. */
.igsa-post__related-list a:hover,
.igsa-post__related-head a:hover { color: rgb(92, 90, 219); }
.igsa-post__related-img { position: relative; }
.igsa-post__related-img:active::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}
/* No press colour: the source's related-post links report no active change at 360. */

/* "Yorumlar" and the collapsed comment box. Clicking the box on the source opens
   Wix's member login; this site has no counterpart, so only the resting state is
   cloned and the click is recorded in config/known-differences.json. */
.igsa-post__comments { margin: 91px auto 23px; }
.igsa-post__comments-head { height: 24px; margin-bottom: 16px; }
.igsa-post__comments-head h2 {
	font-family: inherit;
	font-size: 16px !important; font-weight: 400; line-height: 16px;
	margin: 0; color: var(--wp--preset--color--navy); text-transform: none;
}
.igsa-post__comments-body { padding: 37px 0 8px; }
.igsa-post__comments-box {
	height: 58px; box-sizing: border-box;
	display: flex; align-items: center;
	padding: 16px;
	border: 1px solid rgba(29, 29, 54, 0.3);
	font-size: 16px; font-weight: 400; line-height: 24px;
	color: var(--wp--preset--color--navy);
}
/* The dot row belongs to the phone strip; the desktop grid has none. */
.igsa-post__related-dots { display: none; }

/* The stats row on a /blog card. The source pins it 27px above the card's bottom
   edge inside a 242px column, independently of how tall the excerpt runs — the
   cards are a fixed 545px and the row does not move between them — so it is placed
   rather than flowed. */
.igsa-blog-cards > li { position: relative; }
.igsa-blog-cards__stats {
	position: absolute; left: 25px; right: 25px; bottom: 27px;
	display: flex; align-items: center; gap: 16px;
	font-size: 12px; font-weight: 400; line-height: 18px;
	color: var(--wp--preset--color--navy);
}

/* The comments block sits 81px above the source's footer. This template's <footer>
   carries a site-wide 16px top margin, so the article gives those 16px back rather
   than that shared rule changing. The padding is written inline by the block editor,
   which is why this needs !important. */
body.single-post main.igsa-post {
	padding-bottom: calc(var(--wp--preset--spacing--80) - 16px) !important;
}

/* ---- phone canvas ----------------------------------------------------------
   The source's 320px canvas turns the "Son Yazılar" grid into a swipeable strip:
   one 248x288 card centred with 36px of bleed either side, 12px between cards,
   and a 42px row of 6px dots beneath it (active #5C5ADB, the rest #1D1D36 at 20%).
   Measured on /post/i-ç-mimarlar-i-çin-önemli-ve-kısa-bilgi at 360x740 on
   2026-08-20; the section is 377px tall there, against 981 when the clone stacked
   the three cards vertically. */
@media (max-width: 767.98px) {
	.igsa-post__related { width: auto; margin-left: 0; margin-right: 0; }
	.igsa-post__related-list {
		display: flex; grid-template-columns: none;
		gap: 12px; margin-top: 20px; padding: 0 36px;
		overflow-x: auto; scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.igsa-post__related-list::-webkit-scrollbar { display: none; }
	.igsa-post__related-list > li { flex: 0 0 248px; scroll-snap-align: center; }
	.igsa-post__related-list > li > article { min-height: 288px; }
	.igsa-post__related-body { min-height: auto; }
	.igsa-post__related-list img { aspect-ratio: 248 / 140; }
	.igsa-post__related-dots {
		display: flex; align-items: center; justify-content: center; gap: 6px;
		height: 42px; margin: 0; padding: 0; list-style: none;
	}
	.igsa-post__related-dots li {
		width: 6px; height: 6px; border-radius: 50%;
		background: rgba(29, 29, 54, 0.2);
	}
	.igsa-post__related-dots li.is-active { background: rgb(92, 90, 219); }
}
.igsa-post__title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 40px !important; font-weight: 700; line-height: 1.25;
	text-align: left; text-transform: none; margin: 0 0 20px;
}
.igsa-post .wp-block-post-content { font-size: 16px; font-weight: 400; line-height: 24px; }
.igsa-post .wp-block-post-content p { margin: 0 0 1.4rem; }
/* Three posts wrap their body text around a left-floated photograph with a 40px
   gutter (measured on the source: image at x349, text at x739 / x589). The
   .igsa-post > * rule centres every child in the 740px column, which would defeat
   the float, so the figure opts out of it. */
.igsa-post .wp-block-post-content .wp-block-image.alignleft {
	float: left;
	margin: 0 40px 33px 0;
	max-width: none;
}
/* Only the paragraph immediately after the photograph runs beside it on the source;
   everything below it returns to the full 740px column. */
.igsa-post .wp-block-post-content .wp-block-image.alignleft + p + * { clear: left; }
.igsa-post .wp-block-post-terms { font-size: 16px; }
.igsa-post .wp-block-post-terms a { color: var(--wp--preset--color--navy); text-decoration: none; }
/* The source's phone title is 26/36.4, not the 30px the clone was using. */
@media (max-width: 767.98px) {
	.igsa-post__title { font-size: 26px !important; line-height: 36.4px; }

	/* The 320 canvas replaces the breadcrumb with two 50px bands: a #5C5ADB strip
	   naming the content type, then the current category and a chevron on white. */
	.igsa-post__cats { display: none; }
	.igsa-post__phead { display: block; margin: 0 -16px 0; }
	.igsa-post__phead-band {
		height: 50px; box-sizing: border-box; padding: 15px 18px 0;
		background: rgb(92, 90, 219); color: #fff;
		font-size: 14px; font-weight: 400; line-height: 20px;
	}
	.igsa-post__phead-sel {
		display: flex; align-items: center; justify-content: space-between;
		height: 50px; box-sizing: border-box; padding: 0 18px;
		background: #fff; color: var(--wp--preset--color--navy);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--poppins), sans-serif;
		font-size: 16px; font-weight: 200; line-height: 22.4px;
	}
	.igsa-post__phead-sel svg { display: block; width: 19px; height: 19px; fill: currentColor; }

	/* The phone canvas draws these two gaps tighter than the desktop's 91px. */
	.igsa-post__related { margin-top: 62px; }
	.igsa-post__comments { margin-top: 30px; }
}

/* ============================================================================
   Mağaza / Kitaplar and the product pages — 1:1 with the source, measured at
   1440px on 2026-08-06.

   /satın-al  : Cormorant Garamond "PEK YAKINDA SATIŞTA" banner, a 198px filter
                column (Filtrele: / Fiyat / a price slider) and a 3-up grid of
                228px cards, Turkish card labels.
   /kitaplar  : the same cards at 225px with English labels (the source's store
                locale leaks through there) and no banner or filter, closed by a
                bold ordering note.
   Each card carries the source's periwinkle "Y. Mimar Ömer Düzenli" ribbon at
   the top-left of the photo and a "Kitap Gönderimi" link under the price.
   ========================================================================== */
.igsa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.igsa-shop-banner {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 30px; font-weight: 700; letter-spacing: 0.06em; text-align: center;
	color: var(--wp--preset--color--burgundy); margin: 0 0 3.2rem;
}
.igsa-shop { display: grid; grid-template-columns: 198px 1fr; gap: 0 30px; align-items: start; }
.igsa-shop__filter h2 { font-size: 26px; font-weight: 200; margin: 0 0 1.4rem; line-height: 1.2; border-bottom: 1px solid var(--wp--preset--color--border); padding-bottom: 1.4rem; }
.igsa-shop__filter-h { font-size: 16px; font-weight: 200; margin: 0 0 1.6rem; position: relative; }
.igsa-shop__filter-h::after { content: "\2212"; position: absolute; right: 0; }
.igsa-shop__slider { position: relative; height: 2px; background: var(--wp--preset--color--navy); margin: 0 6px 0.9rem; }
.igsa-shop__slider i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--navy); }
.igsa-shop__slider i:first-of-type { left: -5px; }
.igsa-shop__slider i:last-of-type { right: -5px; }
.igsa-shop__filter-range { display: flex; justify-content: space-between; font-size: 14px; font-weight: 200; margin: 0; }

.igsa-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.igsa-books .igsa-shop__grid { max-width: 714px; }
.igsa-shop-card { display: flex; flex-direction: column; align-items: flex-start; color: inherit; }
.igsa-shop-card__link { display: block; text-decoration: none; color: inherit; width: 100%; }
.igsa-shop-card__img { position: relative; display: block; overflow: hidden; }
.igsa-shop-card__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.igsa-shop-card__ribbon {
	position: absolute; left: 0; top: 0; z-index: 2;
	background: rgb(92, 90, 219); color: #fff;
	font-size: 14px; font-weight: 200; line-height: 1.4;
	padding: 3px 12px;
}
/* Product-card hover photo: the source crossfades to a second image over 0.2s ease
   (both wrappers carry `all 0.2s ease`; the incoming one sits at opacity 0 until the
   pointer arrives). The alternate is stacked on the primary rather than following it in
   flow, so the card's height never changes. */
.igsa-shop-card__imgalt {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.2s ease;
}
/* The source crossfades: the outgoing photo goes 1 -> 0 as the incoming one goes 0 -> 1.
   Fading only the incoming image would dissolve it over a still-opaque primary, which
   looks different for the 0.2s it lasts. Gated on :has() so the cards that have no
   alternate photo — most of them — are never faded to nothing. */
.igsa-shop-card__img:has(.igsa-shop-card__imgalt) > img:not(.igsa-shop-card__imgalt) {
	transition: opacity 0.2s ease;
}
@media (hover: hover) {
	.igsa-shop-card:hover .igsa-shop-card__imgalt { opacity: 1; }
	.igsa-shop-card:hover .igsa-shop-card__img:has(.igsa-shop-card__imgalt) > img:not(.igsa-shop-card__imgalt) { opacity: 0; }
}
/* Keyboard focus crossfades the photo on the source too — and unlike hover it does NOT
   slide the Quick View label, so only the images are keyed here. Outside the hover query
   deliberately: a keyboard reaches these cards on a touch device as well. */
/* Gated with the hover rule above: on the 360 canvas the source's card does not
   cross-fade for focus or for a press, and an ungated :focus-within made the clone do
   both (measured on mimarl-k-kitaplar and satın-al at 360x740, 2026-08-20). */
@media (hover: hover) {
	.igsa-shop-card:focus-within .igsa-shop-card__imgalt { opacity: 1; }
	.igsa-shop-card:focus-within .igsa-shop-card__img:has(.igsa-shop-card__imgalt) > img:not(.igsa-shop-card__imgalt) { opacity: 0; }
}

/* Quick View. Measured on the source's /mimarl-k-kitaplar at 1440x900 (2026-08-17):
   a 225x50 bar, rgba(255,255,255,0.75) with black 14px extralight text, parked flush
   BELOW the 225x225 photo (its top sits exactly on the card's bottom edge) and clipped
   by the photo's overflow:hidden. Hovering the card slides it up by its own height.
   Wix uses two different durations — 0.3s coming in, 0.399s going out — and this
   reproduces both. On the source's phone canvas the control is not rendered at all,
   which is why it is display:none there rather than permanently on show. */
.igsa-shop-card__quick {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 50px; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.75); color: #000;
	font-size: 14px; font-weight: 200; text-align: center;
	transform: translateY(100%);
	transition: transform 0.399s ease;
}
/* Hover only. The source's product card slides this label up on hover and does nothing
   at all on focus — measured: `transform: translate(0,-50)` with the duration dropping
   0.399s -> 0.3s on the way in, and no focus reaction anywhere in the subtree. The card's
   link still shows the standard focus ring, so keyboard users are not left without an
   indicator; they simply do not get an affordance the source never gives them. */
@media (hover: hover) {
	.igsa-shop-card:hover .igsa-shop-card__quick {
		transform: translateY(0);
		transition: transform 0.3s ease;
	}
}
@media (max-width: 767.98px) {
	.igsa-shop-card__quick { display: none; }
}
.igsa-shop-card__name { display: block; font-size: 16px; font-weight: 200; margin: 1rem 0 0.5rem; line-height: 1.4; }
.igsa-shop-card__price { display: block; font-size: 16px; font-weight: 200; color: #6e6e6d; }
.igsa-shop-card__price del { margin-right: 0.4rem; }
.igsa-shop-card__ship { display: inline-block; margin-top: 0.9rem; font-size: 12px; font-weight: 200; color: #6e6e6d; }
.igsa-books__note { font-size: 14px; font-weight: 700; line-height: 1.6; margin: 2rem 0 0; max-width: 850px; }
@media (max-width: 767.98px) {
	.igsa-shop { grid-template-columns: 1fr; gap: 2rem; }
	.igsa-shop__grid { grid-template-columns: repeat(2, 1fr); }
	.igsa-books .igsa-shop__grid { max-width: none; }
}
/* The source keeps two product columns right down to its 320px canvas (135px tiles);
   dropping to one column made the store page 77% taller than the source at 360px. */

/* Breadcrumb row above the product, as on the source. */
.igsa-product__crumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; font-size: 16px; font-weight: 200; margin: 0 0 2.4rem; }
.igsa-product__crumbs a { color: var(--wp--preset--color--navy); text-decoration: none; }
/* The source's breadcrumbs do not react to hover (measured: no change). */
/* the source prints the separator as real text, so it is a text run on its side
   and must be one here too (it was aria-hidden and therefore uncounted) */
.igsa-product__sep { color: var(--wp--preset--color--muted); }
.igsa-product__ship { font-size: 14px; font-weight: 200; margin: 0 0 1.6rem; }
.igsa-product__ship a { color: #6e6e6d; }
.igsa-product { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; align-items: start; }
.igsa-product__media img { width: 100%; height: auto; display: block; }
.igsa-product__title { font-size: 28px !important; font-weight: 200; line-height: 1.35; text-align: left; text-transform: none; margin: 0 0 1.6rem; }
.igsa-product__price { font-size: 16px; font-weight: 200; margin: 0 0 1.6rem; }
.igsa-product__price del { color: #5d5d6b; margin-right: 0.5rem; }
.igsa-product__badge {
	display: inline-block; margin: 0; padding: 0.6rem 1.6rem;
	background: var(--wp--preset--color--burgundy); color: #fff;
	font-size: 15px; font-weight: 200;
}
.igsa-product__desc { grid-column: 1 / -1; margin-top: 2.4rem; max-width: 500px; }
.igsa-product__desc p { font-size: 16px; font-weight: 200; margin: 0 0 0.3rem; }
@media (max-width: 767.98px) {
	.igsa-product { grid-template-columns: 1fr; }
	.igsa-product__title { font-size: 24px !important; }
}

/* ============================================================================
   Etkinlikler — the source lists one past webinar as a centred card: a 600x401
   photo, a 24px date + kind row, a 15px description, the RSVP question and a
   burgundy "Bilgiler" button. The event page repeats it with a wide hero.
   ========================================================================== */
.igsa-events {
	display: flex; justify-content: center;
	/* the source runs a navy band the full width behind the card */
	background: var(--wp--preset--color--navy);
	position: relative; left: 50%; transform: translateX(-50%);
	width: 100vw; max-width: 100vw;
	padding: 60px 1rem 80px;
	margin-top: 2.5rem; box-sizing: border-box;
}
.igsa-event { max-width: 588px; width: 100%; text-align: center; background: #fff; }
.igsa-event__media { display: block; }
.igsa-event__media img { width: 100%; aspect-ratio: 600 / 401; object-fit: cover; display: block; }
.igsa-event__meta {
	display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap;
	font-size: 24px; font-weight: 200; line-height: 1.5;
	color: var(--wp--preset--color--navy); margin: 1.6rem 0 0; padding: 0 1.25rem;
}
.igsa-event__rule { width: 42px; margin: 1.6rem auto; border: 0; border-top: 1px solid #c9c9d1; }
.igsa-event__desc { font-size: 15px; font-weight: 200; line-height: 1.5; margin: 0 auto; max-width: 320px; padding: 0 1.25rem; }
.igsa-event__rsvp { font-size: 16px; font-weight: 200; margin: 2rem 0 0; }
.igsa-event__cta { margin: 1rem 0 0; padding-bottom: 2rem; }
.igsa-event__cta a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 140px; min-height: 44px; padding: 0 1.2rem;
	background: rgb(92, 90, 219); color: #fff;
	font-size: 16px; font-weight: 200; text-decoration: none;
}
/* The source underlines this button's label on hover and leaves its #5C5ADB fill
   alone; the clone darkened the fill instead and never underlined. */
.igsa-event__cta a:hover { text-decoration: underline; }

/* This link is underlined at rest and the source REMOVES the underline on hover —
   the inverse of the usual convention, and the clone did nothing at all. */
.igsa-eventpage__back a:hover { text-decoration: none; }

.igsa-eventpage { text-align: center; }
.igsa-eventpage__meta { display: flex; justify-content: center; gap: 0.9rem; font-size: 18px; font-weight: 200; margin: 0 0 1rem; }
.igsa-eventpage__desc { font-size: 16px; font-weight: 200; margin: 0 0 2rem; }
.igsa-eventpage__closed {
	display: inline-block; margin: 0; padding: 0.55rem 2rem;
	background: var(--wp--preset--color--burgundy); color: #fff; font-size: 16px; font-weight: 200;
}
.igsa-eventpage__back { margin: 0.9rem 0 0; font-size: 16px; }
.igsa-eventpage__hero { margin: 2.4rem 0; }
.igsa-eventpage__hero img { width: 100%; height: auto; }

/* Legal pages (gizlilik / mesafeli satış / teslimat-iade / teşekkürler): the source
   shows no page title and runs an 885px text column. Its ALL-CAPS section labels are
   NOT bold — measured on the live source 2026-08-06, they are poppins-extralight
   16px navy, the same as the body around them, set apart only by the caps and the
   extra space above. */
/* The source's legal pages sit on a fixed Wix canvas: the section reserves a set
   height and whatever the clauses do not use is left as blank space above the footer.
   Measured at 1440 on 2026-08-21 — the two short pages both end at y1638 and the two
   privacy pages both at y3629, whatever their own text height, and the Turkish and
   English versions of each pair agree to the pixel, which is what makes this a canvas
   height rather than a coincidence of content. The clone's <main> starts at y155 on
   every one of them, so the reserved height is the source's footer position less that
   and the 16px the theme's <footer> carries as a top margin.

   min-height, not height: the source grows past the reserve when the copy is long
   enough (mesafeli-satis-sozlesmesi runs to 6819px), and so should this. */
body.igsa-p--gizlilik-politikasi main.igsa-legal,
body.igsa-p--privacy-policy main.igsa-legal { min-height: 3458px; }
body.igsa-p--teslimat-ve-iade main.igsa-legal,
body.igsa-p--delivery-and-returns main.igsa-legal { min-height: 1467px; }
body.igsa-p--mesafeli-satis-sozlesmesi main.igsa-legal { min-height: 6126px; }
body.igsa-p--distance-sales-agreement main.igsa-legal { min-height: 6414px; }

.igsa-legal .wp-block-post-content { max-width: 885px; margin-inline: auto; }
.igsa-legal .wp-block-post-content > * { max-width: 885px; margin-inline: auto; }
/* The source's legal pages run their clauses as consecutive 25px lines with NO gap
   between paragraphs, and open a single 25px blank line before each numbered section
   heading (measured on /kopyası-güvenlik-gizlilik-politikası at 1440 on 2026-08-20:
   paragraph tops at 610, 635, 685, 710, 735, 760 — a clean 25px ladder). The clone was
   adding 22.4px under every one of its 97 paragraphs, which is nearly all of the
   1267px by which the page ran long. The face is the same either way: the source
   declares Poppins ExtraLight at weight 400, the clone asks for Poppins 200, and both
   resolve to the same file. */
.igsa-legal p { font-size: 16px; line-height: 25px; margin: 0; }
/* The source does not bold or space these labels on the legal pages — they are the
   same 16px ExtraLight as the clauses around them, and the blank lines that separate
   the sections are empty paragraphs in the copy, restored by
   scripts/legal-blank-lines.php rather than manufactured here. */
.igsa-legal .igsa-caps-label { font-weight: 200; margin-top: 0 !important; }
/* An empty paragraph collapses to nothing, so the restored blank lines are given the
   one 25px line box the source paints there. */
.igsa-legal p.igsa-legal-blank { height: 25px; }
.igsa-caps-label { font-weight: 700; margin-top: 2rem !important; }
.igsa-legal h2, .igsa-legal h3 { font-size: 16px !important; font-weight: 700; margin: 2rem 0 0.6rem; }

/* Fluid images. */
img { max-width: 100%; height: auto; }

@media (max-width: 767.98px) {
	.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* CF7 honeypot: the plugin only moves it off-screen to the left, which still
   measures as content sticking out of the viewport on narrow screens. Take it
   out of layout entirely — it stays in the DOM, which is all the trap needs. */
.wpcf7-form .igsa-hp-wrap,
.wpcf7-form input[id^="igsa-hp"] {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important; border: 0 !important;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================================
   "Klasik eğitim programı" curriculum pages (source: /students, /about-3,
   /kopyası-klasik-eğitim-pr-moda). Measured on the live source at 1440px on
   2026-08-08: a 1280px column split into two 640px halves; each row pairs a
   text panel with a photo of the same height, sides alternating down the page,
   rows butting together with no gap. Panels are #8B0000 (NOT the brand burgundy
   #800020 used elsewhere) and the white rows tint their type the same red.
   Below 782px the source stacks text-then-photo full width.
   ========================================================================== */
.igsa-curr,
.igsa-curr__title,
.igsa-curr__sub,
.igsa-curr__outro { --igsa-curr-red: #8b0000; --igsa-curr-grey: #e8e6e6; }

.igsa-curr__title {
	font-family: var(--wp--preset--font-family--rubik), sans-serif;
	font-weight: 500;
	font-size: 37px;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
	text-align: center;
	margin: 3.2rem 0 0;
}
.igsa-curr__sub {
	font-family: var(--wp--preset--font-family--rubik), sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--navy);
	text-align: center;
	margin: 0.7rem 0 2.2rem;
}

/* Break out of the 980px content column: the source runs these rows 1280px wide,
   and full-bleed once the viewport is narrower than that. */
.igsa-curr {
	position: relative; left: 50%; transform: translateX(-50%);
	/* Band width. The source does NOT clamp this to the viewport and does not cap
	   it at 1280 — measured on three independent components (about checkerboard,
	   contact row, curriculum rows), its half-width is
	       max(490px, (100vw - 160px) / 2)
	   giving 490 / 490 / 560 / 640 / 880 at 768 / 1024 / 1280 / 1440 / 1920.
	   `min(1280px, 100vw)` squeezed the halves to 384 at 768 and capped them at
	   640 from 1440 up, which is why the clone's page height moved with the
	   viewport while the source's is constant to the pixel at every width. */
	width: max(980px, calc(100vw - 160px)); max-width: none !important;
	margin: 0 0 3rem;
}
.igsa-curr__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
}
.igsa-curr__row.is-photo-left .igsa-curr__media { order: 0; }
.igsa-curr__row.is-photo-left .igsa-curr__text  { order: 1; }

.igsa-curr__media { position: relative; }
.igsa-curr__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	/* the ratios in curriculum-data.json were measured against the source's
	   638px half, and the source holds each row's photo at that HEIGHT while its
	   width grows with the band */
	height: calc(var(--igsa-curr-ratio, 1) * 638px);
}

.igsa-curr__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.6rem 18%;
	font-family: var(--wp--preset--font-family--rubik), sans-serif;
}
.igsa-curr__row.is-burgundy .igsa-curr__text { background: var(--igsa-curr-red); color: #fff; }
.igsa-curr__row.is-white    .igsa-curr__text { background: #fff; color: var(--igsa-curr-red); }
.igsa-curr__row.is-plain    .igsa-curr__text { background: var(--igsa-curr-grey); color: #000; }

/* Type: fixed, not fluid.  The source is two fixed canvases (980 / 320), each
   with its own authored sizes, so a `clamp()` between them lands on neither —
   it collapsed every phone run to 14px where the source keeps its list copy at
   18px. Measured per run on the live source 2026-08-09 (raw family/weight):

     run        980 canvas              320 canvas
     title      37 rubik-medium 400     28 rubik-medium 400
     sub        20 rubik-light  700     19 rubik-medium 700
     eyebrow    35 rubik-light  700     22 rubik-light  700
     heading    35 rubik-*      700     22 rubik-*      700
     meta       18 rubik-light  700     17 rubik-light  700
     list item  18 rubik-light  400     18 rubik-light  400

   `rubik-light` is Wix's name for the 300 face, which it then loads at CSS
   weight 400 (list items) or synthetically bolds to 700 (meta, headings). The
   clone has Rubik as a variable font, so 300 and 700 are real faces. */
.igsa-curr__eyebrow {
	font-size: 35px;
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 700;
}
.igsa-curr__eyebrow strong { font-weight: 700; }
.igsa-curr__h {
	font-size: 35px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 0.35em;
	color: inherit;
}
.igsa-curr__meta {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	margin: 0;
}
.igsa-curr__list {
	margin: 1.1em 0 0;
	padding-left: 1.25em;
	list-style: disc;
}
.igsa-curr__list li {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	margin: 0 0 0.35em;
}
/* İç Mimarlık keeps navy bullets on its white rows; the other two tint them red. */
.igsa-curr:not(.has-accent-bullets) .is-white .igsa-curr__list li { color: var(--wp--preset--color--navy); }

/* Grey summary panels ("Tamamlayıcı Ders Programı" / "Toplam Ders Süresi"). */
.igsa-curr__lead   { font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; margin: 0 0 0.4em; }
.igsa-curr__sumh   { font-size: clamp(18px, 1.75vw, 25px); font-weight: 600; margin: 0 0 0.9em; color: inherit; }
.igsa-curr__group  { margin: 0 0 1.1em; padding-left: 1.9em; position: relative; }
.igsa-curr__group::before {
	content: ""; position: absolute; left: 0.6em; top: 0.55em;
	width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.igsa-curr__groupname { font-size: clamp(18px, 1.75vw, 25px); font-weight: 500; margin: 0 0 0.2em; }
.igsa-curr__groupline { font-size: clamp(15px, 1.5vw, 22px); font-weight: 400; margin: 0; }

/* Closing note under the rows. */
.igsa-curr__outro {
	position: relative; left: 50%; transform: translateX(-50%);
	/* Band width. The source does NOT clamp this to the viewport and does not cap
	   it at 1280 — measured on three independent components (about checkerboard,
	   contact row, curriculum rows), its half-width is
	       max(490px, (100vw - 160px) / 2)
	   giving 490 / 490 / 560 / 640 / 880 at 768 / 1024 / 1280 / 1440 / 1920.
	   `min(1280px, 100vw)` squeezed the halves to 384 at 768 and capped them at
	   640 from 1440 up, which is why the clone's page height moved with the
	   viewport while the source's is constant to the pixel at every width. */
	width: max(980px, calc(100vw - 160px)); max-width: none !important;
	margin: 0 0 4rem;
	padding: 0 clamp(1rem, 5vw, 150px);
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--rubik), sans-serif;
	color: var(--wp--preset--color--navy);
}
.igsa-curr__outro-lead { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; margin: 0 0 0.8em; }
.igsa-curr__outro.is-list ul { margin: 0; padding-left: 2.4em; list-style: disc; }
.igsa-curr__outro.is-list li { font-size: clamp(16px, 1.4vw, 20px); font-weight: 300; margin: 0 0 0.15em; }
.igsa-curr__outro.is-centered { text-align: center; }
.igsa-curr__outro-line { font-size: clamp(16px, 1.4vw, 20px); font-weight: 400; margin: 0; }
.igsa-curr__outro-line.is-strong { font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; }

@media (max-width: 767.98px) {
	/* The source's phone canvas is a flat 320px. Four components use the desktop
	   full-bleed band idiom `width: max(980px, 100vw - 160px)` with a -50% pull,
	   which on a 320 canvas resolves to 980 and hangs 330px off both edges. On the
	   phone canvas they are simply the canvas width. */
	.igsa-contact-row,
	.igsa-curr,
	.igsa-curr__outro,
	.igsa-check.wp-block-columns {
		/* Full canvas, not the content column: the theme's root padding insets the
		   content area 16px each side and the source's phone bands are flush to the
		   canvas edges. `width: auto` plus symmetric negative margins expands the box
		   to exactly the canvas without naming a length.
		   !important is load-bearing here: WordPress prints
		   `.is-layout-constrained > .alignwide { margin-left: auto; margin-right: auto }`
		   inline in <head>, after this stylesheet, at the same specificity - without it
		   the negative margins are dropped and the band overflows by the root padding. */
		width: auto !important; max-width: none !important;
		left: auto; transform: none;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	/* .igsa-tr-row uses the same desktop band expression, which on the 320 canvas
	   resolves to 980 and overflows by 660px. It is the canvas width on a phone. */
	.igsa-tr-row { width: 100% !important; max-width: 100% !important; }
	/* Blog cards span the whole 320 canvas on the source (photo 320x213 at x=0); the
	   clone's sat in the 288px content column, so every card photo was 192px tall
	   instead of 213 and the page came out short. */
	.igsa-blog-cards {
		width: auto !important; max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	/* The source serves 320x200 phone crops of the trainings photos; the clone's
	   desktop originals rendered 340px tall, ~140px of excess on every one of the
	   seven rows. Measured 2026-08-16 at 360x740. */
	.igsa-tr-photo img { height: 200px !important; min-height: 0 !important; }
	.igsa-curr__row { grid-template-columns: 1fr; }
	.igsa-curr__row.is-photo-left .igsa-curr__media,
	.igsa-curr__row .igsa-curr__media { order: 1; }
	.igsa-curr__row.is-photo-left .igsa-curr__text,
	.igsa-curr__row .igsa-curr__text { order: 0; }
	.igsa-curr__text { padding: 1.8rem 6%; }
	/* The source's phone canvas serves its own crops of the curriculum photos —
	   320x200 for the first two rows and 320x213 for the rest — where the clone's
	   single image set is near-square and rendered 325-350px tall with height:auto.
	   That was 438px of accumulated page height on this route alone. */
	.igsa-curr__media img { height: 200px; min-height: 0; object-fit: cover; }
	.igsa-curr__row:nth-child(3) .igsa-curr__media img,
	.igsa-curr__row:nth-child(4) .igsa-curr__media img,
	.igsa-curr__row:nth-of-type(3) .igsa-curr__media img,
	.igsa-curr__row:nth-of-type(4) .igsa-curr__media img { height: 213px; }
}

/* ============================================================================
   "İÇ MİMARLIK" overview page (source: /social-studies). Measured at 1440px:
   75px Poppins SemiBold title, 22px strap-line, a full-bleed burgundy band 519px
   tall carrying a 960x550 still that overhangs the band's lower edge, then a
   776px text column and two 256px burgundy buttons.
   ========================================================================== */
.igsa-ov__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: clamp(34px, 5.2vw, 75px);
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
	text-align: center;
	margin: clamp(2rem, 5.5vw, 80px) 0 0;
}
.igsa-ov__sub {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 200;
	font-size: clamp(16px, 1.55vw, 22px);
	color: var(--wp--preset--color--navy);
	text-align: center;
	margin: 1.6rem 0 0;
}
.igsa-ov__band {
	position: relative; left: 50%; transform: translateX(-50%);
	width: 100vw; max-width: none !important;
	margin: 3.2rem 0 0;
	padding: 0 1rem;
	box-sizing: border-box;
}
/* The burgundy stops 80.6% of the way down the block, so the still overhangs it
   onto the white below — exactly as on the source (519px band, 550px still). */
.igsa-ov__band::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80.6%;
	background: var(--wp--preset--color--burgundy);
}
.igsa-ov__band img {
	position: relative; z-index: 1;
	display: block; width: min(960px, 100%); height: auto;
	margin: clamp(28px, 6.5vw, 94px) auto 0;
}
.igsa-ov__body {
	max-width: 776px;
	margin: 3.4rem auto 4rem;
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--navy);
}
.igsa-ov__h { font-size: clamp(18px, 1.55vw, 22px); font-weight: 200; margin: 2.4rem 0 0.8rem; color: inherit; }
.igsa-ov__h:first-child { margin-top: 0; }
.igsa-ov__list { margin: 0; padding-left: 2rem; list-style: disc; }
.igsa-ov__list li { font-size: 16px; font-weight: 200; line-height: 1.55; margin: 0 0 0.2rem; }
.igsa-ov__p { font-size: 16px; font-weight: 200; line-height: 1.55; margin: 0; }
.igsa-ov__cta { display: flex; flex-wrap: wrap; gap: clamp(1rem, 11vw, 152px); margin: 4rem 0 0; }
.igsa-ov__cta a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 256px; max-width: 100%; min-height: 46px;
	background: var(--wp--preset--color--burgundy); color: #fff;
	font-size: 16px; font-weight: 200; text-decoration: none;
}
/* Swap handled by the CTA-family block near the end of this file: the source turns
   this button white with an #8B0000 label, it does not darken the burgundy. */
@media (max-width: 767.98px) {
	.igsa-ov__cta { gap: 1rem; }
	.igsa-ov__cta a { width: 100%; }
}

/* ============================================================================
   Course page heading + hero video band + price cards — measured on the live
   source at 1440px, 2026-08-08.
   ========================================================================== */
.igsa-course-title {
	text-align: center;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.5rem;
}
.igsa-course-title.is-rubik {
	font-family: var(--wp--preset--font-family--rubik);
	font-size: clamp(24px, 2.6vw, 37px);
	font-weight: 500;
	line-height: 1.35;
}
.igsa-course-title.is-poppins {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(34px, 5.2vw, 75px);
	font-weight: 600;
	line-height: 1.15;
	margin-top: 1.6rem;
}

/* The source drops its intro video into a full-width burgundy band (343px tall,
   680px player). Later videos on the same page sit on white. */
.igsa-course .igsa-video.is-hero {
	position: relative; left: 50%; transform: translateX(-50%);
	width: 100vw; max-width: none !important;
	background: var(--wp--preset--color--burgundy);
	margin: 1.6rem 0 2.2rem;
	padding: 2px 1rem;
	box-sizing: border-box;
}
/* Two of the courses use a different Wix page layout that starts its title 59px lower
   than the rest: measured 2026-08-18 at 1440x900, the source paints the first line at
   y256 on "Fotoğraf ve Video" and "sanat tarihi" against y165-171 on every other course,
   and the clone was rendering all of them from the same template at y197. Scoped by page
   so the courses that already agree are untouched. */
body.igsa-p--fotograf-ve-video .igsa-course,
body.igsa-p--photography-and-video .igsa-course,
body.igsa-p--sanat-tarihi-kursu .igsa-course,
body.igsa-p--art-history .igsa-course {
	/* The block editor writes the course template's padding inline, so this has to
	   shout to reach it. */
	padding-top: calc(var(--wp--preset--spacing--40) + 59px) !important;
}

/* The centring has to name the IMG as well as the VIDEO: several courses use a still
   photograph as their hero, and with only `video` in the selector the image sat at the
   band's 1rem padding — x16 instead of the source's x295 for an 852px hero on a 1440
   canvas. The width cap stays video-only; a hero photo keeps its own width. */
.igsa-course .igsa-video.is-hero video,
.igsa-course .igsa-video.is-hero img { display: block; margin-inline: auto; }
.igsa-course .igsa-video.is-hero video { width: min(680px, 100%); }

/* Price cards: 350px dark-red panels, 38px apart, centred. */
.igsa-course-cards {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 38px;
	margin: 2.6rem 0 2rem;
	position: relative; left: 50%; transform: translateX(-50%);
	width: min(1100px, 100vw); max-width: none !important;
	padding-inline: 1rem; box-sizing: border-box;
}
.igsa-course-card {
	flex: 0 1 350px; max-width: 350px; min-height: 464px;
	background: #8b0000; color: #fff;
	display: flex; flex-direction: column; align-items: center;
	padding: 40px 22px 34px; box-sizing: border-box; text-align: center;
	font-family: var(--wp--preset--font-family--poppins);
}
/* The source sets every card line in Poppins 700 with `line-height: normal`,
   not a mix of 600/200 on a 1.3-1.55 leading (measured on /moda-tasarim-kursu at
   1440: 22px/700, 22px/700, 15px/700, all `normal`). These are <h4> elements now,
   so the margins are stated to keep the heading defaults out. */
.igsa-course-card__h   { font-size: 22px; font-weight: 700; line-height: normal; margin: 0 0 1.4rem; }
.igsa-course-card__sub { font-size: 22px; font-weight: 700; line-height: normal; margin: 0 0 1.6rem; }
.igsa-course-card__mid { font-size: 19px; font-weight: 700; line-height: normal; margin: 0 0 1.2rem; }
.igsa-course-card__body{ font-size: 15px; font-weight: 700; line-height: normal; margin: 0 0 1.2rem; }
.igsa-course-card__cta { margin: auto 0 0; }
.igsa-course-card__cta a {
	display: inline-block; padding: 9px 24px;
	border: 1px solid #fff; color: #fff; font-size: 16px; font-weight: 200; text-decoration: none;
}
/* Swap handled by the CTA-family block near the end of this file. */

/* Copy the source prints below the cards, and the closing CTA row. */
.igsa-course-after { margin: 2.4rem auto 0; }
.igsa-course-after__name { font-weight: 600; margin: 0.9rem 0 0; }
.igsa-course-after p { margin: 0; }
.igsa-course-ctarow {
	display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 56px);
	margin: 2.6rem 0 0;
}
.igsa-course-ctarow a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 210px; min-height: 42px; padding: 6px 22px;
	background: var(--wp--preset--color--burgundy); color: #fff;
	font-size: 16px; font-weight: 200; text-decoration: none; text-align: center;
}
/* Swap handled by the CTA-family block near the end of this file. */
@media (max-width: 767.98px) {
	.igsa-course-card { min-height: 0; }
}

/* The per-course body overrides (Rubik / ink / bold) must not reach inside the
   dark-red price cards, which are always white Poppins on the source. */
.igsa-course .wp-block-post-content .igsa-course-card p,
.igsa-course--ink .igsa-course .wp-block-post-content .igsa-course-card p,
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-card p,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-card p {
	color: #fff;
	font-family: var(--wp--preset--font-family--poppins);
}
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-card__h,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-card__h { font-weight: 700; font-size: 22px; }
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-card__sub,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-card__sub { font-weight: 700; font-size: 22px; }
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-card__body,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-card__body { font-weight: 700; font-size: 15px; }
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-card__mid,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-card__mid { font-weight: 700; font-size: 19px; }
.igsa-course .wp-block-post-content .igsa-course-card__cta a { color: #fff; }
/* ...and the swapped label has to out-specify that, or the fill turns white on hover
   while the label stays white on white. Gated like the rest of the CTA family. */
@media (hover: hover) {
	.igsa-course .wp-block-post-content .igsa-course-card__cta a:hover { color: #8b0000; }
}
@media (hover: none) {
	.igsa-course .wp-block-post-content .igsa-course-card__cta a:active { color: #8b0000; }
}
/* The card CTA's swap is handled by the gated CTA family at the end of this file; an
   ungated colour-only rule here kept firing on hover at phone widths, where the
   source moves the swap to the press. */
/* Names in the source's graduate list are set semibold. */
.igsa-course .wp-block-post-content .igsa-course-after__name,
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-after__name,
.igsa-course--bold .igsa-course .wp-block-post-content .igsa-course-after__name { font-weight: 600; }
.igsa-course .wp-block-post-content .igsa-course-ctarow a { color: #fff; }
/* ...and the swapped label has to out-specify that. Without this the fill turned white
   on hover while the label stayed white on white. */
@media (hover: hover) {
	.igsa-course .wp-block-post-content .igsa-course-ctarow a:hover { color: #8b0000; }
}
@media (hover: none) {
	.igsa-course .wp-block-post-content .igsa-course-ctarow a:active { color: #8b0000; }
}

/* Sertifikalı Resim prints a second strap-line under its heading in its own
   rust colour (#9B3314), above the usual navy one. */
.igsa-course-strap {
	text-align: center;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(20px, 2vw, 29px);
	font-weight: 600;
	line-height: 1.3;
	color: #9b3314;
	margin: 0 0 0.4rem;
}
.igsa-course .wp-block-post-content .igsa-course-strap,
.igsa-course--rubik .igsa-course .wp-block-post-content .igsa-course-strap { color: #9b3314; }

/* Event card share row — the source closes the card with three monochrome icons. */
.igsa-event__share { display: flex; justify-content: center; gap: 26px; margin: 1.6rem 0 1.8rem; }
.igsa-event__share a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; color: var(--wp--preset--color--navy);
}
.igsa-event__share svg { fill: currentColor; }
/* No hover: measured on the source, these three icons report 0 hover and 0 active
   changes with `transition: all 0s`. The burgundy tint was invented. */

/* Hakkımızda checkerboard: the source runs the two photo/burgundy rows across a
   1280px band (two 640px halves, no gap) with 640x709 and 640x586 photos. */
.igsa-check.wp-block-columns {
	position: relative; left: 50%; transform: translateX(-50%);
	/* Band width. The source does NOT clamp this to the viewport and does not cap
	   it at 1280 — measured on three independent components (about checkerboard,
	   contact row, curriculum rows), its half-width is
	       max(490px, (100vw - 160px) / 2)
	   giving 490 / 490 / 560 / 640 / 880 at 768 / 1024 / 1280 / 1440 / 1920.
	   `min(1280px, 100vw)` squeezed the halves to 384 at 768 and capped them at
	   640 from 1440 up, which is why the clone's page height moved with the
	   viewport while the source's is constant to the pixel at every width. */
	width: max(980px, calc(100vw - 160px)); max-width: none !important;
	/* alignwide's auto margins would fight the breakout offset */
	margin-inline: 0 !important;
	gap: 0 !important;
	align-items: stretch;
}
/* border-box so the burgundy column's padding stays inside its 640px half — without
   it the half measured 656px and pushed the facing photo down to 624px. */
.igsa-check.wp-block-columns > .wp-block-column { padding: 0; flex: 1 1 50% !important; min-width: 0; box-sizing: border-box; }
.igsa-check .wp-block-column.is-vertically-aligned-center {
	align-self: stretch;
	display: flex; flex-direction: column; justify-content: center;
}
/* The source insets the burgundy copy to ~407px inside its 640px half; letting it run
   the full half wraps the text into far fewer lines and made the page ~330px shorter
   than the source. (640 - 407) / 2 = 116px, relaxed to a proportional inset so the
   copy still breathes on a phone. */
.igsa-check .wp-block-column.has-background {
	padding: clamp(1.6rem, 3.6vw, 52px) clamp(1.2rem, 8.05vw, 116px);
}
/* The burgundy copy is tracked 0.05em on the source at every width; its 28.8px
   rhythm is a 980-canvas value only — the phone canvas sets this copy at 12px,
   so leaving the 28.8px unscoped made the phone About page 227px taller than
   the source's. */
.igsa-check .wp-block-column.has-background p { letter-spacing: .05em; }
@media (min-width: 768px) {
	.igsa-check .wp-block-column.has-background p { line-height: 28.8px; }
}
.igsa-check .wp-block-image { margin: 0; height: 100%; }
/* Fixed HEIGHT, cropped width — the source's photos are 709px and 586px tall at
   every desktop width and only their width grows (490 → 880). An aspect-ratio
   scaled them instead, so the page height tracked the viewport. */
.igsa-check.is-row1 .wp-block-image img { width: 100%; height: 709px; object-fit: cover; }
.igsa-check.is-row2 .wp-block-image img { width: 100%; height: 586px; object-fit: cover; }
@media (max-width: 767.98px) {
	/* Specificity must match the desktop rules above, which use
	   `.igsa-check.wp-block-columns > .wp-block-column` to get past WordPress's
	   own sub-782px stacking. Without that the 980px band and the 50% halves
	   leaked onto the 320 canvas and blew the layout viewport out to 650. */
	.igsa-check.wp-block-columns { flex-direction: column; width: auto; }
	.igsa-check.wp-block-columns > .wp-block-column { flex: 1 1 100% !important; }
	.igsa-check .wp-block-image img { aspect-ratio: auto; height: auto; }
	.igsa-check.is-row1 .wp-block-image img,
	.igsa-check.is-row2 .wp-block-image img { height: auto; }
	/* The checkerboard alternates photo/text per ROW, so row 2 is authored
	   text-then-photo to keep the desktop chequer. Stacking it in DOM order puts
	   two text blocks together and pushes the second photo below both, which is
	   not what the source's phone canvas paints — it alternates photo, text,
	   photo, text all the way down. Reverse row 2 only. */
	.igsa-check.is-row2.wp-block-columns { flex-direction: column-reverse; }
	/* The source centres the burgundy copy on the 320 canvas (its lines are
	   ragged on both sides); the clone inherited the desktop left alignment. */
	.igsa-check .wp-block-column.has-background { text-align: center; }
}

/* Course cards: the source's phone layout prints a hint line and a "Detaylı Bilgi"
   button inside each card. Its desktop layout only reveals them on hover, so they
   stay hidden above the phone breakpoint. */
.igsa-card__hint,
.igsa-card__cta { display: none; }
@media (max-width: 767.98px) {
	.igsa-card__hint,
	.igsa-card__cta { display: block; }
	/* Measured on the source 2026-08-09 @360 (320 canvas): the hint line sets at
	   15px and the "Detaylı Bilgi" link at ~16px, not 13. */
	.igsa-card__hint {
		margin: 0.6rem 0 0; font-size: 15px; font-weight: 200; line-height: 1.45;
		color: #fff; text-align: center;
	}
	.igsa-card__cta { margin: 0.9rem 0 0.2rem; text-align: center; }
	.igsa-card__cta a {
		display: inline-block; padding: 7px 20px;
		border: 1px solid #fff; color: #fff; font-size: 16px; font-weight: 200; text-decoration: none;
	}
}

/* Product page: the source closes with a share row and a link back to the store. */
.igsa-product__share {
	display: flex; flex-wrap: wrap; gap: 1.2rem;
	margin: 1.6rem 0 0; font-size: 14px; font-weight: 200;
}
.igsa-product__share a { color: var(--wp--preset--color--navy); text-decoration: underline; }
.igsa-product__back { margin: 2.4rem 0 0; font-size: 15px; font-weight: 200; }
.igsa-product__back a { color: var(--wp--preset--color--navy); }

/* ============================================================================
   Space under the header. The block theme's <main> has no padding, so the first
   heading's top margin collapses straight out of it and every curated page hugs
   the 155px header. A flow root contains the margin; the values are the gaps the
   source leaves below its own header, measured at 1440px on 2026-08-08:
   ~72px under the big lower-case page titles, 50px above the store banner,
   9px on the "klasik eğitim programı" pages, 0 on the home hero.
   ========================================================================== */
.wp-site-blocks > main { display: flow-root; }
.wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
.wp-site-blocks > main > .wp-block-post-content > .wp-block-heading:first-child:not(.screen-reader-text) {
	/* beats core's `:where(.is-layout-constrained) > :first-child { margin-block-start: 0 }` */
	margin-block-start: clamp(1.5rem, 5vw, 72px) !important;
}
.wp-site-blocks > main > .wp-block-post-content > .igsa-shop-banner:first-child,
.wp-site-blocks > main > .wp-block-post-content > .igsa-shop-banner { margin-top: clamp(1rem, 3.5vw, 50px); }
/* The "klasik eğitim programı" pages sit almost flush under the header on the source. */
.wp-site-blocks > main > .wp-block-post-content > h1.igsa-curr__title:first-child:not(.screen-reader-text),
.wp-site-blocks > main > .wp-block-post-content > .igsa-curr__title { margin-block-start: 9px !important; }
/* home.html pads its own <main>; top it up to the source's 231px title position. */
.wp-site-blocks > main > .igsa-page-title:first-child { margin-block-start: clamp(0.5rem, 2.8vw, 40px) !important; }

/* ==========================================================================
   Phone type scale.

   The source authors its phone layout on a 320px canvas that the browser then
   scales up (see the width=320 viewport it serves below 768px), and that canvas
   is set ~2px smaller and solid — line-height: normal, not the 1.65 the desktop
   copy uses. Reproducing only the desktop sizes left every WordPress text block
   25-30% taller than the source at 360px: Hakkımızda ran 4690px against the
   source's 3746, and Desen / Yağlı Boya 3499 against 2599.

   The values below are the source's own, measured at 360px (its 320 canvas x
   1.125) on 2026-08-08. Scoped to the content area — the header, footer and card
   chrome already measure within a couple of px of the source.
   ========================================================================== */
@media (max-width: 767.98px) {
	.entry-content p,
	.entry-content li,
	.wp-block-post-content p,
	.wp-block-post-content li {
		font-size: 14px;
		line-height: 1.5;
	}
	/* the burgundy checkerboard leads are 18px on the source's phone canvas, and the
	   KURULUŞ / DİSİPLİNLER sub-headings ~25px — both carry !important in the desktop
	   rule above, so the override needs it too */
	.igsa-check__h { font-size: 18px !important; line-height: 1.25; }
	.igsa-sub-h { font-size: 25px !important; }
	/* Rubik course pages on the phone canvas. Measured run-by-run on
	   /guzel-sanatlara-hazirlik-kursu at 360 (2026-08-09): body 16px Rubik Light
	   on a 22.4px line, headings 20px/700 — not the 18px/26.1 the clone used,
	   which alone made that page 5749 against the source's 4255. */
	.igsa-course--rubik .igsa-course .wp-block-post-content p,
	.igsa-course--rubik .igsa-course .wp-block-post-content li { font-size: 16px; line-height: 22.4px; }
	.igsa-course--rubik .igsa-course-h { font-size: 20px; font-weight: 700; line-height: 22.4px; }

	/* ---- per-page phone sizes, measured run-by-run on the live source --------
	   14px above was an average across templates that the source never uses. A
	   style census of the captured probes at 360x740 (source vs clone, per page)
	   gives the authored value for each:

	     page                     source phone body   was
	     Hakkımızda / About Us    12px                14
	     legal (3 pages x2 langs) 16px                18
	     Poppins course pages     13px                14
	     blog post                16px Helvetica 400  14 / 200

	   These are not a scale — they are what each page was set to in the Wix
	   editor, and they are why the clone's phone pages ran 25-30% tall. */
	.igsa-legal p,
	.igsa-legal li { font-size: 16px; line-height: 25px; }

	.igsa-p--hakkimizda .entry-content p,
	.igsa-p--hakkimizda .entry-content li,
	.igsa-p--about-us .entry-content p,
	.igsa-p--about-us .entry-content li { font-size: 12px; }

	/* Poppins course pages (the Rubik and bold ones have their own rules) */
	body:not(.igsa-course--rubik) .igsa-course .wp-block-post-content p,
	body:not(.igsa-course--rubik) .igsa-course .wp-block-post-content li { font-size: 13px; }

	.igsa-post .wp-block-post-content p,
	.igsa-post .wp-block-post-content li { font-size: 16px; font-weight: 400; }

	/* curriculum: the source keeps its list copy at 18px on the phone and only
	   shrinks the headings (35→22) and the meta lines (18→17) */
	.igsa-curr__title { font-size: 28px; }
	.igsa-curr__sub { font-size: 19px; }
	.igsa-curr__eyebrow, .igsa-curr__h { font-size: 22px; }
	.igsa-curr__meta { font-size: 17px; }
	.igsa-curr__list li { font-size: 18px; }
}

/* ============================================================================
   Teşekkürler / Thanks — measured on the source at 1440 (2026-08-09):
   full-bleed 1440x691 photo at y155, centred 56px SemiBold heading at y374,
   a 385px-wide 16px paragraph at y489, a 14px tel link at y656.
   ========================================================================== */
.igsa-thanks__hero {
	display: block; width: 100vw; max-width: none !important; height: auto;
	position: relative; left: 50%; transform: translateX(-50%); margin: 0;
	aspect-ratio: 1440 / 691; object-fit: cover;
}
/* The copy sits ON the photo: the source's hero spans y155..846 and its heading,
   paragraph and link are at y374 / y489 / y656 — 219 / 334 / 501 into the band. */
.igsa-thanks {
	position: relative; text-align: center;
	margin-top: -691px; height: 691px; box-sizing: border-box; padding-top: 219px;
}
/* The source does not print this copy straight onto the photograph — it lays a white
   card over it (600x443 at x420,y299 on the 1440 canvas; 290x443 at x15,y210 on the
   320 one) and the text sits on that. Without the card the paragraph is grey-on-sand
   and effectively unreadable. */
.igsa-thanks::before {
	content: ""; position: absolute; z-index: 0;
	left: 50%; transform: translateX(-50%);
	top: 144px; width: 600px; height: 443px;
	background: #fff;
}
.igsa-thanks > * { position: relative; z-index: 1; }
.igsa-thanks__h {
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 56px; font-weight: 600; line-height: 1.4;
	color: var(--wp--preset--color--navy); margin: 0; text-transform: none;
}
.igsa-thanks__p {
	font-size: 16px; font-weight: 200; line-height: 22.4px;
	max-width: 385px; margin: 36px auto 0;
}
/* The call to action is a solid violet button in the source (rgb(92,90,219),
   142x40 at x649,y645 on the desktop canvas), not an underlined navy link. */
.igsa-thanks__cta { margin: 12.5px 0 0; }
.igsa-thanks__cta a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 142px; height: 40px; box-sizing: border-box;
	background: rgb(92, 90, 219); color: #fff;
	font-size: 14px; font-weight: 200; text-decoration: none;
	/* 0.2s here, not the 0.4s the burgundy buttons use — measured on the source. */
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* Measured on the source's thank-you page: the violet fill goes #5C5ADB -> #FFFFFF with
   the label going #FFFFFF -> #5C5ADB over 0.2s. The clone darkened the fill to #4A48BE,
   left the label white and had no transition. */
/* The label colour carries !important for one reason: assets/css/type-source.css, which
   transcribes the source's per-element typography, pins this anchor's colour with
   `color: rgb(255,255,255) !important` on a positional selector. Without matching it the
   fill went white and the label stayed white — invisible text on a white button. This is
   the only way to win against an !important, and it is scoped to this one control. */
@media (hover: hover) {
	.igsa-thanks__cta a:hover { background: #fff; }
	body.igsa-p--tesekkurler #wp--skip-link--target .igsa-thanks__cta a:hover { color: rgb(92, 90, 219) !important; }
}
@media (hover: none) {
	.igsa-thanks__cta a:active { background: #fff; }
	body.igsa-p--tesekkurler #wp--skip-link--target .igsa-thanks__cta a:active { color: rgb(92, 90, 219) !important; }
}
.igsa-thanks__cta a:focus-visible { outline: none; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #116dff; }
@media (max-width: 767.98px) {
	/* The phone canvas crops the same photo taller — 320x483 at y190 — and places
	   the copy at y240 / y322 / y590, i.e. 50 / 132 / 400 into the band. */
	.igsa-thanks__hero { aspect-ratio: 320 / 483; }
	.igsa-thanks { margin-top: -483px; height: 483px; padding-top: 50px; }
	.igsa-thanks__h { font-size: 30px; }
	/* 16px on a 28.8px line, measured: 8 lines in a 221px box = 225px tall */
	.igsa-thanks__p { font-size: 16px; line-height: 28.8px; max-width: 221px; margin-top: 39px; }
	.igsa-thanks::before { top: 20px; width: 290px; height: 443px; }
	/* phone button: 170x42 at x75,y577 -> 387 into the 483 band */
	.igsa-thanks__cta { margin-top: 26px; }
	.igsa-thanks__cta a { width: 170px; height: 42px; }
}

/* ============================================================================
   Phone canvas (320px) — measured on the live source 2026-08-09.
   Both sides serve `width=320` to phone User-Agents, so every number below is
   the source's own authored value and the browser magnifies both identically.
   ========================================================================== */
@media (max-width: 767.98px) {
	/* header: 190px, logo 176x61 at x=19, TR/EN row at y=90, buttons at y=140 */
	/* 141px white row + the 49px burgundy bar = the source's 190px header; the
	   two quick-link buttons sit ON the burgundy bar, as they do on the source. */
	.igsa-header__utility { display: block; position: relative; min-height: 141px; padding: 0; }
	.igsa-header__brand { position: absolute; left: 19px; top: 13px; transform: none; order: 0; flex-basis: auto; }
	.igsa-header__brand .wp-block-site-logo img { width: 176px; }
	/* TR|EN switcher: the source's phone box is 261x26 at x28,y98 — the same
	   bordered container as the desktop one, just wider and shorter, so only
	   the box changes here and the flex split above still places the labels
	   (source ink x: TR 43, EN 172.09). */
	.igsa-header__utility-left { position: absolute; left: 28px; top: 98px; gap: 0; }
	.igsa-header__utility-left .igsa-social { display: none; }
	.igsa-lang { width: 261px; height: 26px; }
	/* quick links: two 120x42 burgundy buttons at x28 and x169, y140 (source) */
	.igsa-header__quicklinks { position: absolute; left: 0; right: 0; top: 140px; z-index: 2; }
	.igsa-header__quicklinks .wp-block-buttons { justify-content: flex-start; gap: 21px; padding-left: 28px; }
	/* nowrap: the English label "Training Packages" inks 123px, 3px wider than
	   the source's own 120px button, and the source lets it overhang on one
	   line rather than wrapping. */
	.igsa-btn-sm .wp-block-button__link { width: 120px; min-height: 42px; font-size: 13.93px; line-height: 19.51px; white-space: nowrap; }

	/* programme cards: one 280px column, photos 280x223 (the 2D&3D card 280x373),
	   and the source re-orders them on the phone */
	/* The phone programme grid is hand-placed, exactly like the desktop one.
	   A uniform 109px gap put card 8 at y4796 against the source's y4378 — the
	   whole 440px by which the phone home ran tall. Measured photo tops on the
	   source's 320 canvas (2026-08-09), first card at y932:
	     932 1434 1939 2451 2907 3375 3909 4378
	   i.e. pitches 502 505 512 456 468 534 469, which no single gap produces.
	   Absolutely placed against a fixed canvas, as .igsa-programs already is
	   above 768px. Height = last top + its photo + caption (223 + 180). */
	.igsa-programs {
		position: relative; display: block; gap: 0;
		/* break out of the content column's 16px side padding so `left` below is
		   measured from the edge of the 320 canvas, as the source's x19 is */
		height: 3869px; width: auto; margin: 0 -16px !important; padding: 0;
	}
	.igsa-programs > .igsa-card {
		position: absolute; left: 19px; width: 280px; max-width: 280px; flex: none;
		/* the stacked-flow rule gives every card but the first a 16px top margin,
		   which still offsets an absolutely-placed box from its `top` */
		margin: 0;
	}
	.igsa-programs > .igsa-card:nth-child(1) { top: -5px; }
	.igsa-programs > .igsa-card:nth-child(2) { top: 497px; }
	.igsa-programs > .igsa-card:nth-child(3) { top: 1002px; left: 20px; }
	.igsa-programs > .igsa-card:nth-child(4) { top: 1514px; left: 21px; }
	.igsa-programs > .igsa-card:nth-child(5) { top: 1970px; }
	.igsa-programs > .igsa-card:nth-child(6) { top: 2438px; }
	.igsa-programs > .igsa-card:nth-child(7) { top: 2972px; }
	.igsa-programs > .igsa-card:nth-child(8) { top: 3441px; }
	.igsa-programs > .igsa-card > figure.wp-block-image img { aspect-ratio: 280 / 223; }
	/* the 2D & 3D card is the tall one on the phone (280x373) */
	.igsa-programs > .igsa-card:nth-child(3) > figure.wp-block-image img { aspect-ratio: 280 / 373; }
	.igsa-card .wp-block-heading a { font-size: 27px; }
	.igsa-card--t29 .wp-block-heading a { font-size: 27px; }
	/* Qualified with .igsa-card so these beat `.entry-content p` (0,1,1), which was
	   out-specifying the bare class and printing the source's 15px hint at 14px —
	   which then re-wrapped the caption and moved everything below it. */
	.igsa-card .igsa-card__sub, .igsa-card .igsa-card__hint { font-size: 15px; font-weight: 200; }
	.igsa-section-title { font-size: 27px !important; }
	.igsa-newsletter input[type=submit], .igsa-newsletter button[type=submit] { font-size: 12.93px; }

	/* newsletter: 19px heading, 15px bold sub, 16px label */
	.igsa-newsletter .igsa-section-title { font-size: 19px; margin-bottom: 18px; }
	.igsa-newsletter__sub { font-size: 15px; margin-bottom: 30px; }
	.igsa-newsletter label { font-size: 16px; }

	/* footer: the source's phone footer drops the brand block and the main quick
	   menu (both reachable from the hamburger) and keeps only the contact block,
	   the three legal links and the credit line — 608px instead of 1298px. */
	/* The brand NAME and logo go, but the payment band stays: the source's phone
	   footer still paints logo_band_white_1X.png at 190x24, x64 (centred on the
	   320 canvas), as the last thing on the page. Hiding the whole brand column
	   dropped it, which is one missing image on all 61 routes x 6 phone widths. */
	.igsa-footer__brand { display: block !important; order: 99; }
	.igsa-footer__brand > *:not(.igsa-footer__pay) { display: none !important; }
	.igsa-footer__brand .igsa-footer__pay {
		display: block !important; width: 190px; height: auto; max-width: 190px;
		margin: 24px auto 0;
	}
	.igsa-footer__menu .igsa-footer__h { display: none; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item:nth-child(-n+4) { display: none; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation__container { columns: 1; }
	/* the source centres the three legal links on the canvas (Gizlilik inks at
	   x108.84..211, centre 160); left-aligned <li>s put them at centre 65 */
	.igsa-footer__menu .wp-block-navigation { display: block !important; }
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation__container { display: block; text-align: center; }
	/* Same line-box rhythm as the desktop column: the pitch is the link's own
	   line-height and there is no margin. Measured source tops on the 320 canvas
	   are 828 → 861.1 → 892.3 (pitch ~33/31); the clone's leftover 19px
	   margin-bottom on top of a 31.2px line box gave 50.2, so the three legal
	   links spread 51px further apart than the source's over the block. */
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item { display: block; margin: 0; margin-left: 0; text-align: center; }
	.igsa-footer__menu .wp-block-navigation-item__content { font-size: 13px; line-height: 31.2px; display: inline; }
	/* Wix authored the first of the three at 2.7em and the other two at 2.4em. */
	.igsa-footer__menu .wp-block-navigation .wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__content { line-height: 35.1px; }
	.igsa-footer__contact { text-align: center; }
	.igsa-footer__contact .igsa-footer__h { font-size: 16px; text-align: center; max-width: none; }
	.igsa-footer__contact p { font-size: 12px; line-height: 26.4px; max-width: none; }
	/* No width rule here either — see the base rule above. The source's phone
	   labels ink 58.9px ("Gsm:") and 154.8px ("Telefon: …" including the nested
	   number), which the same character run reproduces at 12px. */
	/* credit line: 12px in a 241px box, so it breaks over two lines exactly as
	   the source's does (its <a>Zum Kreatif</a> straddles the break, which is why
	   that run measures 204x35 and not 66x17) */
	p.igsa-footer-copyright { font-size: 12px; width: 241px; margin-inline: auto; padding: 0; }

	/* "Akademiden Kareler": the phone shows a horizontally scrolling strip of
	   300x291 tiles (the source starts its second tile at x=310, off-canvas). */
	.igsa-kareler {
		display: flex !important; grid-template-columns: none;
		/* No scroll-snap: with `x mandatory` Chromium re-snapped the strip during
		   the capture's vertical scroll pass and left it at scrollLeft 2630, so
		   the band painted tiles 10-18 where the source paints tiles 1-2. The
		   source is a plain overflow strip starting at x10. */
		/* flex-start, not the desktop rule's `center`: a centred flex container
		   whose content overflows spills EQUALLY both ways, so at scrollLeft 0
		   the strip painted tiles 10-18 and put tile 1 at x-2620. The source
		   starts at x10 with tile 2 at x310. */
		/* The source's tiles butt together (x10 then x310, 300 wide, no gutter) and
		   the strip starts 10px from the canvas edge, so it breaks out of the
		   content column's 16px inset. */
		gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		/* !important: WordPress's constrained layout sets `margin-left/right: auto
		   !important` on every child of .is-layout-constrained, which otherwise
		   wins over the breakout. */
		width: auto; margin-inline: -16px !important; padding-left: 10px;
	}
	.igsa-kareler figure.wp-block-image { flex: 0 0 300px; }
	.igsa-kareler figure.wp-block-image img { width: 300px; height: 291px; aspect-ratio: auto; }
}

/* Per-page gap between the header and the page title, measured on the source at
   1440px (tools/probe-titles.mjs, 2026-08-16). The source authors this per page;
   the clone applied one averaged 72px to every route. */
body.igsa-p--interior-architecture .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--ic-mimarlik-kursu .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--fashion-design .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--moda-tasarim-kursu .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 10px !important; }
body.igsa-p--desen-yagliboya-kursu .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--drawing-oil-painting .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--portfolio-preparation .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--portfolyo-hazirlik-kursu .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 13px !important; }
body.igsa-p--certified-painting .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--sertifikali-resim-kursu .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 47px !important; }
body.igsa-p--contact .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--iletisim .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 64px !important; }
body.igsa-p--egitimler .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--trainings .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 82px !important; }
body.igsa-p--thank-you .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text),
body.igsa-p--tesekkurler .wp-site-blocks > main > .wp-block-post-content > h1:first-child:not(.screen-reader-text) { margin-block-start: 216px !important; }

/* The source leaves 189px between the last content block and the footer on the
   About page, where the clone's block gap left 16. Measured 2026-08-16 at 1440px. */
@media (min-width: 768px) {
	body.igsa-p--hakkimizda .wp-site-blocks > main > .wp-block-post-content > :last-child,
	body.igsa-p--about-us .wp-site-blocks > main > .wp-block-post-content > :last-child {
		margin-bottom: 189px;
	}
}

/* The source's trainings grid does not reflow: its four rows are 430, 557, 520 and
   555px tall at 1024, 1280, 1440, 1536 and 1920 alike, while the clone's were
   content-driven and grew with the viewport (3242px at 1440 but 3400px at 1536,
   against the source's constant 3229px). Measured 2026-08-16. */
@media (min-width: 768px) {
	body.igsa-p--egitimler .igsa-tr-band.is-inset .igsa-tr-row,
	body.igsa-p--trainings .igsa-tr-band.is-inset .igsa-tr-row { height: 430px; }
	body.igsa-p--egitimler .igsa-tr-band.is-dark:not(.is-wide) .igsa-tr-row,
	body.igsa-p--trainings .igsa-tr-band.is-dark:not(.is-wide) .igsa-tr-row { height: 557px; }
	body.igsa-p--egitimler .igsa-tr-band:not(.is-dark):not(.is-inset):not(.is-wide) .igsa-tr-row,
	body.igsa-p--trainings .igsa-tr-band:not(.is-dark):not(.is-inset):not(.is-wide) .igsa-tr-row { height: 520px; }
	body.igsa-p--egitimler .igsa-tr-band.is-wide .igsa-tr-row,
	body.igsa-p--trainings .igsa-tr-band.is-wide .igsa-tr-row { height: 555px; }
}

/* The source pins its header: `position: sticky; top: 0; z-index: 50`, and it stays
   at y=0 through the whole page. The clone's was static and scrolled away on every
   route. Measured on the live source 2026-08-16. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Only viewports wider than the 980px canvas have room for the source's 1px gallery
   offset; at exactly 980 (the tablet canvas) it would make the page 981px wide. */
@media (min-width: 1024px) { .igsa-kareler { --igsa-kareler-nudge: 1px; } }


/* ============================================================================
   Contact Form 7 honeypot — the plugin prints a real <label> and <input>, and
   without this they render as visible text the source never had.
   ========================================================================== */
.wpcf7-form .wpcf7-honeypot-container,
.wpcf7-form label.hp-message,
.wpcf7-form input[name^="hp-"],
.wpcf7-form label:has(> input[name^="hp-"]) {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* The source sets object-fit: cover on its content images; the clone was leaving
   them at the CSS default (`fill`), which stretches an image whose box does not
   match its intrinsic ratio instead of cropping it the way the source does. */
.wp-block-post-content img,
.entry-content img,
figure.wp-block-image img,
.igsa-card img,
.igsa-kareler img {
	object-fit: cover;
}

/* <picture> wrappers added by igsa-core/inc/phone-images.php must not introduce an
   inline-layout gap where the bare <img> used to sit. */
.igsa-picture { display: block; line-height: 0; }
.igsa-card > figure.wp-block-image .igsa-picture,
.igsa-kareler figure.wp-block-image .igsa-picture { display: block; }

/* An unbreakable token in the legal copy (a bare URL / a long account reference)
   overflowed its inline box on the 320 canvas: no element's border box exceeded the
   canvas, but scrollWidth was 372. The source wraps it, so the clone does too. This
   wraps the word rather than hiding the overflow. */
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
	overflow-wrap: break-word;
}

/* ============================================================================
   Interactive states — transcribed from the live source with
   tools/interaction-probe.mjs on 2026-08-16 by actually hovering each control in
   a browser with motion enabled, not by reading its stylesheet.

   The source's vocabulary is small and consistent:
     buttons   burgundy fill -> white, navy border -> #8b0000, white label ->
               #8b0000, over `border-color, background-color 0.4s ease` with the
               label on its own `color 0.4s ease`
     nav       label #ffffff -> #9b3314 over `color 0.4s ease`, no underline
     links     no change at all (footer menu, social icons, cart bag, brand)
     fields    1px -> 2px border, #800020 -> #1d1d36, instantly, on hover AND focus
     focus     a white+blue box-shadow ring, NOT an outline — see the focus-ring
               block near the top of this file. The source's `outline: none 3px`
               paints nothing; its visible indicator is
               `0 0 0 1px #fff, 0 0 0 3px #116dff` and only appears under real
               keyboard focus
     active    nothing is painted. The source's <a> wrappers flip to the UA's red
               `:active` colour, but every visible glyph is painted by a
               descendant with its own colour, so pressing a link changes zero
               pixels — measured, not assumed
   ========================================================================== */

/* Buttons.
   The swap itself (burgundy fill -> white, navy border -> #8B0000, white label ->
   #8B0000, over 0.4s) is identical on both of the source's canvases. WHICH STATE
   TRIGGERS IT is not:

     desktop canvas (1440)  :hover   — measured on istanbulgsa.com, hover 19 changes,
                                       active 0
     phone canvas  (360)    :active  — measured on the same button, hover 0 changes,
                                       active 23. A touch device has no hover, so Wix
                                       binds the swap to the press instead.

   The clone previously fired the swap on :hover at every width, which is exactly the
   "desktop hover forced onto touch" case: tapping a button on a phone left it stuck in
   its hovered colours, and the press itself did nothing. Gated on the pointer rather
   than on width, because that is the real distinction — the source picks its canvas by
   user agent, and every device that receives the phone canvas reports `hover: none`.

   Declared here rather than in theme.json's `button:hover`, which cannot express a
   media query and would keep re-emitting the hover swap for touch. */
.wp-element-button,
.wp-block-button__link,
.igsa-newsletter input[type="submit"],
.igsa-newsletter button[type="submit"] {
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.igsa-newsletter input[type="submit"]:hover,
	.igsa-newsletter button[type="submit"]:hover {
		background-color: #ffffff;
		color: #8b0000;
		border-color: #8b0000;
	}
}
@media (hover: none) {
	.wp-element-button:active,
	.wp-block-button__link:active,
	.igsa-newsletter input[type="submit"]:active,
	.igsa-newsletter button[type="submit"]:active {
		background-color: #ffffff;
		color: #8b0000;
		border-color: #8b0000;
	}
}

/* The CTA family — every link the source styles and behaves as a button, but which is
   not a WordPress button block. Measured on the source (tools/interaction-lookup.mjs):
   each one performs the same swap as a real button, over the same
   `border-color, background-color 0.4s` with the label on its own `color 0.4s`, and
   each one moves that swap from :hover to :active on the phone canvas.

   Two of these were previously guessed as "darken the burgundy"
   (--wp--preset--color--burgundy-dark, #5C0017) with no transition at all. The source
   turns them white with an #8B0000 label, and takes 0.4s to do it. */
.igsa-ov__cta a,
.igsa-course-ctarow a,
.igsa-course-card__cta a,
.igsa-pricebox .wp-block-button:last-child .wp-block-button__link {
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
@media (hover: hover) {
	.igsa-ov__cta a:hover,
	.igsa-course-ctarow a:hover,
	.igsa-pricebox .wp-block-button:last-child .wp-block-button__link:hover {
		background-color: #ffffff;
		color: #8b0000;
		border-color: #8b0000;
	}
	/* On the burgundy course cards the label is already white on a transparent fill, so
	   the swap fills white and darkens the label without touching the border. */
	.igsa-course-card__cta a:hover {
		background-color: #ffffff;
		color: #8b0000;
	}
}
@media (hover: none) {
	.igsa-ov__cta a:active,
	.igsa-course-ctarow a:active,
	.igsa-pricebox .wp-block-button:last-child .wp-block-button__link:active {
		background-color: #ffffff;
		color: #8b0000;
		border-color: #8b0000;
	}
	.igsa-course-card__cta a:active {
		background-color: #ffffff;
		color: #8b0000;
	}
	/* The source's own touch feedback on its blog cards and course CTAs: the whole
	   control fades to half opacity while held. Measured `opacity: 1 -> 0.5` on every
	   blog card link at 360x740, with no such change at 1440. */
	.igsa-blog-cards > li .wp-block-post-title a:active,
	.igsa-blog-cards > li:active .wp-block-post-title a {
		opacity: 0.5;
	}
	/* The .igsa-tr-btn pair swaps on hover at desktop; on touch it is the press. */
	.igsa-tr-btn:active { background: #fff; border-color: #fff; color: var(--wp--preset--color--burgundy); }
	.igsa-tr-band.is-dark .igsa-tr-btn:active { background: #fff; color: #000; }
}


/* Desktop navigation labels, top level and submenu alike. The label span has to carry
   the transition as well as the anchor: an inherited colour change only animates on an
   element that declares a transition for it, so putting it on the <a> alone left every
   submenu item snapping instantly where the source eases over 0.4s. */
.igsa-header__nav .wp-block-navigation-item__content,
.igsa-header__nav .wp-block-navigation-item__label {
	transition: color 0.4s ease;
}

/* The language switch dims its label rather than tinting its cell, and darkens back
   past its resting colour while held down. The source transitions none of this
   (measured `all 0s` on both buttons), so neither does the clone. */
/* The source's language button also drops to the default arrow while pressed —
   measured cursor pointer -> default alongside the navy/#E8E6E6 swap. */
.igsa-lang__link:active { color: var(--wp--preset--color--navy); background: #e8e6e6; cursor: default; }

/* Newsletter and contact fields: the source thickens the border and swaps burgundy
   for navy, with no transition, and does the same on keyboard focus. */
.igsa-newsletter input[type="email"],
.igsa-newsletter input[type="text"],
.igsa-contact-form input:not([type="submit"]),
.igsa-contact-form textarea {
	transition: none;
}
/* The two form families behave DIFFERENTLY, measured side by side on the source
   (2026-08-17, 1440x900):
     - the footer newsletter field (760x55, 1px #800020) goes to 2px #1D1D36 on hover;
     - the /iletisim contact fields (183x42, 1px #E3E3E3) do not react to hover at all.
   Focus leaves the border alone on both; the focus indicator is the ring above. */
/* Hover applies on BOTH canvases — unlike the buttons, the source does not move this
   one to the press at 360 (measured: hover 1px -> 2px at 1440 AND at 360, no active
   change at either). Focus differs by canvas: the desktop canvas leaves the border
   alone and lets the ring do the work, the phone canvas thickens it. */
.igsa-newsletter input[type="email"]:hover,
.igsa-newsletter input[type="text"]:hover {
	border-width: 2px;
	border-color: var(--wp--preset--color--navy);
}
@media (max-width: 767.98px) {
	.igsa-newsletter input[type="email"]:focus,
	.igsa-newsletter input[type="text"]:focus {
		border-width: 2px;
		border-color: var(--wp--preset--color--navy);
	}
}
/* Fields are indicated ONLY when focus arrived by Tab. Chrome matches :focus-visible on
   any focused text field whatever the modality, so the field rules are additionally gated
   on the keyboard-navigation flag assets/js/a11y.js sets; ungated, every mouse click into
   a field drew a ring the source does not draw (measured on /iletisim: click draws
   nothing, typing draws nothing, Tab draws the indicator). */
/* Submits are buttons, not fields: the source rings Kaydol / Gönder / Register / Send
   like any other button, so they must not be caught by this reset. */
:where(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea):focus-visible
	{ outline: none; box-shadow: none; }

.igsa-kbdnav .igsa-newsletter input[type="email"]:focus-visible,
.igsa-kbdnav .igsa-newsletter input[type="text"]:focus-visible,
.igsa-kbdnav .igsa-contact-form input:not([type="submit"]):focus-visible,
.igsa-kbdnav .igsa-contact-form textarea:focus-visible {
	outline: 2px solid #116dff;
	/* 1px, measured: the source's inputs report outlineOffset 0px -> 1px on focus.
	   At 0 the ring sat flush against the field's own border. */
	outline-offset: 1px;
	box-shadow: 0 0 1px 2px #fff;
	z-index: auto;
}