/*
 * otocekicim — sayfa-hakkimizda.css
 *
 * "Hakkımızda" sayfa şablonu (page-hakkimizda.php).
 * Ölçüler prototipten birebir: Hakkimizda.dc.html / _tools/out/D-Hakkimizda.txt
 *
 * Yalnız .otc-hk-* sınıfları tanımlanır; temel.css'teki paylaşılan sınıflar
 * (kap, kart, düğme, ikon kutusu, sayfa başı) yeniden tanımlanmaz (K8).
 * HEX yazılmaz, 100vw ve !important kullanılmaz (K3, K5, K32).
 * Kırılımlar yalnız 760 ve 560'tır (K31).
 */

/* ---------------------------------------------------------- 1. Sayfa başı */

/* Prototipte bu sayfanın giriş paragrafı 64ch'tir (temel.css 62ch). */
.otc-sayfabasi .otc-hk-giris {
	max-width: 64ch;
}

/* ---------------------------------------------------------- 2. BİZ KİMİZ */

.otc-hk-kimiz {
	padding: 88px 0;
}

/* Prototip: repeat(auto-fit, minmax(min(100%,440px), 1fr)); gap:64px */
.otc-hk-kimiz-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 64px;
	align-items: center;
}

.otc-hk-gorsel {
	position: relative;
	aspect-ratio: 5 / 4;
	min-width: 0;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
	overflow: hidden;
	background: var(--otc-krem);
	/* Prototip 0 20px 50px; token'daki kart gölgesi aynı renk/opaklıkta (K3). */
	box-shadow: var(--otc-golge-kart);
}

.otc-hk-gorsel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.otc-hk-kimiz-metin {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

/* .otc-eyebrow 12px'tir; bu sayfada prototip 13px kullanır. */
.otc-hk-eyebrow {
	font-size: 13px;
}

/* .otc-h2 clamp(26px,2.8vw,36px); bölüm başlıkları bir kademe büyüktür. */
.otc-hk-h2 {
	font-size: clamp(28px, 3vw, 40px);
}

.otc-hk-paragraflar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 17px;
	line-height: 1.7;
	/* Prototip gövde metni tokenlar arasında bir ara tondur; eski tarayıcı yedeği önce. */
	color: var(--otc-koyu-hover);
	color: color-mix(in srgb, var(--otc-koyu) 56%, var(--otc-gri));
}

.otc-hk-paragraflar p {
	text-wrap: pretty;
}

.otc-hk-cta-satir {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Prototip: padding:14px 22px (temel .otc-btn 12px 18px). */
.otc-hk-btn {
	padding: 14px 22px;
}

/* .otc-btn-cizgili 16px/12px yarıçaplıdır; burada 15px/10px. */
.otc-hk-btn-cizgili {
	border-radius: var(--otc-r-kucuk);
	font-size: 15px;
}

/* ------------------------------------------- 3. ÇALIŞMA PRENSİPLERİMİZ */

.otc-hk-prensipler {
	padding: 88px 0;
	border-top: 1px solid var(--otc-cizgi);
	border-bottom: 1px solid var(--otc-cizgi);
}

.otc-hk-yigin {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.otc-hk-bolum-basi {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

/* Prototip: repeat(auto-fit, minmax(min(100%,250px), 1fr)); gap:16px */
.otc-hk-prensip-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 16px;
}

.otc-hk-prensip {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 28px;
	background: var(--otc-beyaz);
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
}

/* .otc-h3 20px'tir; bu kartlarda prototip 19px kullanır. */
.otc-hk-prensip-baslik {
	font-size: 19px;
}

.otc-hk-prensip-ozet {
	font-size: 15px;
	line-height: 1.55;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* ---------------------------------------------------------- 4. FİLOMUZ */

.otc-hk-filo {
	padding: 88px 0;
}

.otc-hk-filo-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.otc-hk-filo-not {
	font-size: 16px;
	line-height: 1.6;
	color: var(--otc-gri);
	max-width: 44ch;
	text-wrap: pretty;
}

/* Prototip: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap:24px */
.otc-hk-filo-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

/* Bu kartlar bağlantı değildir; prototipte kalkma efekti yoktur. */
.otc-hk-filo-kart:hover {
	transform: none;
	box-shadow: none;
}

/* .otc-kart-govde gap 10px'tir; prototip 8px. */
.otc-hk-filo-govde {
	gap: 8px;
}

/* .otc-kart-ozet 15.5px'tir; prototip 15px. */
.otc-hk-filo-ozet {
	font-size: 15px;
}

/* ------------------------------------------- 5. Yönetici içeriği (serbest) */

.otc-hk-serbest {
	padding: 0 0 88px;
}

.otc-hk-serbest-govde {
	max-width: 72ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--otc-gri);
}

.otc-hk-serbest-govde > * + * {
	margin-top: 16px;
}

.otc-hk-serbest-govde h2,
.otc-hk-serbest-govde h3 {
	color: var(--otc-koyu);
	text-wrap: pretty;
}

/* temel.css listelerin işaretini kaldırır; yönetici içeriğinde geri verilir. */
.otc-hk-serbest-govde ul,
.otc-hk-serbest-govde ol {
	padding-left: 22px;
	list-style: disc;
}

.otc-hk-serbest-govde ol {
	list-style: decimal;
}

/* ---------------------------------------------------------- 6. Alt CTA */

.otc-hk-cta {
	border-top: 1px solid var(--otc-cizgi);
}

.otc-hk-cta-kap {
	padding-top: 64px;
	padding-bottom: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.otc-hk-cta-metin {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

.otc-hk-cta-metin p {
	font-size: 17px;
	line-height: 1.55;
	color: var(--otc-gri);
	text-wrap: pretty;
}

.otc-hk-cta-dugmeler {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * Beyaz zeminli, koyu çerçeveli düğme: temel.css'te karşılığı yok
 * (.otc-btn-cizgili çerçevesi --otc-cizgi'dir). Bütünleştiriciden istenmiştir.
 */
.otc-hk-btn-beyaz {
	padding: 16px 24px;
	border-radius: var(--otc-r-orta);
	border: 1.5px solid var(--otc-koyu);
	background: var(--otc-beyaz);
	color: var(--otc-koyu);
	font-size: 16px;
}

.otc-hk-btn-beyaz:hover,
.otc-hk-btn-beyaz:focus-visible {
	background: var(--otc-koyu);
	color: var(--otc-beyaz);
}

/* ---------------------------------------------------------- 7. Kırılımlar */

/* 760px — iki sütunlu bantlar tek sütuna iner (K31). */
@media (max-width: 759.98px) {

	.otc-hk-kimiz,
	.otc-hk-prensipler,
	.otc-hk-filo {
		padding: 56px 0;
	}

	.otc-hk-kimiz-izgara {
		gap: 32px;
	}

	.otc-hk-yigin {
		gap: 28px;
	}

	.otc-hk-serbest {
		padding: 0 0 56px;
	}

	.otc-hk-cta-kap {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* 560px — yatay CTA satırları dikeye döner (K31). */
@media (max-width: 559.98px) {

	.otc-hk-cta-satir,
	.otc-hk-cta-dugmeler {
		width: 100%;
	}

	.otc-hk-cta-satir .otc-btn,
	.otc-hk-cta-dugmeler .otc-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.otc-hk-prensip {
		padding: 22px;
	}
}