/* Kalistack — sosyal sorumluluk anlatı sayfası (iyi-)
 *
 * Gece lacivertinde ahşap çerçeveli kara tahta, tebeşir el yazısı, sıcak
 * sarı vurgu ve çizgili defter kâğıdı. Sitenin kurumsal dilinden bilerek
 * ayrılır: burada anlatılan şey ürün değil.
 *
 * Tahta, çerçeve, tebeşirler ve bantlar tamamen CSS ile çizilir; sayfa
 * hiçbir görsel dosyasına bağlı değildir. Yazı tipi yüklenemezse el
 * yazısı satırlar tarayıcının kendi cursive yazısına düşer, düzen bozulmaz.
 */

.iyi-kap {
	--iyi-gece: #1B2447;
	--iyi-tahta: #243056;
	--iyi-ahsap: #9A6B3F;
	--iyi-sari: #FBBF24;
	--iyi-kirmizi: #EF4444;
	--iyi-tebesir: rgba(255, 255, 255, .92);
	--iyi-tebesir-sus: rgba(255, 255, 255, .62);
	--iyi-kagit: #FBF7EF;
	--iyi-defter-cizgi: #E4DCCB;
	--iyi-murekkep: #1F2937;
	--iyi-murekkep-sus: #55607A;
	--iyi-elyazi: "Caveat", "Segoe Script", "Bradley Hand", cursive;
	--iyi-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	position: relative;
	overflow: hidden;
}

.iyi {
	position: relative;
	z-index: 1;
	max-width: 1060px;
	margin: 0 auto;
}

.iyi-kap--gece { background: var(--iyi-gece); }

/* Çizgili defter kâğıdı: yatay kurşun çizgiler. */
.iyi-kap--defter {
	background-color: var(--iyi-kagit);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 33px,
		var(--iyi-defter-cizgi) 33px,
		var(--iyi-defter-cizgi) 34px
	);
}

/* ------------------------------------------------------- el yazısı */

.iyi-elyazi-kucuk {
	margin: 0 0 12px;
	font-family: var(--iyi-elyazi);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--iyi-kirmizi);
}

.iyi-elyazi-kucuk--acik { color: var(--iyi-sari); }

/* ---------------------------------------------------- düğmeler */

.iyi-btnler {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
}

.iyi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border: 2px solid var(--iyi-sari);
	border-radius: 8px;
	background: var(--iyi-sari);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #23180B;
	text-decoration: none;
	transition: transform .18s cubic-bezier(.22, .8, .3, 1), box-shadow .18s ease, background-color .18s ease;
}

.iyi-btn:hover,
.iyi-btn:focus-visible {
	color: #23180B;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -14px rgba(251, 191, 36, .95);
}

.iyi-btn--cizgi {
	background: transparent;
	border-style: dashed;
	border-color: rgba(255, 255, 255, .55);
	color: #FFFFFF;
}

.iyi-btn--cizgi:hover,
.iyi-btn--cizgi:focus-visible {
	color: #FFFFFF;
	background: rgba(255, 255, 255, .08);
	border-color: #FFFFFF;
	box-shadow: none;
}

.iyi :focus-visible {
	outline: 2px solid var(--iyi-sari);
	outline-offset: 3px;
}

/* ==================================================== 1) kara tahta */

.iyi-tahta {
	position: relative;
	padding: 14px;
	border-radius: 6px;
	/* Ahşap çerçeve: iki tonlu, hafif damarlı. */
	background:
		repeating-linear-gradient(
			180deg,
			rgba(0, 0, 0, .06) 0 2px,
			transparent 2px 7px
		),
		linear-gradient(180deg, #B07E4C 0%, var(--iyi-ahsap) 45%, #7E5430 100%);
	box-shadow:
		0 2px 0 rgba(0, 0, 0, .35),
		0 30px 60px -30px rgba(0, 0, 0, .8);
}

.iyi-tahta-ic {
	position: relative;
	padding: 54px 40px 48px;
	border-radius: 3px;
	background: var(--iyi-tahta);
	/* Tebeşir tozu ve kenar kararması. */
	box-shadow:
		inset 0 0 70px rgba(0, 0, 0, .5),
		inset 0 0 0 1px rgba(255, 255, 255, .06);
	text-align: center;
}

.iyi-tahta-ic::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3px;
	pointer-events: none;
	background:
		radial-gradient(60% 40% at 22% 78%, rgba(255, 255, 255, .05), transparent 70%),
		radial-gradient(46% 36% at 82% 22%, rgba(255, 255, 255, .04), transparent 70%);
}

.iyi-ders {
	margin: 0 0 18px;
	font-family: var(--iyi-elyazi);
	font-size: 24px;
	font-weight: 500;
	color: var(--iyi-tebesir-sus);
}

.iyi-ders-vurgu { color: var(--iyi-sari); }

.iyi-tahta-bas {
	margin: 0 0 24px;
	font-family: var(--iyi-serif);
	font-weight: 700;
	line-height: 1.18;
	color: var(--iyi-tebesir);
}

.iyi-bas-satir {
	display: block;
	font-size: clamp(24px, 3.4vw, 38px);
	letter-spacing: -.01em;
}

/* El yazısı kelime: altında sarı-kırmızı tebeşir çizgisi. */
.iyi-bas-elyazi {
	display: block;
	position: relative;
	margin: 4px 0 10px;
	padding-bottom: 12px;
	font-family: var(--iyi-elyazi);
	font-size: clamp(46px, 7vw, 80px);
	font-weight: 700;
	line-height: 1.05;
	color: var(--iyi-sari);
}

.iyi-bas-elyazi::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(58%, 300px);
	height: 4px;
	transform: translateX(-50%) rotate(-.6deg);
	border-radius: 4px;
	background: var(--iyi-kirmizi);
	opacity: .95;
}

.iyi-kalp {
	color: var(--iyi-kirmizi);
	font-size: .82em;
	vertical-align: 4px;
}

.iyi-tahta-metin {
	margin: 0 auto 10px;
	max-width: 56ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--iyi-tebesir-sus);
}

.iyi-slogan {
	margin: 22px 0 0;
	font-family: var(--iyi-elyazi);
	font-size: 25px;
	font-weight: 500;
	color: var(--iyi-sari);
}

/* tebeşir çizimleri
 *
 * Şekil yerine karakter: küçük ölçekte CSS'le çizilen yıldız ve kalp
 * tanınmıyordu. Tebeşir hissi için ince, soluk ve hafif eğik duruyorlar. */

.iyi-cizim {
	position: absolute;
	z-index: 2;
	line-height: 1;
	color: var(--iyi-tebesir-sus);
	opacity: .55;
	user-select: none;
}

.iyi-cizim::before {
	display: block;
	font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
}

.iyi-cizim--yildiz {
	top: 46px;
	left: 44px;
	font-size: 30px;
	transform: rotate(-12deg);
}

.iyi-cizim--yildiz::before { content: "°6"; }   /* ☆ */

.iyi-cizim--kalp {
	right: 50px;
	bottom: 52px;
	font-size: 28px;
	transform: rotate(10deg);
}

.iyi-cizim--kalp::before { content: "¶1"; }     /* ♡ */

/* tahta rafı ve tebeşirler */

.iyi-raf {
	position: relative;
	height: 18px;
	margin: 0 26px;
	border-radius: 0 0 6px 6px;
	background: linear-gradient(180deg, #C08A55 0%, #8A5D34 100%);
	box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .8);
}

.iyi-tebesir,
.iyi-silgi {
	position: absolute;
	top: 4px;
	height: 7px;
	border-radius: 3px;
}

.iyi-tebesir--1 { left: 12%; width: 44px; background: rgba(255, 255, 255, .9); }
.iyi-tebesir--2 { left: 20%; width: 34px; background: var(--iyi-sari); }

.iyi-silgi {
	right: 14%;
	width: 52px;
	height: 10px;
	top: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, #64748B 0 55%, #3F4A5F 55% 100%);
}

/* ======================================================= 2) mektup */

.iyi-mektup {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

.iyi-mektup--tek { grid-template-columns: minmax(0, 1fr); }

/* Bantlanmış polaroid */
.iyi-foto {
	position: relative;
	margin: 14px 0 0;
	padding: 14px 14px 18px;
	background: #FFFFFF;
	box-shadow: 0 2px 4px rgba(31, 41, 55, .1), 0 24px 44px -26px rgba(31, 41, 55, .5);
	transform: rotate(-1.4deg);
}

.iyi-bant {
	position: absolute;
	top: -14px;
	width: 84px;
	height: 28px;
	background: rgba(251, 191, 36, .55);
	box-shadow: 0 1px 2px rgba(31, 41, 55, .12);
}

.iyi-bant--sol  { left: -18px; transform: rotate(-32deg); }
.iyi-bant--sag  { right: -18px; transform: rotate(32deg); }

.iyi-foto img {
	display: block;
	width: 100%;
	height: auto;
}

.iyi-foto-bos {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background:
		repeating-linear-gradient(45deg, #EFEFEF 0 10px, #F7F7F7 10px 20px);
}

.iyi-foto-alt {
	margin-top: 14px;
	text-align: center;
	line-height: 1.5;
}

.iyi-foto-alt strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--iyi-murekkep);
}

.iyi-foto-alt span {
	display: block;
	font-size: 13px;
	color: var(--iyi-kirmizi);
}

.iyi-mektup-alinti {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	font-family: var(--iyi-serif);
	font-size: clamp(23px, 2.9vw, 33px);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.012em;
	color: #16233E;
}

.iyi-mektup-p {
	margin: 0 0 17px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 2.13;   /* defter çizgisiyle aynı ritim */
	color: var(--iyi-murekkep-sus);
}

.iyi-imza {
	margin: 26px 0 0;
	font-family: var(--iyi-elyazi);
	font-size: 32px;
	font-weight: 500;
	color: var(--iyi-murekkep);
}

/* ==================================================== 3) alıntılar */

.iyi-alintilar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 34px;
	align-items: center;
}

.iyi-alintilar--kalpli { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

.iyi-alinti {
	margin: 0;
	text-align: center;
}

.iyi-alinti blockquote {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--iyi-serif);
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 700;
	line-height: 1.44;
	color: #16233E;
}

.iyi-alinti figcaption {
	font-size: 14px;
	font-weight: 600;
	color: var(--iyi-kirmizi);
}

.iyi-ara-kalp {
	font-size: 34px;
	line-height: 1;
	color: var(--iyi-kirmizi);
}

.iyi-alinti-alt {
	margin: 44px auto 0;
	max-width: 68ch;
	text-align: center;
}

.iyi-alinti-alt p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.95;
	color: var(--iyi-murekkep-sus);
}

.iyi-alinti-alt p:last-child { margin-bottom: 0; }

/* ======================================================= 4) çağrı */

.iyi-cta { text-align: center; }

.iyi-cta-bas {
	margin: 0 0 16px;
	font-family: var(--iyi-serif);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.018em;
	color: #FFFFFF;
}

.iyi-cta-metin {
	margin: 0 auto 10px;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .7);
}

.iyi-serit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-top: 1px dashed rgba(255, 255, 255, .22);
	list-style: none;
}

.iyi-serit li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
}

.iyi-serit li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 5px;
	width: 6px;
	height: 10px;
	border: solid var(--iyi-sari);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------------------------------------------------- duyarlılık */

@media ( max-width: 900px ) {
	.iyi-mektup { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.iyi-foto { max-width: 260px; margin-left: auto; margin-right: auto; }
	.iyi-alintilar--kalpli { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.iyi-ara-kalp { justify-self: center; }
}

@media ( max-width: 767px ) {
	.iyi-tahta { padding: 10px; }
	.iyi-tahta-ic { padding: 34px 20px 32px; }
	.iyi-cizim { display: none; }
	.iyi-raf { margin: 0 14px; }
	.iyi-btnler { flex-direction: column; align-items: stretch; }
	.iyi-btn { width: 100%; }
	.iyi-mektup-p { line-height: 1.9; }
	.iyi-kap--defter { background-image: none; }   /* dar ekranda çizgiler yorucu */
}

@media ( prefers-reduced-motion: reduce ) {
	.iyi-kap *,
	.iyi-kap *::before,
	.iyi-kap *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}