/* ===========================================================
   Şipşak Sigorta — özel bileşenler
   Ana sayfa hero'su, ürün kartları ve hizmetlerimiz sayfası
   =========================================================== */

/* ---------- Başlık fontu ----------
   Tema başlıkları DM Serif Display ile geliyordu; logodaki kalın grotesk
   yazıyla uyuşmuyordu. Başlıklar THICCCBOI'ye alındı, gövde metni temanın
   kendi fontunda (dm.css) kaldı.

   dm.css bu sayfalarda sipsak.css'ten SONRA yükleniyor ve font-family'yi
   !important ile veriyor. Link sırasını 15 sayfada oynatmak yerine seçici
   bir kademe yukarı alındı (body ön eki) — sıradan bağımsız kazanıyor. */
@font-face {
	font-family: THICCCBOI;
	src: url("../fonts/thicccboi/THICCCBOI-Regular.woff2") format("woff2"),
	     url("../fonts/thicccboi/THICCCBOI-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: THICCCBOI;
	src: url("../fonts/thicccboi/THICCCBOI-Medium.woff2") format("woff2"),
	     url("../fonts/thicccboi/THICCCBOI-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: THICCCBOI;
	src: url("../fonts/thicccboi/THICCCBOI-Bold.woff2") format("woff2"),
	     url("../fonts/thicccboi/THICCCBOI-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body .display-1,
body .display-2,
body .display-3,
body .display-4,
body .display-5,
body .display-6,
body .ff-serif,
body .post-title,
body .counter-wrapper .counter {
	font-family: THICCCBOI, var(--bs-font-sans-serif), sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* Logodaki sıkı dokuyu büyük puntoda yakalamak için satır aralığı biraz kısıldı */
body .display-1,
body .display-2,
body .display-3 {
	line-height: 1.15 !important;
}

/* ---------- Tek parça sürekli arka plan ----------
   content-wrapper üzerine .sipsak-fon sınıfı eklenen sayfalarda geçerlidir.
   Bulanık görsel bölümlere tek tek değil sayfanın tamamına uygulanır;
   bölümlerin kendi zemin renkleri şeffaflaştırılır ki renk kesiği olmasın. */
.sipsak-fon {
	background-image: url("../img/photos/blurry.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	background-attachment: scroll;
}
.sipsak-fon .wrapper.bg-soft-primary,
.sipsak-fon .wrapper.bg-light,
.sipsak-fon .wrapper.bg-image {
	background-color: transparent !important;
	background-image: none !important;
}

/* ---------- Hero ---------- */
.hero-sipsak { padding: 4rem 0 5.5rem; }

/* sol sütun içeriğini kartlara göre dikeyde ortala */
.hero-sipsak .row { align-items: center; }
.hero-sipsak-metin {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Başlık fontu: sitedeki diğer büyük başlıklarla aynı (DM Serif Display).
   Font ailesi ve ağırlığı .ff-serif sınıfından, assets/css/fonts/dm.css içinden gelir. */
.hero-baslik {
	color: #16244a;
	font-size: clamp(2.7rem, 4.6vw, 4.3rem);
	line-height: 1.15;
	margin-bottom: 0;
}
.hero-baslik .typer,
.hero-baslik .cursor { color: var(--bs-primary); }

.hero-lead {
	margin-top: 1.6rem;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.8;
	color: #5a6785;
}

.hero-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--bs-primary);
	text-decoration: none;
}
.hero-link span { transition: transform .3s ease; }
.hero-link:hover span { transform: translateX(5px); }

/* ---------- Ürün kartları ---------- */
.urun-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .85rem;
}
.urun-grid-genis { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.urun-kart {
	position: relative;
	display: flex;
	align-items: center;
	gap: .8rem;
	min-height: 92px;
	padding: .95rem 1.9rem .95rem 1.1rem;
	border: 1px solid rgba(22, 36, 74, .1);
	border-radius: .75rem;
	background: #fff;
	box-shadow: 0 2px 10px rgba(22, 36, 74, .05);
	text-decoration: none;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	animation: kartGirisi .6s cubic-bezier(.22, .8, .3, 1) forwards;
	transition: transform .35s ease, box-shadow .35s ease,
				background .35s ease, border-color .35s ease;
}

/* soldan yükselen vurgu çizgisi */
.urun-kart::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--bs-primary);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .38s cubic-bezier(.22, .8, .3, 1);
}

.urun-kart:hover {
	transform: translateY(-6px);
	background: #fff;
	border-color: rgba(63, 120, 224, .28);
	box-shadow: 0 16px 36px rgba(22, 36, 74, .14);
}
.urun-kart:hover::before { transform: scaleY(1); transform-origin: top center; }

/* çizim kutusu */
.kart-ikon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: .7rem;
	background: rgba(63, 120, 224, .09);
	color: var(--bs-primary);
	transition: background .35s ease, color .35s ease, transform .45s ease;
}
.urun-kart:hover .kart-ikon {
	background: var(--bs-primary);
	color: #fff;
	transform: scale(1.06) rotate(-4deg);
}
.kart-ikon svg { display: block; }

/* Tasarlanmış ürün görselleri — kendi renklerini korur, zemin istemez */
.kart-ikon-gorsel {
	width: 66px;
	height: 66px;
	border-radius: .6rem;
	background: transparent;
}
.kart-ikon-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.urun-kart:hover .kart-ikon-gorsel {
	background: transparent;
	transform: scale(1.07);
}

.kart-metin { display: flex; flex-direction: column; min-width: 0; }

.kart-baslik {
	font-size: .95rem;
	font-weight: 600;
	color: #16244a;
	line-height: 1.3;
}
.kart-alt {
	margin-top: .25rem;
	font-size: .76rem;
	line-height: 1.45;
	color: #66738f;
}

.kart-ok {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	margin-top: -.7rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bs-primary);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s ease, transform .3s ease;
}
.urun-kart:hover .kart-ok { opacity: 1; transform: translateX(0); }

/* sırayla belirme */
.urun-kart:nth-child(1) { animation-delay: .10s; }
.urun-kart:nth-child(2) { animation-delay: .18s; }
.urun-kart:nth-child(3) { animation-delay: .26s; }
.urun-kart:nth-child(4) { animation-delay: .34s; }
.urun-kart:nth-child(5) { animation-delay: .42s; }
.urun-kart:nth-child(6) { animation-delay: .50s; }
.urun-kart:nth-child(7) { animation-delay: .58s; }
.urun-kart:nth-child(8) { animation-delay: .66s; }

@keyframes kartGirisi {
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hizmetlerimiz sayfası ---------- */
.hizmet-hero { padding: 5rem 0 2.5rem; }
.hizmet-hero h1 { color: #16244a; font-weight: 700; letter-spacing: -.02em; }
.hizmet-hero p  { color: #5a6785; font-size: 1.05rem; line-height: 1.8; }

.hizmet-grup { margin-top: 3.5rem; scroll-margin-top: 100px; }
.hizmet-grup:first-of-type { margin-top: 1rem; }
.hizmet-grup-baslik {
	color: #16244a;
	font-weight: 700;
	font-size: 1.6rem;
	margin-bottom: .6rem;
	padding-left: .85rem;
	border-left: 4px solid var(--bs-primary);
}
.hizmet-grup-aciklama {
	color: #6b7896;
	font-size: .95rem;
	line-height: 1.75;
	margin-bottom: 1.8rem;
}

.urun-kart-genis {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-height: 0;
	padding: 1.9rem 1.7rem 1.7rem;
	background: #fff;
}
.urun-kart-genis .kart-ikon-gorsel {
	width: 100%;
	height: 150px;
	border-radius: .6rem;
	background: rgba(63, 120, 224, .04);
}
.urun-kart-genis .kart-metin { margin-top: 1.1rem; }
.urun-kart-genis .kart-baslik { font-size: 1.12rem; }
.urun-kart-genis .kart-alt {
	margin-top: .5rem;
	font-size: .88rem;
	line-height: 1.65;
	color: #6b7896;
}
.urun-kart-genis .kart-ok {
	position: static;
	margin: 1rem 0 0;
	opacity: 1;
	transform: none;
	font-size: .88rem;
	font-weight: 600;
}
.urun-kart-genis .kart-ok i {
	display: inline-block;
	font-style: normal;
	transition: transform .3s ease;
}
.urun-kart-genis:hover .kart-ok i { transform: translateX(5px); }

/* ---------- "Neden Şipşak Sigorta?" kutuları ---------- */
.neden-sipsak-gorsel {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	margin-right: 1.3rem;
}
.neden-sipsak-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.neden-sipsak-kutular .nav-link { cursor: default; }

@media (max-width: 1199.98px) {
	.neden-sipsak-gorsel { width: 124px; height: 124px; }
}
@media (max-width: 575.98px) {
	.neden-sipsak-gorsel { width: 104px; height: 104px; margin-right: .9rem; }
}

/* ---------- Süreç bölümü (kıvrımlı rota) ---------- */
.surec-sarmal { position: relative; }

.surec-yol {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 170px;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.surec-yol path {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
}
.surec-yol-zemin { stroke: rgba(63, 120, 224, .16); }
.surec-yol-dolgu {
	stroke: var(--bs-primary);
	transition: stroke-dashoffset .15s linear;
}

.surec-adim {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 170px 1fr;
	align-items: center;
	margin-bottom: 1.2rem;
}
.surec-adim:last-child { margin-bottom: 0; }

/* grid-row açıkça verilmezse, ters sıralı (çift) adımlarda tarayıcı
   görseli bir alt satıra atıyor ve kartla hizası bozuluyor. */
.surec-adim > .surec-kart        { grid-column: 1; grid-row: 1; }
.surec-adim > .surec-gorsel-alan { grid-column: 3; grid-row: 1; }
.surec-adim:nth-of-type(even) > .surec-kart        { grid-column: 3; grid-row: 1; }
.surec-adim:nth-of-type(even) > .surec-gorsel-alan { grid-column: 1; grid-row: 1; }

.surec-kart {
	position: relative;
	padding: 1.5rem 1.5rem 1.4rem;
	border-radius: .85rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
	box-shadow: 0 2px 12px rgba(22, 36, 74, .05);
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1),
				box-shadow .35s ease, border-color .35s ease;
}
.surec-adim.aktif .surec-kart {
	opacity: 1;
	transform: translateY(0);
	border-color: rgba(63, 120, 224, .22);
	box-shadow: 0 14px 34px rgba(22, 36, 74, .1);
}

.surec-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: .9rem;
	border-radius: 50%;
	background: rgba(63, 120, 224, .1);
	color: var(--bs-primary);
	font-size: 1.05rem;
	font-weight: 700;
	transition: background .4s ease, color .4s ease, transform .4s ease;
}
.surec-adim.aktif .surec-no {
	background: var(--bs-primary);
	color: #fff;
	transform: scale(1.06);
}

.surec-baslik {
	color: #16244a;
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: .6rem;
}
.surec-aciklama {
	color: #6b7896;
	font-size: .93rem;
	line-height: 1.8;
	margin-bottom: 0;
}

.surec-gorsel-alan { display: flex; justify-content: center; padding: 0 .4rem; }
.surec-gorsel-alan img {
	width: 100%;
	max-width: 380px;
	height: auto;
	opacity: 0;
	transform: scale(.94);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
}
.surec-adim.aktif .surec-gorsel-alan img { opacity: 1; transform: scale(1); }

.surec-gorsel-yer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	width: 100%;
	max-width: 260px;
	min-height: 150px;
	border: 2px dashed rgba(63, 120, 224, .3);
	border-radius: .85rem;
	background: rgba(63, 120, 224, .04);
	color: #8592ad;
	text-align: center;
	padding: 1rem;
}
.surec-gorsel-yer span  { font-size: .9rem; font-weight: 600; color: #6b7896; }
.surec-gorsel-yer small { font-size: .75rem; }

@media (prefers-reduced-motion: reduce) {
	.surec-kart,
	.surec-gorsel-alan img { opacity: 1; transform: none; transition: none; }
}

/* Dar ekran: rota sola alınır, kart ve görsel alt alta */
@media (max-width: 767.98px) {
	.surec-yol { left: 26px; transform: none; width: 70px; }
	.surec-adim {
		grid-template-columns: 70px 1fr;
		align-items: start;
		margin-bottom: 2.5rem;
	}
	.surec-adim > .surec-kart,
	.surec-adim:nth-of-type(even) > .surec-kart { grid-column: 2; grid-row: 1; }
	.surec-adim > .surec-gorsel-alan,
	.surec-adim:nth-of-type(even) > .surec-gorsel-alan {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
		padding: 1rem 0 0;
	}
}

/* ---------- Hizmet teklif sayfası ---------- */
.teklif-duzen {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 2.4rem;
	align-items: start;
}

/* Sol sütun */
.teklif-baslik {
	color: #16244a;
	/* Ana sayfadaki .hero-baslik'e yaklaşsın diye büyütüldü; alt sınır da
	   birlikte yükseltildi ki dar ekranda başlık cılız kalmasın. */
	font-size: clamp(1.75rem, 2.6vw, 2.35rem);
	line-height: 1.22;
	margin-bottom: 1rem;
}
.teklif-metin {
	color: #5a6785;
	font-size: .83rem;
	line-height: 1.65;
	margin-bottom: .65rem;
}

.teklif-maddeler {
	list-style: none;
	padding: 0;
	margin: 1.2rem 0 1.5rem;
}
.teklif-maddeler li {
	position: relative;
	padding: .28rem 0 .28rem 1.85rem;
	color: #16244a;
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.6;
}
.teklif-maddeler li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: .3rem;
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(63, 120, 224, .12);
	color: var(--bs-primary);
	font-size: .8rem;
	font-weight: 700;
}

/* Başlığın ikinci satırı bölünmesin diye nowrap; ama dar ekranda uzun
   başlıklar (ör. "Doğru Teklif, Güvenilir Hizmet") kabı genişletip sayfayı
   yatay kaydırılabilir hâle getiriyordu, o yüzden telefonda serbest. */
.teklif-baslik-alt { white-space: nowrap; }
@media (max-width: 575.98px) {
	.teklif-baslik-alt { white-space: normal; }
}

/* Sol sütundaki çağrı butonu doğrudan telefonu açar */
.teklif-cta svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.teklif-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .7rem 1.8rem;
	border-radius: 3rem;
	background: linear-gradient(120deg, #2f5fc0 0%, var(--bs-primary) 60%, #5a90ea 100%);
	background-size: 160% 100%;
	background-position: 0 0;
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(47, 95, 192, .32);
	transition: transform .3s ease, box-shadow .3s ease, background-position .5s ease;
}
/* Tema a[href^="tel"] için color:inherit tanımlıyor; bu seçici tek sınıflı
   kuralımızı ezdiği için telefon bağlantılı butonların rengini burada
   güçlendirilmiş seçiciyle sabitliyoruz. */
a.teklif-cta { color: #fff; }
a.ara-buton  { color: var(--bs-primary); }

.teklif-cta:hover {
	color: #fff;
	transform: translateY(-3px);
	background-position: 100% 0;
	box-shadow: 0 16px 34px rgba(47, 95, 192, .42);
}
.teklif-cta-not {
	margin: .6rem 0 0;
	font-size: .75rem;
	font-style: italic;
	color: #7c88a5;
}

/* Sağ sütun */
.teklif-form-baslik {
	color: #16244a;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: .45rem;
}
.teklif-form-alt {
	color: #6b7896;
	font-size: .78rem;
	line-height: 1.6;
	margin-bottom: .9rem;
}

.teklif-kart {
	padding: 1.4rem 1.4rem 1.3rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
	box-shadow: 0 18px 44px rgba(22, 36, 74, .1);
	scroll-margin-top: 110px;
}

.teklif-satir { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.teklif-alan { display: flex; flex-direction: column; margin-bottom: .7rem; }
.teklif-alan label {
	margin-bottom: .22rem;
	font-size: .72rem;
	font-weight: 600;
	color: #16244a;
}
.teklif-alan input,
.teklif-alan textarea {
	width: 100%;
	padding: .46rem .7rem;
	border: 1px solid rgba(22, 36, 74, .16);
	border-radius: .5rem;
	background: #fff;
	font-size: .81rem;
	color: #16244a;
	transition: border-color .25s ease, box-shadow .25s ease;
}
/* Açık adres kutusu: yüksekliği kullanıcı ayarlayabilsin, yana taşmasın */
.teklif-alan textarea {
	min-height: 4.6rem;
	resize: vertical;
	font-family: inherit;
	line-height: 1.45;
}
.teklif-alan input::placeholder,
.teklif-alan textarea::placeholder { color: #a3adc2; }
.teklif-alan input:focus,
.teklif-alan textarea:focus {
	outline: none;
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(63, 120, 224, .14);
}
.teklif-alan input.hatali,
.teklif-alan textarea.hatali {
	border-color: #dc3545;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

/* Tescil ili/ilçe açılır listeleri: metin kutularıyla aynı görünüm */
.teklif-alan select {
	width: 100%;
	padding: .46rem 1.9rem .46rem .7rem;
	border: 1px solid rgba(22, 36, 74, .16);
	border-radius: .5rem;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7896' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .6rem center;
	background-size: .68rem;
	font-size: .81rem;
	color: #16244a;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.teklif-alan select:focus {
	outline: none;
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(63, 120, 224, .14);
}
.teklif-alan select.hatali {
	border-color: #dc3545;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}

.teklif-hata {
	margin-top: .25rem;
	font-size: .72rem;
	color: #dc3545;
	min-height: 0;
}

.teklif-onay-not {
	margin: .1rem 0 .45rem;
	font-size: .68rem;
	color: #8592ad;
}
.teklif-onay { margin-bottom: .55rem; }
.teklif-onay label {
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	font-size: .71rem;
	line-height: 1.45;
	color: #6b7896;
	cursor: pointer;
}
/* Tema "input { -webkit-appearance: none !important }" uyguladığı için
   tarayıcının kendi onay kutusu hiç çizilmiyor; kutucuğu kendimiz çiziyoruz. */
.teklif-onay input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: .1rem 0 0;
	-webkit-appearance: none !important;
	appearance: none;
	border: 1.5px solid rgba(22, 36, 74, .3);
	border-radius: .28rem;
	background: #fff;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.teklif-onay input[type="checkbox"]:hover { border-color: var(--bs-primary); }
.teklif-onay input[type="checkbox"]:checked {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
}
/* tik işareti */
.teklif-onay input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: .33rem;
	top: .12rem;
	width: .3rem;
	height: .58rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.teklif-onay input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba(63, 120, 224, .55);
	outline-offset: 2px;
}
.teklif-onay input[type="checkbox"].hatali {
	border-color: #dc3545;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}
.teklif-onay a { color: var(--bs-primary); font-weight: 600; }

.teklif-gonder {
	width: 100%;
	margin-top: .4rem;
	padding: .68rem 1.5rem;
	border: 0;
	border-radius: 3rem;
	background: linear-gradient(120deg, #2f5fc0 0%, var(--bs-primary) 60%, #5a90ea 100%);
	background-size: 160% 100%;
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(47, 95, 192, .3);
	transition: transform .3s ease, box-shadow .3s ease, background-position .5s ease, opacity .2s ease;
}
.teklif-gonder:hover:not(:disabled) {
	transform: translateY(-2px);
	background-position: 100% 0;
	box-shadow: 0 15px 30px rgba(47, 95, 192, .4);
}
.teklif-gonder:disabled { opacity: .65; cursor: default; }

/* İki kanal butonu: WhatsApp yeşili ve geri arama için ikincil çerçeveli */
.teklif-butonlar {
	display: grid;
	gap: .5rem;
	margin-top: .5rem;
}
.teklif-butonlar .teklif-gonder { margin-top: 0; }

.teklif-gonder-yazi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
}
.teklif-gonder-wa {
	background: linear-gradient(120deg, #1aa851 0%, #25d366 60%, #4ae08a 100%);
	box-shadow: 0 10px 24px rgba(37, 211, 102, .3);
}
.teklif-gonder-wa:hover:not(:disabled) {
	box-shadow: 0 15px 30px rgba(37, 211, 102, .42);
}
.teklif-gonder-wa svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.teklif-gonder-ikincil {
	background: #fff;
	border: 1.5px solid rgba(63, 120, 224, .4);
	color: var(--bs-primary);
	box-shadow: none;
}
.teklif-gonder-ikincil:hover:not(:disabled) {
	background: rgba(63, 120, 224, .07);
	box-shadow: 0 10px 22px rgba(47, 95, 192, .16);
}

.teklif-form-not {
	margin: .6rem 0 0;
	font-size: .68rem;
	line-height: 1.45;
	color: #8592ad;
	text-align: center;
}

.teklif-sonuc {
	margin-top: 1rem;
	padding: .85rem 1rem;
	border-radius: .6rem;
	font-size: .87rem;
	line-height: 1.6;
}
.teklif-sonuc.olumlu  { background: rgba(63, 120, 224, .1); color: #24457f; }
.teklif-sonuc.olumsuz { background: rgba(220, 53, 69, .1);  color: #a02330; }
.teklif-sonuc-yazi { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Açılır pencere engellenirse kullanıcı mesajı buradan gönderir */
.teklif-wa-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: .7rem;
	padding: .5rem 1.2rem;
	border-radius: 3rem;
	background: #25d366;
	color: #fff !important;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 18px rgba(37, 211, 102, .3);
	transition: transform .25s ease, box-shadow .25s ease;
}
.teklif-wa-buton:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(37, 211, 102, .4);
}

/* Bot tuzağı: ekran okuyucudan da, ekrandan da uzak dursun */
.teklif-tuzak {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 991.98px) {
	.teklif-duzen { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 575.98px) {
	.teklif-satir { grid-template-columns: 1fr; gap: 0; }
	.teklif-kart  { padding: 1.5rem 1.3rem 1.4rem; }
	.teklif-cta   { width: 100%; }
}

/* ---------- 1. adım: işlem türü kutucukları ---------- */
.teklif-form-alan { scroll-margin-top: 110px; }

/* Gizlenen bloklar: tema kuralları [hidden]'ı ezmesin diye açıkça yazıyoruz */
.secim-bolum[hidden],
.teklif-bolum[hidden],
.islem-secim[hidden],
.teklif-kart[hidden],
[data-grup][hidden] { display: none; }

/* Kutucuklar ekranin ustunde kalsin: temanin 5rem'lik ust boslugu yerine
   daha derli toplu bir kap kullaniyoruz. */
.secim-kap {
	padding-top: 1.6rem;
	padding-bottom: 3.2rem;
}
@media (min-width: 768px) {
	.secim-kap { padding-top: 2.2rem; padding-bottom: 4rem; }
}

/* 2. adım da navbara aynı mesafede başlasın. Temanın py-12/py-md-15'i
   yerine kullanılıyor: üst boşluk .secim-kap ile birebir aynı, alt boşluk
   sayfa sonu için daha geniş bırakıldı. */
.teklif-kap {
	padding-top: 1.6rem;
	padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
	.teklif-kap { padding-top: 2.2rem; padding-bottom: 5rem; }
}

.secim-ust {
	max-width: 46rem;
	margin: 0 auto 1.8rem;
	text-align: center;
}
.secim-baslik {
	margin-bottom: .7rem;
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	color: #16244a;
}
.secim-alt {
	margin: 0;
	font-size: .92rem;
	line-height: 1.7;
	color: #6b7896;
}

.islem-secim {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
	max-width: 62rem;
	margin: 0 auto;
}

.islem-kart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2rem 1.4rem 1.5rem;
	border: 1.5px solid rgba(22, 36, 74, .1);
	border-radius: 1rem;
	background: #fff;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(22, 36, 74, .07);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.islem-kart:hover {
	transform: translateY(-4px);
	border-color: var(--bs-primary);
	box-shadow: 0 18px 38px rgba(47, 95, 192, .18);
}
.islem-kart:focus-visible {
	outline: 2px solid rgba(63, 120, 224, .55);
	outline-offset: 3px;
}

/* Hazır ikon konursa <img>, konmazsa sayfadaki çizgi ikon (svg) gelir */
.islem-ikon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 1.1rem;
	background: rgba(63, 120, 224, .1);
	color: var(--bs-primary);
}
.islem-ikon svg { width: 2rem; height: 2rem; }

/* Hazır çizimler kendi renklerini ve zeminlerini taşıyor; arkalarına
   renkli kutu koymuyoruz (ürün kartlarındaki .kart-ikon-gorsel ile aynı mantık) */
.islem-ikon-gorsel {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 0;
	background: transparent;
}
.islem-ikon-gorsel img { width: 100%; height: 100%; object-fit: contain; }

.islem-yazi { flex: 1 1 auto; }
.islem-ad {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	color: #16244a;
}
.islem-aciklama {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	line-height: 1.55;
	color: #6b7896;
}
.islem-ok {
	margin-top: .3rem;
	font-size: .78rem;
	font-weight: 700;
	color: var(--bs-primary);
	transition: transform .25s ease;
}
.islem-kart:hover .islem-ok { transform: translateX(3px); }

.secim-guven {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.8rem;
	max-width: 62rem;
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
}
.secim-guven li {
	position: relative;
	padding-left: 1rem;
	font-size: .8rem;
	color: #6b7896;
}
.secim-guven li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48rem;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--bs-primary);
}

/* Dar ekranda kutucuklar alt alta ve yatay düzende */
@media (max-width: 991.98px) {
	.islem-secim { grid-template-columns: 1fr; max-width: 34rem; gap: .7rem; }
	.islem-kart {
		flex-direction: row;
		align-items: center;
		gap: .85rem;
		padding: 1.1rem 1.2rem;
		text-align: left;
	}
	.islem-ikon { width: 3rem; height: 3rem; border-radius: .8rem; }
	.islem-ikon svg { width: 1.5rem; height: 1.5rem; }
	.islem-ikon-gorsel { width: 3.6rem; height: 3.6rem; }
	.islem-ad { font-size: .92rem; }
	.islem-aciklama { font-size: .74rem; }
	.islem-ok { flex: 0 0 auto; margin: 0 0 0 auto; font-size: 1.4rem; }
	/* Dar ekranda "Devam et" yazısı açıklama metnini sıkıştırıyor, ok yeter */
	.islem-ok-yazi { display: none; }
}

/* Formun üstündeki "seçilen işlem" çubuğu */
.islem-secili {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .9rem;
	padding: .55rem .75rem;
	border-radius: .6rem;
	background: rgba(63, 120, 224, .07);
}
.islem-secili-yazi { flex: 1 1 auto; min-width: 0; }
.islem-secili-etiket {
	display: block;
	font-size: .64rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8592ad;
}
.islem-secili-ad {
	display: block;
	font-size: .82rem;
	font-weight: 700;
	color: #16244a;
}
.islem-degistir {
	flex: 0 0 auto;
	padding: .3rem .75rem;
	border: 1px solid rgba(63, 120, 224, .35);
	border-radius: 3rem;
	background: #fff;
	color: var(--bs-primary);
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.islem-degistir:hover { background: var(--bs-primary); color: #fff; }

/* ---------- Şahıs / şirket seçimi ---------- */
.musteri-tip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .3rem;
	margin-bottom: .55rem;
	padding: .25rem;
	border-radius: .6rem;
	background: rgba(22, 36, 74, .06);
}
.musteri-tip label { position: relative; display: block; margin: 0; cursor: pointer; }
/* Kutucuğu görsel olarak span çiziyor; radyo düğmesi ekrandan kaldırılıyor
   ama odaklanabilir kalsın diye display:none kullanılmıyor. */
.musteri-tip input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.musteri-tip span {
	display: block;
	padding: .42rem .5rem;
	border-radius: .45rem;
	font-size: .78rem;
	font-weight: 600;
	color: #6b7896;
	text-align: center;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.musteri-tip input:checked + span {
	background: #fff;
	color: #16244a;
	box-shadow: 0 2px 8px rgba(22, 36, 74, .12);
}
.musteri-tip input:focus-visible + span {
	outline: 2px solid rgba(63, 120, 224, .55);
	outline-offset: 1px;
}

.teklif-kisi-not {
	margin: 0 0 .7rem;
	font-size: .7rem;
	color: #8592ad;
}

@media (max-width: 575.98px) {
	.islem-kart { gap: .65rem; padding: .8rem .85rem; }
	.islem-ikon { width: 2.2rem; height: 2.2rem; }
}

/* ---------- Sözleşme metni kutusu ---------- */
.teklif-metin-ac {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bs-primary);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}
.teklif-metin-ac:hover { text-decoration: none; }

.metin-katman {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
	background: rgba(16, 26, 51, .55);
	backdrop-filter: blur(3px);
	animation: katmanGir .25s ease;
}
.metin-katman[hidden] { display: none; }

@keyframes katmanGir { from { opacity: 0; } to { opacity: 1; } }

.metin-kutu {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 82vh;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 26px 60px rgba(16, 26, 51, .32);
	overflow: hidden;
	animation: kutuGir .3s cubic-bezier(.22, .8, .3, 1);
}

@keyframes kutuGir {
	from { opacity: 0; transform: translateY(18px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.metin-kutu-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	border-bottom: 1px solid rgba(22, 36, 74, .1);
}
.metin-kutu-ust h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: #16244a;
}
.metin-kapat {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 36, 74, .06);
	color: #6b7896;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.metin-kapat:hover { background: rgba(22, 36, 74, .12); color: #16244a; }

.metin-kutu-govde {
	padding: 1.2rem 1.4rem;
	overflow-y: auto;
	color: #5a6785;
	font-size: .84rem;
	line-height: 1.8;
}
.metin-kutu-govde p { margin-bottom: .9rem; }
.metin-kutu-govde p:last-child { margin-bottom: 0; }

.metin-kutu-alt {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .7rem;
	padding: 1rem 1.4rem;
	border-top: 1px solid rgba(22, 36, 74, .1);
	background: rgba(63, 120, 224, .03);
}
.metin-vazgec,
.metin-kabul {
	padding: .58rem 1.3rem;
	border-radius: 3rem;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.metin-vazgec {
	border: 1px solid rgba(22, 36, 74, .16);
	background: #fff;
	color: #6b7896;
}
.metin-vazgec:hover { background: rgba(22, 36, 74, .04); }
.metin-kabul {
	border: 0;
	background: var(--bs-primary);
	color: #fff;
	box-shadow: 0 6px 16px rgba(47, 95, 192, .3);
}
.metin-kabul:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(47, 95, 192, .4); }

@media (max-width: 575.98px) {
	.metin-kutu { max-height: 88vh; }
	.metin-kutu-alt { flex-direction: column-reverse; align-items: stretch; }
	.metin-vazgec, .metin-kabul { width: 100%; }
}

/* ---------- Telefonla arama bandı ---------- */
.ara-bandi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 1.9rem 2.2rem;
	border-radius: 1rem;
	background: linear-gradient(120deg, #2f5fc0 0%, var(--bs-primary) 55%, #5a90ea 100%);
	box-shadow: 0 16px 38px rgba(22, 36, 74, .18);
}

.ara-metin { display: flex; flex-direction: column; }
.ara-ust {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}
.ara-baslik {
	margin-top: .3rem;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}

.ara-buton {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .95rem 1.7rem;
	border-radius: 3rem;
	background: #fff;
	color: var(--bs-primary);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(22, 36, 74, .18);
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.ara-buton:hover {
	color: var(--bs-primary);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(22, 36, 74, .26);
}
.ara-buton svg { flex: 0 0 auto; }

@media (max-width: 767.98px) {
	.ara-bandi {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.6rem 1.4rem;
	}
	.ara-baslik { font-size: 1.15rem; }
	.ara-buton  { width: 100%; justify-content: center; font-size: 1.15rem; }
}

/* ---------- Hakkımızda sayfası ---------- */
.hakkimizda-metin {
	color: #5a6785;
	font-size: 1rem;
	line-height: 1.85;
	margin-bottom: 1.1rem;
}
.hakkimizda-gorsel {
	max-width: 340px;
	display: block;
	margin: 0 auto;
}
/* Yuvaya illüstrasyon yerine gerçek fotoğraf konduğunda kutu genişler.
   Bulut kenar CSS maskesiyle DEĞİL, dosyanın kendisinde beyaza solarak
   geliyor; üstüne bir de var(--bulut) uygulanırsa çift solma oluyor.
   Bölüm zemini beyaz olduğu için dosyadaki solma zemine karışıyor. */
.hakkimizda-gorsel-foto {
	max-width: 470px;
	animation: fotoGirisi .9s cubic-bezier(.22, .8, .3, 1) both;
}

/* Kutu sayısı hakkimizda.php'deki $rakamlar dizisine göre değişebiliyor;
   sabit 4 sütun yerine kaç kutu varsa ona yayılıyor. */
.rakam-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1.2rem;
}
.rakam-kutu {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.8rem 1rem;
	border-radius: .8rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
}
.rakam-deger {
	font-size: 2rem;
	font-weight: 700;
	color: var(--bs-primary);
	line-height: 1.1;
}
.rakam-etiket {
	margin-top: .5rem;
	font-size: .85rem;
	color: #6b7896;
}

.fark-listesi {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.fark-listesi li {
	position: relative;
	padding: 1.15rem 1.3rem 1.15rem 3.1rem;
	border-radius: .8rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
	color: #5a6785;
	font-size: .95rem;
	line-height: 1.7;
}
.fark-listesi li::before {
	content: "✓";
	position: absolute;
	left: 1.15rem;
	top: 1.15rem;
	width: 1.4rem;
	height: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(63, 120, 224, .12);
	color: var(--bs-primary);
	font-size: .8rem;
	font-weight: 700;
}

.misyon-kutu {
	height: 100%;
	padding: 1.9rem 1.7rem;
	border-radius: .8rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
}
.misyon-kutu h3 {
	color: #16244a;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: .8rem;
}
.misyon-kutu p {
	color: #6b7896;
	font-size: .95rem;
	line-height: 1.8;
}

/* ---------- Erişilebilirlik / duyarlılık ---------- */
@media (prefers-reduced-motion: reduce) {
	.urun-kart { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
	.hero-sipsak { padding: 2.5rem 0 3.5rem; }
	.hero-lead { max-width: none; }
	.urun-grid-genis { grid-template-columns: repeat(2, 1fr); }
	.rakam-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
	.urun-grid,
	.urun-grid-genis,
	.fark-listesi { grid-template-columns: 1fr; }
	.rakam-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Branş bilgi bölümü (trafik-sigortasi.php) ---------- */
.bilgi-bolum { padding: 1rem 0 0; }

.bilgi-ust { max-width: 42rem; margin: 0 auto 2.6rem; text-align: center; }
.bilgi-ust h2 {
	margin-bottom: .7rem;
	color: #8592ad;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bilgi-ust h3 {
	margin-bottom: .9rem;
	color: #16244a;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.25;
}
.bilgi-ust p {
	margin: 0;
	color: #6b7896;
	font-size: .95rem;
	line-height: 1.8;
}

.bilgi-kutu {
	padding: 1.9rem 1.8rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
	box-shadow: 0 14px 36px rgba(22, 36, 74, .07);
}
.bilgi-kutu h4 {
	margin-bottom: .9rem;
	color: #16244a;
	font-size: 1.12rem;
	font-weight: 700;
}
.bilgi-metin {
	margin-bottom: .9rem;
	color: #6b7896;
	font-size: .93rem;
	line-height: 1.85;
}
.bilgi-metin:last-child { margin-bottom: 0; }

/* Teminat kartları */
.teminat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin: 2.2rem 0;
}
.teminat-kart {
	position: relative;
	padding: 1.7rem 1.5rem 1.5rem;
	border-radius: .9rem;
	background: #fff;
	border: 1px solid rgba(22, 36, 74, .08);
	box-shadow: 0 12px 30px rgba(22, 36, 74, .07);
	overflow: hidden;
}
/* üst kenardaki marka rengi şerit */
.teminat-kart::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #2f5fc0, var(--bs-primary), #5a90ea);
}
.teminat-kart h5 {
	margin-bottom: .55rem;
	color: #16244a;
	font-size: 1rem;
	font-weight: 700;
}
.teminat-kart p {
	margin: 0;
	color: #6b7896;
	font-size: .87rem;
	line-height: 1.75;
}

/* Kapsam içi / kapsam dışı ikilisi */
.bilgi-ikili {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	margin: 2.2rem 0;
}

.bilgi-liste { margin: 0; padding: 0; list-style: none; }
.bilgi-liste li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: .7rem;
	color: #6b7896;
	font-size: .9rem;
	line-height: 1.7;
}
.bilgi-liste li:last-child { margin-bottom: 0; }
.bilgi-liste li::before {
	position: absolute;
	left: 0;
	top: .05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	font-size: .72rem;
	font-weight: 700;
}
.bilgi-liste.olumlu li::before {
	content: "\2713";
	background: rgba(63, 120, 224, .12);
	color: var(--bs-primary);
}
.bilgi-liste.olumsuz li::before {
	content: "\2715";
	background: rgba(220, 53, 69, .1);
	color: #c62b3a;
}

/* Fiyatı etkileyen unsurlar */
.etken-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 2.2rem 0;
}
.etken-kart {
	padding: 1.3rem 1.2rem;
	border-radius: .8rem;
	background: rgba(63, 120, 224, .06);
	border: 1px solid rgba(63, 120, 224, .14);
}
.etken-kart h5 {
	margin-bottom: .35rem;
	color: #16244a;
	font-size: .92rem;
	font-weight: 700;
}
.etken-kart p {
	margin: 0;
	color: #6b7896;
	font-size: .82rem;
	line-height: 1.65;
}

/* Teminat limitleri her yıl değiştiği için sayfada sabit rakam vermiyoruz */
.bilgi-uyari {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin-top: 2.2rem;
	padding: 1.2rem 1.4rem;
	border-radius: .8rem;
	background: rgba(63, 120, 224, .07);
	border-left: 4px solid var(--bs-primary);
}
.bilgi-uyari p {
	margin: 0;
	color: #48577a;
	font-size: .88rem;
	line-height: 1.75;
}
.bilgi-uyari a { color: var(--bs-primary); font-weight: 700; white-space: nowrap; }

@media (max-width: 991.98px) {
	.teminat-grid { grid-template-columns: 1fr; }
	.bilgi-ikili  { grid-template-columns: 1fr; }
	.etken-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
	.etken-grid  { grid-template-columns: 1fr; }
	.bilgi-kutu  { padding: 1.5rem 1.3rem; }
}

/* ---------- Sağ alt köşedeki yüzen butonlar ----------
   WhatsApp ve "yukarı çık" butonu alt alta duruyor. Aynı çapta ve aynı
   sağ hizada olsunlar diye temanın .progress-wrap ölçüsünü de burada
   eşitliyoruz; yoksa geniş hap küçük dairenin üstünde hizasız duruyor. */
.progress-wrap {
	right: 1.5rem;
	bottom: 1.5rem;
	width: 2.9rem;
	height: 2.9rem;
}
/* Temanın ok simgesi 2.3rem'e sabitlenmiş; kabı büyütünce sol üstte kalıyor,
   kabın tamamına yayıp ortalıyoruz. */
.progress-wrap::after {
	width: 100%;
	height: 100%;
	line-height: 2.9rem;
}

.hizli-wa {
	position: fixed;
	right: 1.5rem;
	bottom: 5.1rem;            /* 1.5 + 2.9 + 0.7 boşluk */
	z-index: 1030;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.9rem;
	min-width: 2.9rem;
	padding: 0 .78rem;
	border-radius: 3rem;
	background: #25d366;
	color: #fff !important;
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}
.hizli-wa:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(37, 211, 102, .45);
}
.hizli-wa svg { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; fill: currentColor; }

/* Yazı normalde kapalı, üzerine gelince (ya da klavyeyle odaklanınca) açılır */
.hizli-wa-yazi {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width .3s ease, opacity .25s ease, margin-left .3s ease;
}
.hizli-wa:hover .hizli-wa-yazi,
.hizli-wa:focus-visible .hizli-wa-yazi {
	max-width: 7rem;
	opacity: 1;
	margin-left: .45rem;
}

/* Dokunmatik ekranda üzerine gelme yok; buton yalnızca ikon olarak kalır */
@media (hover: none) {
	.hizli-wa-yazi { display: none; }
}

/* ---------- Başlık çubuğu ayracı ----------
   Menü ile içerik arasında net bir sınır yoktu (zemin ikisinde de aynı
   degrade); ince mavi ışıklı çizgi ayırıyor. Sitedeki bütün sayfalarda
   geçerli — sayfa kaydırılınca sabitlenen .navbar-clone kopyasına da
   aynı çizgi uygulanıyor. */
header.wrapper,
.navbar-clone { position: relative; }

header.wrapper::after,
.navbar-clone::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: linear-gradient(90deg,
		rgba(47, 95, 192, 0) 0%,
		rgba(47, 95, 192, .75) 15%,
		#2f5fc0 35%,
		#5a90ea 50%,
		#2f5fc0 65%,
		rgba(47, 95, 192, .75) 85%,
		rgba(47, 95, 192, 0) 100%);
	box-shadow: 0 0 10px rgba(47, 95, 192, .75), 0 0 26px rgba(63, 120, 224, .45);
	pointer-events: none;
}

/* ---------- Footer iletişim sütunu ---------- */
.alt-adres {
	margin-bottom: .8rem;
	font-style: normal;
	line-height: 1.65;
}
.alt-iletisim li { line-height: 1.7; }

/* Gömülü harita: sütun genişliğine uyar, oranını korur */
.alt-harita {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-bottom: .6rem;
	border-radius: .5rem;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
}
.alt-harita iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* aspect-ratio desteklemeyen eski tarayıcılarda harita çökmesin */
@supports not (aspect-ratio: 16 / 10) {
	.alt-harita { height: 150px; }
}

.alt-yol-tarifi {
	display: inline-block;
	font-size: .85rem;
	font-weight: 600;
}

/* ---------- Hakkımızda: dükkân fotoğrafı ---------- */
/* Bulut kenar: üst üste binen elips geçişlerinin birleşimi. Kenarlar
   yumuşayıp zemine karışır, merkez tam opak kalır — tabela ve vitrin
   yazıları kırpılmasın diye. Çerçeve/gölge yok; sert kenar bulutu bozar. */
/* Bulut maskesi iki yerde kullanılıyor (hero fotoğrafı ve kuruluş hikâyesi
   görseli), o yüzden :root'ta tanımlı — kardeş elemana miras geçmiyor. */
:root {
	--bulut:
		/* üst kenar boyunca puflar */
		radial-gradient(17% 21% at 14% 25%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 32% 21%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 50% 19%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 68% 21%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 86% 25%, #000 0 58%, transparent 100%),
		/* alt kenar boyunca puflar */
		radial-gradient(17% 21% at 14% 75%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 32% 79%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 50% 81%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 68% 79%, #000 0 58%, transparent 100%),
		radial-gradient(17% 21% at 86% 75%, #000 0 58%, transparent 100%),
		/* sol ve sağ kenar puflari */
		radial-gradient(15% 22% at 11% 42%, #000 0 58%, transparent 100%),
		radial-gradient(15% 22% at 11% 60%, #000 0 58%, transparent 100%),
		radial-gradient(15% 22% at 89% 42%, #000 0 58%, transparent 100%),
		radial-gradient(15% 22% at 89% 60%, #000 0 58%, transparent 100%),
		/* ortayi dolduran govde */
		radial-gradient(34% 26% at 50% 50%, #000 0 74%, transparent 100%);
}

/* Hakkımızda hero'sundaki dükkân fotoğrafı kaldırıldı; bulut maskesi
   yukarıdaki :root'ta duruyor ve kuruluş hikâyesi görseli kullanıyor. */
@keyframes fotoGirisi {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hakkimizda-gorsel-foto { animation: none; }
}

/* Blog / kampanya listesi boşken gösterilen bilgi metni */
.bos-liste {
	margin: 0 0 2rem;
	padding: 2.5rem 1.5rem;
	border: 1px dashed rgba(22, 36, 74, .16);
	border-radius: .75rem;
	background: rgba(63, 120, 224, .03);
	color: #6b7896;
	font-size: .95rem;
	text-align: center;
}

/* ---------- Yönetim kurulu (hakkimizda.php) ---------- */
.ekip-sarmal { position: relative; }

/* Yatay kaydırmalı bar: 3 kişi masaüstünde sığar, dar ekranda ve kişi
   eklendikçe kaydırmaya döner. Kaydırma çubuğu gizli, tekerlek/dokunuş açık. */
.ekip-bar {
	display: flex;
	gap: 1.6rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: .5rem .25rem 1rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ekip-bar::-webkit-scrollbar { display: none; }

.ekip-kisi {
	flex: 0 0 auto;
	width: 190px;
	margin: 0;
	text-align: center;
	scroll-snap-align: center;
}

/* Yuvarlak çerçeve */
.ekip-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	margin: 0 auto .9rem;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(63, 120, 224, .35),
				0 12px 26px rgba(22, 36, 74, .13);
	transition: transform .35s ease, box-shadow .35s ease;
}
.ekip-kisi:hover .ekip-avatar {
	transform: translateY(-4px);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bs-primary),
				0 18px 34px rgba(22, 36, 74, .18);
}
.ekip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fotoğrafı olmayan kişi: baş harf rozeti */
.ekip-avatar-harf {
	background: linear-gradient(145deg, #eaf1fd, #d7e4fa);
	color: var(--bs-primary);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.ekip-ad {
	display: block;
	color: #16244a;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.35;
}
.ekip-unvan {
	display: block;
	margin-top: .25rem;
	color: #6b7896;
	font-size: .82rem;
	line-height: 1.5;
}

/* Kaydırma okları: yalnızca içerik taşarsa JS gösterir */
.ekip-ok {
	position: absolute;
	top: 66px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(22, 36, 74, .12);
	border-radius: 50%;
	background: #fff;
	color: var(--bs-primary);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(22, 36, 74, .12);
	transition: background .25s ease, color .25s ease;
}
.ekip-ok:hover { background: var(--bs-primary); color: #fff; }
.ekip-ok-sol { left: -8px; }
.ekip-ok-sag { right: -8px; }
.ekip-ok[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ekip-bar { scroll-behavior: auto; }
	.ekip-kisi:hover .ekip-avatar { transform: none; }
}

/* ---------- Başlıktaki "Hemen Ara" butonu ---------- */
.bas-ara {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
	overflow: hidden;           /* süzülen dolgu hapı taşmasın */
}
/* Tema butonun yazısını koyu bırakıyordu, mavi zeminde okunmuyordu */
.bas-ara,
.bas-ara:hover,
.bas-ara:focus,
.bas-ara span,
.bas-ara svg { color: #fff !important; }

/* Üzerine gelince soldan süzülen mavi dolgu */
.bas-ara::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, #2450a8, #4f86e8);
	transform: translateX(-101%);
	transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}
.bas-ara:hover::after,
.bas-ara:focus-visible::after { transform: translateX(0); }
/* İçerik dolgunun üstünde kalsın */
.bas-ara > * { position: relative; z-index: 1; }

.bas-ara svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.bas-ara-numara {
	padding-left: .55rem;
	margin-left: .1rem;
	border-left: 1px solid rgba(255, 255, 255, .38);
	font-weight: 700;
	letter-spacing: .01em;
}
/* Orta genişlikte numara yer kaplamasın, yalnızca "Hemen Ara" kalsın */
@media (max-width: 1199.98px) {
	.bas-ara-numara { display: none; }
}