/**
 * YGM Gümrük — Global CSS
 * Utility değişkenleri, base override'lar, yardımcı sınıflar
 */

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
	/* Renkler */
	--ygm-navy:        #003B7A;
	--ygm-red:         #C0392B;
	--ygm-blue-dark:   #0A2F5C;
	--ygm-blue-mid:    #1B4F9C;
	--ygm-text:        #1A2035;
	--ygm-text-light:  #5A6480;
	--ygm-bg-light:    #F5F7FA;
	--ygm-white:       #FFFFFF;

	/* Tipografi */
	--font-inter:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fw-regular:      400;
	--fw-medium:       500;
	--fw-semibold:     600;
	--fw-bold:         700;

	/* Spacing */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  16px;
	--space-4:  24px;
	--space-5:  32px;
	--space-6:  48px;
	--space-7:  64px;
	--space-8:  80px;
	--space-9:  96px;
	--space-10: 120px;

	/* Layout */
	--container-max:      1280px;
	--container-pad:      24px;
	--section-py:         var(--space-8);    /* 80px standart dikey padding */
	--section-py-sm:      var(--space-7);    /* 64px küçük section */
	--section-py-lg:      var(--space-10);   /* 120px büyük section */

	/* Border & Radius */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  12px;
	--radius-xl:  16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:  0 1px 3px rgba(0, 59, 122, 0.08);
	--shadow-md:  0 4px 16px rgba(0, 59, 122, 0.12);
	--shadow-lg:  0 8px 32px rgba(0, 59, 122, 0.16);

	/* Transitions */
	--transition: 0.2s ease;
	--transition-slow: 0.35s ease;
}

/* ─── Base Resets ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-family: var(--font-inter);
	color: var(--ygm-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* ─── Section Helper ─────────────────────────────────────────────────────────── */
.ygm-section {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.ygm-section--sm {
	padding-top: var(--section-py-sm);
	padding-bottom: var(--section-py-sm);
}

.ygm-section--lg {
	padding-top: var(--section-py-lg);
	padding-bottom: var(--section-py-lg);
}

.ygm-section--navy {
	background-color: var(--ygm-navy);
	color: var(--ygm-white);
}

.ygm-section--dark {
	background-color: var(--ygm-blue-dark);
	color: var(--ygm-white);
}

.ygm-section--light {
	background-color: var(--ygm-bg-light);
}

/* ─── Section Başlık Grubu ──────────────────────────────────────────────────── */
.ygm-section-header {
	text-align: center;
	margin-bottom: var(--space-7);
}

.ygm-section-header h2 {
	margin-bottom: var(--space-3);
}

.ygm-section-header p {
	color: var(--ygm-text-light);
	font-size: 1.125rem;
	max-width: 600px;
	margin-inline: auto;
}

/* ─── Butonlar ───────────────────────────────────────────────────────────────── */
.ygm-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 28px;
	font-family: var(--font-inter);
	font-size: 1rem;
	font-weight: var(--fw-semibold);
	line-height: 1;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.ygm-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.ygm-btn--primary {
	background-color: var(--ygm-navy);
	color: var(--ygm-white);
	border-color: var(--ygm-navy);
}

.ygm-btn--primary:hover {
	background-color: var(--ygm-blue-mid);
	border-color: var(--ygm-blue-mid);
	color: var(--ygm-white);
}

.ygm-btn--outline {
	background-color: transparent;
	color: var(--ygm-navy);
	border-color: var(--ygm-navy);
}

.ygm-btn--outline:hover {
	background-color: var(--ygm-navy);
	color: var(--ygm-white);
}

.ygm-btn--white {
	background-color: var(--ygm-white);
	color: var(--ygm-navy);
	border-color: var(--ygm-white);
}

.ygm-btn--white:hover {
	background-color: transparent;
	color: var(--ygm-white);
}

/* ─── Kartlar ────────────────────────────────────────────────────────────────── */
.ygm-card {
	background: var(--ygm-white);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	border: 1px solid rgba(0, 59, 122, 0.08);
	transition: box-shadow var(--transition), transform var(--transition);
}

.ygm-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.ygm-card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-3);
	color: var(--ygm-navy);
}

.ygm-card__title {
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	color: var(--ygm-navy);
	margin-bottom: var(--space-2);
}

.ygm-card__text {
	font-size: 0.9375rem;
	color: var(--ygm-text-light);
	line-height: 1.6;
}

.ygm-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-3);
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	color: var(--ygm-navy);
	text-decoration: none;
	transition: gap var(--transition);
}

.ygm-card__link:hover {
	gap: 10px;
	color: var(--ygm-blue-mid);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────────── */
.ygm-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: 0.875rem;
	color: var(--ygm-text-light);
	margin-bottom: var(--space-4);
}

.ygm-breadcrumb a {
	color: var(--ygm-text-light);
	text-decoration: none;
}

.ygm-breadcrumb a:hover {
	color: var(--ygm-navy);
}

.ygm-breadcrumb__separator::after {
	content: '›';
}

/* ─── İnce kırmızı sol border (Vizyon/Misyon kutuları) ──────────────────────── */
.ygm-bordered-box {
	border-left: 4px solid var(--ygm-red);
	padding-left: var(--space-4);
}

/* ─── Sayfa Hero (iç sayfalarda) ────────────────────────────────────────────── */
.ygm-page-hero {
	background-color: var(--ygm-navy);
	color: var(--ygm-white);
	padding: var(--space-7) 0;
}

.ygm-page-hero h1 {
	color: var(--ygm-white);
	margin-bottom: var(--space-3);
}

.ygm-page-hero .ygm-breadcrumb,
.ygm-page-hero .ygm-breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
}

.ygm-page-hero .ygm-breadcrumb a:hover {
	color: var(--ygm-white);
}

/* ─── Responsive Yardımcılar ────────────────────────────────────────────────── */
@media (max-width: 767px) {
	:root {
		--section-py:    var(--space-7);   /* Mobile'da biraz daha küçük */
		--container-pad: 20px;
	}

	.ygm-section-header h2 {
		font-size: 1.75rem;
	}
}

/* ─── Blocksy Overrides ──────────────────────────────────────────────────────── */
/* Blocksy'nin varsayılan fontunu Inter ile ezme */
body,
.entry-content {
	font-family: var(--font-inter) !important;
}

/* Header arka planını temizle (transparent hero için) */
.ygm-transparent-header .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
}

/* Sticky header — scroll sonrası */
.ygm-transparent-header .site-header.is-sticky,
.ygm-transparent-header .site-header.scroll-reached {
	background: var(--ygm-white) !important;
	box-shadow: var(--shadow-sm) !important;
}