/*
 * otocekicim — sayfa-anasayfa.css
 *
 * Yalnız anasayfaya özel sınıflar. Hepsi ".otc-as-" önekiyle; temel.css'teki
 * hiçbir sınıf yeniden tanımlanmaz (K8). Ölçüler, renkler ve boşluklar
 * prototipin stil dökümündeki "S=" değerlerinden birebir alınmış, HEX yerine
 * --otc-* tokenlarıyla yazılmıştır (K3).
 *
 * Prototipte @media yoktur; buradaki iki kırılım (760px, 560px) K31'de kayıt
 * altındaki türetilmiş değerlerdir. Izgaralar auto-fit/minmax ile içsel
 * duyarlıdır, kırılımlar yalnız dikey ritmi ve CTA satırlarını düzeltir.
 */

/* ---------------------------------------------------------- 0. Yerel tokenlar */

/*
 * Prototipteki gölgeler ve turuncu hale --otc-koyu / --otc-turuncu renginden
 * türetilir. HEX yazmamak için color-mix kullanılır; desteklenmeyen tarayıcıda
 * yalnız gölge düşer, düzen etkilenmez.
 */
:root {
	--otc-as-golge-gorsel: 0 20px 50px color-mix(in srgb, var(--otc-koyu) 12%, transparent);
	--otc-as-golge-yuzen: 0 20px 44px color-mix(in srgb, var(--otc-koyu) 16%, transparent);
	--otc-as-golge-rozet: 0 20px 40px color-mix(in srgb, var(--otc-koyu) 12%, transparent);
	--otc-as-hale: 0 0 0 4px color-mix(in srgb, var(--otc-turuncu) 20%, transparent);
}

/* ---------------------------------------------------------- 1. Ortak parçalar */

/* Bölüm gövdesi: dikey yığın. Boşluk bölüm başına göre aşağıda ayarlanır. */
.otc-as-yigin {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Bölüm başı: solda metin, sağda düğme; dar ekranda alt alta sarar. */
.otc-as-bolum-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.otc-as-bolum-basi-metin {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
	min-width: 0;
}

/* Prototipte üst etiket 13px; temel.css'teki 12px yalnız burada büyütülür. */
.otc-as-eyebrow {
	font-size: 13px;
}

/* Anasayfa H2'si prototipte clamp(28px,3vw,40px); .otc-h2 daha küçüktür. */
.otc-as-h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 700;
	text-wrap: pretty;
}

.otc-as-bolum-metin {
	font-size: 17px;
	line-height: 1.6;
	color: var(--otc-gri);
	text-wrap: pretty;
}

/* Bölüm başının sağındaki kısa açıklama (nasıl çalışır, yorumlar). */
.otc-as-bolum-basi-not {
	font-size: 16px;
	line-height: 1.6;
	color: var(--otc-gri);
	max-width: 40ch;
}

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

/* Düğme varyantları — .otc-btn tabanı üstüne prototip ölçüleri. */

.otc-as-btn-orta {
	padding: 14px 22px;
	font-size: 15px;
}

/* Koyu çerçeveli, dolgusuz düğme; hover'da koyuya dolar. */
.otc-as-btn-cerceve {
	background: transparent;
	color: var(--otc-koyu);
	border: 1.5px solid var(--otc-koyu);
}

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

/* Aynı düğmenin zemin üstünde beyaz dolgulu hâli (SSS bölümü). */
.otc-as-btn-cerceve-beyaz {
	background: var(--otc-beyaz);
}

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

/* Açık çizgili ikincil düğme (hakkımızda). */
.otc-as-btn-hafif {
	background: transparent;
	color: var(--otc-koyu);
	border: 1.5px solid var(--otc-cizgi);
}

.otc-as-btn-hafif:hover,
.otc-as-btn-hafif:focus-visible {
	border-color: var(--otc-koyu);
	color: var(--otc-koyu);
}

/* Paylaşılan görsel çerçevesi (hero + hakkımızda): 5/4, yuvarlatılmış, gölgeli. */
.otc-as-gorsel-cerceve {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--otc-r-buyuk);
	overflow: hidden;
	background: var(--otc-krem);
	box-shadow: var(--otc-as-golge-gorsel);
}

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

/* ---------------------------------------------------------- 2. Hero (#top) */

.otc-as-hero {
	background: var(--otc-zemin);
	overflow: hidden;
}

.otc-as-hero-kap {
	padding-top: 72px;
	padding-bottom: 80px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 56px;
	align-items: center;
}

.otc-as-hero-metin {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.otc-as-rozet {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 8px 14px 8px 10px;
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-beyaz);
	border: 1px solid var(--otc-cizgi);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--otc-koyu);
}

.otc-as-rozet-nokta {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--otc-turuncu);
	box-shadow: var(--otc-as-hale);
}

.otc-as-hero-cipler {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--otc-koyu);
}

.otc-as-hero-cip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.otc-as-hero-gorsel {
	position: relative;
	padding-bottom: 32px;
	min-width: 0;
}

/* Görselin alt kenarına binen 7/24 acil hat kartı. */
.otc-as-hero-kart {
	position: absolute;
	left: 28px;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--otc-beyaz);
	border-radius: var(--otc-r-orta);
	box-shadow: var(--otc-as-golge-yuzen);
}

.otc-as-hero-kart-metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.otc-as-hero-kart-etiket {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--otc-gri);
}

.otc-as-hero-kart-tel {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--otc-koyu);
}

/* ---------------------------------------------------------- 3. Güven şeridi */

.otc-as-guven {
	border-bottom: 1px solid var(--otc-cizgi);
}

.otc-as-guven-kap {
	padding-top: 40px;
	padding-bottom: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 28px;
}

.otc-as-guven-oge {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	min-width: 0;
}

.otc-as-guven-metin {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otc-as-guven-ad {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.otc-as-guven-not {
	font-size: 14px;
	line-height: 1.5;
	color: var(--otc-gri);
}

/* ---------------------------------------------------------- 4. Hizmetler */

.otc-as-hizmetler {
	padding: 96px 0 104px;
}

.otc-as-hizmetler .otc-as-yigin {
	gap: 48px;
}

.otc-as-hizmetler .otc-as-bolum-metin {
	line-height: 1.55;
}

.otc-as-hizmet-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

/* ---------------------------------------------------------- 5. Hakkımızda */

.otc-as-hakkimizda {
	padding: 104px 0;
}

.otc-as-hakkimizda-kap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 64px;
	align-items: center;
}

.otc-as-gorsel-blok {
	position: relative;
	padding-bottom: 28px;
	min-width: 0;
}

/* "7/24 · KESİNTİSİZ HİZMET" rozeti — görselin alt kenarına biner. */
.otc-as-sayi-rozet {
	position: absolute;
	left: 24px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 26px;
	background: var(--otc-beyaz);
	color: var(--otc-koyu);
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-orta);
	box-shadow: var(--otc-as-golge-rozet);
}

.otc-as-sayi-rozet-deger {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--otc-turuncu);
}

.otc-as-sayi-rozet-not {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--otc-gri);
}

.otc-as-hakkimizda-metin {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.otc-as-hakkimizda-ust {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.otc-as-maddeler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 14px 24px;
	font-size: 15.5px;
	font-weight: 600;
}

.otc-as-madde {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

/* ---------------------------------------------------------- 6. Nasıl çalışır */

.otc-as-adimlar {
	padding: 104px 0;
}

.otc-as-adimlar .otc-as-yigin {
	gap: 56px;
}

.otc-as-adim-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.otc-as-adim {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	background: var(--otc-beyaz);
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-buyuk);
	min-width: 0;
}

.otc-as-adim-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 13px turuncu METİN → AA için --otc-turuncu-metin (K30). */
.otc-as-adim-no {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--otc-turuncu-metin);
}

.otc-as-adim-baslik {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

.otc-as-adim-metin {
	font-size: 16px;
	line-height: 1.6;
	color: var(--otc-gri);
}

/* ------------------------------------------------- 7. İki sütunlu bölümler */

/* Bölgeler ve SSS aynı ızgarayı paylaşır: solda metin, sağda liste. */
.otc-as-ikili {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 56px;
	align-items: start;
}

.otc-as-ikili-metin {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.otc-as-ikili-metin .otc-btn {
	align-self: flex-start;
}

.otc-as-bolgeler {
	padding: 104px 0;
}

.otc-as-cip-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-content: flex-start;
	min-width: 0;
}

.otc-as-cip {
	display: inline-flex;
	align-items: center;
	padding: 12px 18px;
	border-radius: var(--otc-r-buyuk);
	border: 1px solid var(--otc-cizgi);
	background: var(--otc-beyaz);
	color: var(--otc-koyu);
	font-weight: 600;
	font-size: 14.5px;
}

.otc-as-cip:hover,
.otc-as-cip:focus-visible {
	border-color: var(--otc-turuncu);
	color: var(--otc-turuncu-metin);
}

.otc-as-cip-vurgu {
	border-color: var(--otc-turuncu);
	background: var(--otc-turuncu-acik);
	font-weight: 700;
}

.otc-as-cip-vurgu:hover,
.otc-as-cip-vurgu:focus-visible {
	border-color: var(--otc-koyu);
	color: var(--otc-koyu);
}

/* ---------------------------------------------------------- 8. Yorumlar */

.otc-as-yorumlar {
	padding: 104px 0;
	border-top: 1px solid var(--otc-cizgi);
}

.otc-as-yorum-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

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

.otc-as-yildizlar {
	display: flex;
	gap: 3px;
	color: var(--otc-turuncu);
}

.otc-as-yorum-metin {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--otc-koyu);
	text-wrap: pretty;
}

.otc-as-yorum-kisi {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.otc-as-yorum-harf {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--otc-krem);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--otc-koyu);
}

.otc-as-yorum-kisi-metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.otc-as-yorum-ad {
	font-weight: 700;
	font-size: 14.5px;
}

.otc-as-yorum-yer {
	font-size: 13px;
	color: var(--otc-gri);
}

/* ---------------------------------------------------------- 9. Partnerler */

.otc-as-partnerler {
	padding: 56px 0;
	border-top: 1px solid var(--otc-cizgi);
}

.otc-as-partner-kap {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.otc-as-partner-baslik {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--otc-gri);
	text-align: center;
}

.otc-as-partner-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: 16px;
}

/*
 * Prototipte bu kutular boş yuvadır ve kesik çizgili görünür. Üretimde kutu
 * yalnız gerçek logo varken basıldığından çizgi düz kullanılır (K17).
 */
.otc-as-partner-kutu {
	position: relative;
	height: 72px;
	padding: 12px;
	border: 1px solid var(--otc-cizgi);
	border-radius: var(--otc-r-kucuk);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.otc-as-partner-kutu img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------- 10. SSS */

.otc-as-sss {
	padding: 104px 0;
}

/*
 * Akordeon prototipte daha ferah: kutu dolgusu 0 24px, buton dolgusu 20px 0,
 * soru 17px, cevap 16px / alt boşluk 22px. Yalnız bu bölümün içinde geçerli,
 * temel.css'teki .otc-sss-* sınıfları değişmez.
 */
.otc-as-sss .otc-sss-oge {
	padding: 0 24px;
}

.otc-as-sss .otc-sss-ac {
	padding: 20px 0;
	font-size: 17px;
}

.otc-as-sss .otc-sss-govde {
	padding: 0;
}

.otc-as-sss .otc-sss-govde p {
	margin: 0 0 22px;
	font-size: 16px;
	max-width: 60ch;
}

/* ---------------------------------------------------------- 11. Rehber */

.otc-as-rehber {
	padding: 104px 0;
	border-top: 1px solid var(--otc-cizgi);
}

.otc-as-yazi-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

/* Yazı kartında "Yazıyı oku" üst boşluğu prototipte 4px. */
.otc-as-rehber .otc-devam {
	margin-top: 4px;
}

/* ---------------------------------------------------------- 12. İletişim */

.otc-as-iletisim {
	padding: 104px 0;
}

.otc-as-iletisim .otc-as-yigin {
	gap: 48px;
}

.otc-as-iletisim-basi {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
}

.otc-as-iletisim-basi .otc-as-bolum-metin {
	max-width: 52ch;
}

.otc-as-iletisim-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.otc-as-iletisim-kart {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
	border-radius: var(--otc-r-buyuk);
	background: var(--otc-beyaz);
	border: 1px solid var(--otc-cizgi);
	color: var(--otc-koyu);
	min-width: 0;
}

.otc-as-iletisim-kart:hover,
.otc-as-iletisim-kart:focus-visible {
	border-color: var(--otc-turuncu);
	color: var(--otc-koyu);
}

.otc-as-iletisim-kart-wa:hover,
.otc-as-iletisim-kart-wa:focus-visible {
	border-color: var(--otc-yesil);
	color: var(--otc-koyu);
}

.otc-as-iletisim-ikon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: var(--otc-r-kucuk);
	background: var(--otc-turuncu-acik);
	color: var(--otc-turuncu);
	display: flex;
	align-items: center;
	justify-content: center;
}

.otc-as-iletisim-ikon-yesil {
	background: var(--otc-yesil-acik);
	color: var(--otc-yesil);
}

.otc-as-iletisim-metin {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.otc-as-iletisim-etiket {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--otc-gri);
}

.otc-as-iletisim-deger {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.otc-as-iletisim-deger-buyuk {
	font-size: 24px;
	letter-spacing: -.02em;
}

.otc-as-iletisim-deger-kucuk {
	font-size: 17px;
}

/* ---------------------------------------------------------- 13. Alt CTA bandı */

/* Prototipte CTA bandının üst çizgisi var; bandın kendisi paylaşılan parça. */
.otc-as-cta-sarmal {
	border-top: 1px solid var(--otc-cizgi);
}

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

/* 760px — dikey ritim mobile iner, iki sütunlu bölümler zaten tek sütuna
   düşmüştür (auto-fit). K6 + K31. */
@media (max-width: 759.98px) {

	.otc-as-hero-kap {
		padding-top: 40px;
		padding-bottom: 56px;
		gap: 32px;
	}

	.otc-as-guven-kap {
		padding-top: 28px;
		padding-bottom: 28px;
		gap: 20px;
	}

	.otc-as-hizmetler,
	.otc-as-hakkimizda,
	.otc-as-adimlar,
	.otc-as-bolgeler,
	.otc-as-yorumlar,
	.otc-as-sss,
	.otc-as-rehber,
	.otc-as-iletisim {
		padding: 48px 0;
	}

	.otc-as-partnerler {
		padding: 36px 0;
	}

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

	.otc-as-hizmetler .otc-as-yigin,
	.otc-as-adimlar .otc-as-yigin,
	.otc-as-iletisim .otc-as-yigin {
		gap: 32px;
	}

	.otc-as-hakkimizda-kap {
		gap: 40px;
	}

	.otc-as-ikili {
		gap: 36px;
	}

	.otc-as-bolum-basi {
		align-items: flex-start;
	}

	.otc-as-adim {
		padding: 24px;
	}
}

/* 560px — yatay CTA satırları dikeye döner, düğmeler tam genişlik (K31). */
@media (max-width: 559.98px) {

	.otc-as-cta-satir {
		width: 100%;
	}

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

	/* Binen kartlar dar ekranda çerçeveden taşmasın. */
	.otc-as-hero-kart {
		left: 16px;
		right: 16px;
	}

	.otc-as-sayi-rozet {
		left: 16px;
		padding: 16px 20px;
	}

	.otc-as-adim,
	.otc-as-yorum,
	.otc-as-iletisim-kart {
		padding: 22px;
	}
}