/* ==========================================================================
   Şimşek Ambalaj — Tasarım Sistemi
   Simetri sert gereksinim: tüm boşluklar sabit skaladan, göz kararı değer yok.
   ========================================================================== */

:root {
	/* --- Renk paleti --- */
	--brand-900: #123256;
	--brand-800: #17406e;
	--brand-700: #1f5296;
	--brand-600: #2560a8;
	--brand-500: #2B6DBF;
	--brand-400: #5b92d2;
	--brand-300: #8fb6e3;
	--brand-100: #dae7f6;
	--brand-50:  #f0f5fc;

	/* Sürdürülebilirlik vurgusu */
	--eco-700: #1b7a4b;
	--eco-600: #22935a;
	--eco-500: #2aac6a;
	--eco-100: #d9f2e5;
	--eco-50:  #eefaf3;

	/* Nötrler */
	--ink-900: #2b2b2b;
	--ink-800: #383838;
	--ink-700: #383838;
	--ink-600: #5a5a5a;
	--ink-500: #767676;
	--ink-400: #999999;
	--ink-300: #cccccc;
	--ink-200: #e4e4e4;
	--ink-100: #f0f0f0;
	--ink-50:  #f7f7f7;
	--white:   #ffffff;

	--warn-500: #d97706;
	--danger-500: #dc2626;

	/* --- Boşluk skalası (4px tabanlı) --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;
	--sp-24: 96px;
	--sp-32: 128px;

	/* Bölüm dikey ritmi — tüm section'lar bunu kullanır */
	--section-y: var(--sp-20);
	--section-y-sm: var(--sp-12);

	/* --- Tipografi --- */
	--font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--fs-xs:   0.75rem;   /* 12 */
	--fs-sm:   0.875rem;  /* 14 */
	--fs-base: 1rem;      /* 16 */
	--fs-md:   1.125rem;  /* 18 */
	--fs-lg:   1.25rem;   /* 20 */
	--fs-xl:   1.5rem;    /* 24 */
	--fs-2xl:  1.875rem;  /* 30 */
	--fs-3xl:  2.25rem;   /* 36 */
	--fs-4xl:  3rem;      /* 48 */

	--lh-tight: 1.2;
	--lh-snug: 1.4;
	--lh-normal: 1.65;

	/* --- Kenarlık / gölge / yuvarlaklık --- */
	--radius-sm: 0px;
	--radius: 0px;
	--radius-lg: 0px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
	--shadow: 0 2px 8px rgba(0, 0, 0, .07);
	--shadow-lg: 0 6px 20px rgba(0, 0, 0, .10);

	--border: 1px solid var(--ink-200);

	/* --- Yerleşim --- */
	--container-max: 1200px;
	--container-pad: 20px; /* eski sitede içerik her kırılımda 20px içeriden başlıyor */
	--header-h: 96px;
	--topbar-h: 0px;

	--transition: .22s cubic-bezier(.4, 0, .2, 1);
	--z-header: 1000;
	--z-drawer: 1100;
	--z-overlay: 1090;
}

/* ==========================================================================
   Sıfırlama
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--ink-700);
	background: var(--white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--ink-900);
	letter-spacing: 0;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* Dar ekranda başlıklar hero ile aynı ölçeğe iner; 36px mobilde çok yer tutuyor */
@media (max-width: 767.98px) {
	h1 { font-size: clamp(1.5rem, 6.2vw, 2rem); line-height: 1.18; }
	h2 { font-size: clamp(1.375rem, 5.4vw, 1.75rem); line-height: 1.22; }
	h3 { font-size: var(--fs-lg); }
	h4 { font-size: var(--fs-base); }
}

a {
	color: var(--brand-600);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--brand-800); }

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
ul:last-child, ol:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }

button { font-family: inherit; }

:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Ekran okuyucu metni */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Klavye kullanıcıları için içeriğe atlama */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: 2000;
	padding: var(--sp-3) var(--sp-5);
	background: var(--brand-700);
	color: var(--white);
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top var(--transition);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ==========================================================================
   Yerleşim
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--tint { background: var(--ink-50); }

/* Eşit yükseklikli kart ızgarası — simetri için grid tercih edilir */
.grid { display: grid; gap: var(--sp-6); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: minmax(0, 1fr); }
}

/* Bölüm başlığı */
.section-head {
	max-width: 720px;
	margin-bottom: var(--sp-12);
}
.section-head .eyebrow {
	display: inline-block;
	margin-bottom: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-600);
}
.section-head p {
	font-size: var(--fs-md);
	color: var(--ink-600);
}

@media (max-width: 767.98px) {
	.section-head { margin-bottom: var(--sp-8); }
	.section-head .eyebrow {
		margin-bottom: var(--sp-2);
		font-size: var(--fs-xs);
	}
	.section-head p { font-size: var(--fs-base); }
}

/* ==========================================================================
   Butonlar
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	min-height: 46px;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition),
	            box-shadow var(--transition);
	text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand-600); color: var(--white); }
.btn--primary:hover { background: var(--brand-700); color: var(--white); box-shadow: var(--shadow); }

.btn--outline {
	background: transparent;
	color: var(--brand-700);
	border-color: var(--ink-300);
}
.btn--outline:hover {
	background: var(--brand-50);
	border-color: var(--brand-400);
	color: var(--brand-800);
}
.btn--block { width: 100%; }

/* ==========================================================================
   Yardımcılar
   ========================================================================== */

.text-center { text-align: center; }
.text-muted { color: var(--ink-500); }
.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

.d-none { display: none; }

/* Görsel oranını sabitler — kart ızgaralarında hizalama bozulmaz */
.ratio {
	position: relative;
	overflow: hidden;
	background: var(--ink-100);
}
.ratio > img,
.ratio > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--4x3  { aspect-ratio: 4 / 3; }

/* Uzun metni belirli satırda keser — kart başlıkları aynı yükseklikte kalır */
.clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}