.modal-busy{
	display: none;
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: black;
	filter: alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity: 0.8;
}

.center-busy{
	z-index: 1000;
	margin: 300px auto;
	padding: 0px;
	width: 130px;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

.center-busy img{
	height: 80px;
	width: 80px;
}

.download-video iframe {
	width: 100%;
	height: 370px;
}
/* ============================================================
   Hakkımızda sayfası — uzun metin tipografisi
   Yalnızca .about-page kapsamında; başka sayfaları etkilemez.
   ============================================================ */
.about-page {
	padding-bottom: 70px;
}

.about-page .col-md-12 > h2:first-child {
	margin-top: 0;
}

.about-page h2 {
	max-width: 34ch;
	margin: 64px 0 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	color: #0F1418;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.about-page h2:after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin-top: 16px;
	background: #C8102E;
}

.about-page h3 {
	max-width: 40ch;
	margin: 34px 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: #0F1418;
	text-transform: none;
	letter-spacing: 0;
}

.about-page p,
.about-page ul,
.about-page ol {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.65;
	color: #2B3339;
}

.about-page p {
	margin-bottom: 18px;
}

.about-page ul {
	margin: 0 0 22px;
	padding-left: 0;
	list-style: none;
}

.about-page ul li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
}

.about-page ul li:before {
	content: "";
	position: absolute;
	top: 11px;
	left: 2px;
	width: 7px;
	height: 7px;
	background: #C8102E;
}

.about-page strong {
	color: #0F1418;
	font-weight: 700;
}

@media (max-width: 767px) {
	.about-page h2 { margin-top: 44px; font-size: 25px; }
	.about-page h3 { font-size: 18px; }
	.about-page p,
	.about-page ul,
	.about-page ol { font-size: 16px; }
}

/* Not: Eski "Special Features" kart hizalama düzeltmesi kaldırıldı.
   Bölüm .sf-grid (CSS Grid) ile yeniden yazıldığı için yükseklik
   hizalaması artık ızgaradan geliyor; Bootstrap flex hilesine gerek yok.
   Bkz. bu dosyanın sonundaki "SPECIAL FEATURES — spec sheet ızgarası". */

/* Ürünler bölümü — aynı hizalama sorunu (Bootstrap satırı) */
.products-area .row > [class*="col-"]:not(.col-12),
.services-area .row > [class*="col-"]:not(.col-12) {
	display: flex;
}

.products-area .services-item,
.services-area .services-item {
	flex: 1 1 auto;
	width: 100%;
}

/* Haberler carousel'i — kartları eşit yükseklikte tut.
   Owl item genişliklerini inline ayarlıyor; flex-shrink:0 ile korunuyor. */
.blog-area .owl-stage {
	display: flex;
}

.blog-area .owl-item {
	display: flex;
	flex: 0 0 auto;
}

.blog-area .owl-item .blog-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.blog-area .owl-item .blog-text {
	flex: 1 1 auto;
}

/* ============================================================
   Markalar sayfası
   ============================================================ */
.brand-page { padding-bottom: 80px; }

.brand-intro {
	max-width: 70ch;
	margin: 0 auto 44px;
	font-size: 17px;
	line-height: 1.65;
	color: #2B3339;
	text-align: center;
}

/* Alfabe gezinme şeridi */
.brand-alpha {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 54px;
	padding-bottom: 26px;
	border-bottom: 1px solid #E2E6E9;
}

.brand-alpha a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	background: #F4F6F7;
	border: 1px solid #E2E6E9;
	color: #0F1418;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: all .18s cubic-bezier(.2,.8,.2,1);
}

.brand-alpha a:hover {
	background: #C8102E;
	border-color: #C8102E;
	color: #fff;
}

/* Harf grubu başlığı */
.brand-group { margin-bottom: 14px; }

.brand-letter {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 22px;
}

.brand-letter span {
	flex: 0 0 auto;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: #C8102E;
	letter-spacing: .04em;
}

.brand-letter:after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #E2E6E9;
}

/* Marka kartı */
.brand-card {
	position: relative;
	height: 100%;
	margin-bottom: 26px;
	padding: 26px 24px 24px;
	background: #fff;
	border: 1px solid #E2E6E9;
	transition: all .18s cubic-bezier(.2,.8,.2,1);
}

.brand-card:before {
	content: "";
	position: absolute;
	top: -1px; left: -1px; right: -1px;
	height: 3px;
	background: #C8102E;
	opacity: 0;
	transition: opacity .18s ease-out;
}

.brand-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(15,20,24,.10);
	border-color: #D6DBDF;
}

.brand-card:hover:before { opacity: 1; }

.brand-card h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: #0F1418;
	text-transform: none;
}

.brand-tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 11px;
	background: #F4F6F7;
	border: 1px solid #E2E6E9;
	color: #5C666F;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

.brand-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #2B3339;
}

.brand-page .row > [class*="col-"] { display: flex; }

@media (max-width: 767px) {
	.brand-intro { font-size: 16px; text-align: left; }
	.brand-letter span { font-size: 22px; }
	.brand-card { padding: 22px 20px; }
	.brand-card h3 { font-size: 19px; }
}

/* ============================================================
   Ürün kartları — modern endüstriyel görünüm
   Kapsam: ürün sayfası + ana sayfadaki ürünler bölümü
   ============================================================ */
.product-page .services-item,
.products-area .services-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E2E6E9;
	overflow: hidden;
	transition: all .2s cubic-bezier(.2,.8,.2,1);
}

.product-page .services-item:hover,
.products-area .services-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(15,20,24,.12);
	border-color: #D6DBDF;
}

.product-page .services-photo,
.products-area .services-photo {
	height: 210px;
	transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.product-page .services-item:hover .services-photo,
.products-area .services-item:hover .services-photo {
	transform: scale(1.04);
}

.product-page .image-effect,
.products-area .image-effect {
	display: block;
	overflow: hidden;
}

.product-page .services-text,
.products-area .services-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 22px 20px;
	background: #fff;
	border-top: 3px solid #C8102E;
}

.product-page .services-item:hover .services-text,
.products-area .services-item:hover .services-text {
	background: #fff;
}

.product-page .services-text h3,
.products-area .services-text h3 {
	margin: 0 0 10px;
}

.product-page .services-text h3 a,
.products-area .services-text h3 a {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #0F1418;
}

.product-page .services-text h3 a:hover,
.products-area .services-text h3 a:hover {
	color: #C8102E;
}

.product-page .services-text p,
.products-area .services-text p {
	flex: 1 1 auto;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #2B3339;
}

/* "Devamını oku" bağlantısı — teklif odaklı vurgu */
.product-page .button-bn,
.products-area .button-bn {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #EDF0F2;
}

.product-page .button-bn a,
.products-area .button-bn a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #C8102E;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.product-page .button-bn a i,
.products-area .button-bn a i {
	transition: transform .18s ease-out;
}

.product-page .button-bn a:hover i,
.products-area .button-bn a:hover i {
	transform: translateX(4px);
}

.product-page .row > [class*="col-"] { display: flex; }
.product-page .services-item { width: 100%; margin-bottom: 30px; }

@media (max-width: 767px) {
	.product-page .services-photo,
	.products-area .services-photo { height: 180px; }
}

/* ============================================================
   Partnerler bölümü — tedarikçi marka kutucukları
   ============================================================ */
.partner-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.partner-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 104px;
	padding: 18px 12px;
	background: #fff;
	border: 1px solid #E2E6E9;
	text-align: center;
	text-decoration: none;
	transition: all .18s cubic-bezier(.2,.8,.2,1);
}

.partner-tile:hover {
	transform: translateY(-2px);
	border-color: #C8102E;
	box-shadow: 0 10px 24px rgba(15,20,24,.10);
	text-decoration: none;
}

.partner-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	color: #0F1418;
	letter-spacing: .01em;
}

.partner-tile:hover .partner-name { color: #C8102E; }

.partner-cat {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	color: #5C666F;
	letter-spacing: .07em;
	text-transform: uppercase;
}

@media (max-width: 1199px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .partner-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
                             .partner-tile { min-height: 88px; padding: 14px 8px; }
                             .partner-name { font-size: 15px; }
                             .partner-cat { display: none; } }
@media (max-width: 479px)  { .partner-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Ürün sayfası — marka filtresi
   ============================================================ */
.product-filter {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid #E2E6E9;
}

.product-filter .filter-label {
	flex: 0 0 auto;
	padding-top: 9px;
	color: #5C666F;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-chip {
	display: inline-block;
	padding: 8px 15px;
	background: #F4F6F7;
	border: 1px solid #E2E6E9;
	color: #2B3339;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: all .16s cubic-bezier(.2,.8,.2,1);
}

.filter-chip:hover {
	border-color: #C8102E;
	color: #C8102E;
	text-decoration: none;
}

.filter-chip.is-active {
	background: #C8102E;
	border-color: #C8102E;
	color: #fff;
}

.filter-result {
	margin: 0 0 26px;
	color: #5C666F;
	font-size: 15px;
}

.filter-result strong { color: #0F1418; }

.filter-empty {
	padding: 40px 0;
	color: #5C666F;
	font-size: 17px;
	text-align: center;
}

/* Kart üzerindeki marka rozetleri */
.product-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 12px;
}

.product-brand-tag {
	display: inline-block;
	padding: 3px 8px;
	background: #F4F6F7;
	border: 1px solid #E2E6E9;
	color: #5C666F;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.product-filter { flex-direction: column; gap: 12px; }
	.product-filter .filter-label { padding-top: 0; }
	.filter-chip { padding: 7px 12px; font-size: 13px; }
}

/* Marka kartından ürün filtresine bağlantı */
.brand-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid #EDF0F2;
	width: 100%;
	color: #C8102E;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.brand-link i { transition: transform .18s ease-out; }
.brand-link:hover { text-decoration: none; }
.brand-link:hover i { transform: translateX(4px); }

/* ============================================================
   Yüzen iletişim butonu (sağ altta, açılıp kapanır)
   Kanallar panelden yönetilir: Admin > Contact Button
   ============================================================ */
.contact-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.contact-fab-items {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 12px;
	/* kapaliyken gizli ama erisilebilirlik icin olcusuz degil */
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s cubic-bezier(.2,.8,.2,1),
	            transform .22s cubic-bezier(.2,.8,.2,1),
	            visibility 0s linear .22s;
}

.contact-fab.is-open .contact-fab-items {
	max-height: 500px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.contact-fab-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(15,20,24,.24);
	transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease-out;
}

.contact-fab-item:hover {
	transform: scale(1.08);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(15,20,24,.32);
}

.contact-fab-item i { line-height: 1; }

/* Etiket balonu */
.contact-fab-tip {
	position: absolute;
	right: 66px;
	white-space: nowrap;
	padding: 6px 12px;
	background: #0F1418;
	border-radius: 4px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: all .16s ease-out;
}

.contact-fab-item:hover .contact-fab-tip {
	opacity: 1;
	transform: translateX(0);
}

/* Ana açma/kapama butonu */
.contact-fab-toggle {
	position: relative;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #C8102E;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(15,20,24,.30);
	transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease-out;
}

.contact-fab-toggle:hover { transform: scale(1.06); }
.contact-fab-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.contact-fab-toggle i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity .18s ease-out, transform .18s ease-out;
}

.contact-fab .contact-fab-close { opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(-90deg); }
.contact-fab.is-open .contact-fab-open  { opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(90deg); }
.contact-fab.is-open .contact-fab-close { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }

@media (max-width: 767px) {
	.contact-fab { right: 16px; bottom: 16px; gap: 10px; }
	.contact-fab-items { gap: 10px; }
	.contact-fab-item { width: 48px; height: 48px; font-size: 20px; }
	.contact-fab-toggle { width: 54px; height: 54px; font-size: 21px; }
	.contact-fab-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-fab-items,
	.contact-fab-item,
	.contact-fab-toggle,
	.contact-fab-toggle i { transition: none; }
}

/* ============================================================
   Doküman ağacı düzeltmeleri — görünüm korunur, semantik düzelir
   ============================================================ */
/* Slider: 2. ve sonraki slaytlarda h1 yerine p kullanıldı */
.slider-text .slider-heading {
	margin: 0 0 15px;
	font-size: 45px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-transform: uppercase;
}

/* Sayaç: h2/h4 yerine h3/p
   Renk açıkça verilmeli: global "h1..h6 { color:#313131 }" kuralı,
   .counter-item üzerindeki color:#fff devralmasını ezip sayıları
   koyu arka planda siyah gösteriyordu. */
.counter-item h3.counter {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.counter-item .counter-label {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

/* Aynı sebeple bölümün tamamını beyaza sabitle (ikon, olası ek metin) */
.counterup-area .counter-item,
.counterup-area .counter-item i,
.counterup-area .counter-item h2,
.counterup-area .counter-item h3,
.counterup-area .counter-item h4,
.counterup-area .counter-item p,
.counterup-area .counter-item span {
	color: #fff;
}

/* Not: Eski ".choose-text h3.card-title" kuralı kaldırıldı.
   "Why Choose Us" bölümü .wcg-grid (kademeli kartlar) ile yeniden
   yazıldı; tema sınıfları artık ana sayfada kullanılmıyor.
   Bkz. bu dosyanın sonundaki "WHY CHOOSE US" bölümü. */

@media (max-width: 767px) {
	.slider-text .slider-heading { font-size: 26px; }
	.counter-item h3.counter { font-size: 32px; }
}

/* Ekran okuyucular icin gorunmez ama erisilebilir baslik */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Harita altındaki "büyük haritada gör" bağlantısı */
.map-area { position: relative; }
.map-area .map-link {
	margin: 0;
	padding: 10px 15px;
	background: #F4F6F7;
	border-top: 1px solid #E2E6E9;
	font-size: 13px;
	text-align: center;
}
.map-area .map-link a { color: #2B3339; font-weight: 600; text-decoration: none; }
.map-area .map-link a:hover { text-decoration: underline; }

/* ============================================================
   Hover okunabilirliği (WCAG AA — metin eşiği 4.5:1)

   Tema, hover rengi olarak kendi eski mavisini (#3367c1) ve koyu
   grisini (#313131) kullanıyor. Başlığı marka lacivertine (#172F58)
   çevirdikten sonra bu kombinasyonlar okunamaz hale geldi:

     ana menü   : beyaz 13.26:1  ->  #3367c1 lacivert üzerinde 2.43:1
     .button a  : beyaz          ->  #313131, mavi zemin      2.39:1

   Tema kuralları zemini DEĞİŞTİRMEDEN yalnızca yazı rengini
   koyulaştırdığı için sorun hover anında ortaya çıkıyor.
   ============================================================ */

/* DÜZELTME: ana menü lacivert BAŞLIKTA değil, BEYAZ zeminli .menu-area
   içinde. Orada hover rengi marka laciverti olmalı (8.4:1); açık bir ton
   vermek okunaklılığı bozar (ölçüm: #4FC3F0 beyaz üzerinde 2.02:1).
   .header-area ise ince lacivert ÜST ŞERİT’tir — menü içermez. */
.menu-area ul.nav-menu li:hover > a,
.menu-area ul.nav-menu li > a:hover,
.menu-area ul.nav-menu li > a:focus-visible {
	color: #0B4F8A;
}

.menu-area ul.nav-menu li ul li:hover > a,
.menu-area ul.nav-menu li ul li > a:hover {
	color: #0B4F8A;
}

/* Koyu yüzeylerdeki diğer bağlantılar (üst şerit, sosyal, sayaç) */
.header-area a:hover,
.social-bar li a:hover,
.counterup-area a:hover {
	color: #4FC3F0;
}

/* Birincil buton — hover'da zemin koyulaşır, yazı beyaz kalır (8.4:1).
   Tema tam tersini yapıyordu: zemin aynı mavi, yazı #313131. */
.button a:hover,
.button a:focus-visible {
	background: #0B4F8A;
	border-color: #06204D;
	color: #fff;
}

/* Metin bağlantısı biçimindeki buton */
.button-bn a:hover {
	color: #0B4F8A;
}

/* Açık zeminli bağlantılarda tema mavisi -> marka laciverti (7.7:1) */
a:hover,
.footer-item ul li a:hover,
.footer-recent-text a:hover,
.services-text a:hover,
.blog-item h3 a:hover,
.blog-one-text h3 a:hover,
.recent-text a:hover,
.tagcloud a:hover,
.product-text h3 a:hover,
.product-rated-text a:hover,
.gallery-text a:hover,
.portfolio-text h3 a:hover,
.blog-author li a:hover,
.cart-table .table tbody td a:hover,
.dropdown-menu a:hover {
	color: #0B4F8A;
}

/* ------------------------------------------------------------
   Kök sebep: app.blade.php içinde panelden gelen $setting->front_end_color
   hem .header-area ZEMİNİNE hem de "ul.nav-menu li:hover > a" YAZI rengine
   !important ile uygulanıyor. Tema bu rengin açık zemin üzerinde
   kullanılacağını varsaymış; biz lacivert başlığa geçince hover yazısı
   zeminle aynı renk oldu — yani görünmez.

   O blok custom.css'ten SONRA geldiği için eşit özgüllükte !important
   yetmez; aşağıdaki seçiciler bilerek bir kademe daha özgül.
   ------------------------------------------------------------ */

/* Menü beyaz zeminde olduğu için temannın lacivert hover'ı zaten doğru;
   burada yalnızca marka tonunu sabitliyoruz. */
.menu-area ul.nav-menu li:hover > a,
.menu-area ul.nav-menu li > a:hover {
	color: #0B4F8A !important;
}

.menu-area ul.nav-menu li ul li:hover > a,
.menu-area ul.nav-menu li ul li > a:hover {
	color: #0B4F8A !important;
}

/* Mobil menü (meanmenu) koyu zeminli — orada açık ton */
.mean-container .mean-nav ul li a:hover {
	color: #4FC3F0 !important;
}


/* Etkin filtre çipi — hover'da kaybolmasın.
   .filter-chip:hover etkin çiple de eşleştiği için yazı rengini marka
   rengine çeviriyordu; etkin çipin ZEMİNİ de aynı marka rengi olduğundan
   kontrast 1.0'a düşüyor, yani yazı tamamen görünmez oluyordu.
   Çözüm: etkin çipte yazı beyaz kalır, zemin bir ton koyulaşır. */
.filter-chip.is-active:hover,
.filter-chip.is-active:focus-visible {
	background: #A00D25;
	border-color: #A00D25;
	color: #fff;
}

/* ============================================================
   SPECIAL FEATURES — "spec sheet" ızgarası
   ------------------------------------------------------------
   Tema, birbirinden kopuk gölgeli kartlar kullanıyordu; sanayi
   tedarik kimliğine daha yakın olsun diye hücreler arasındaki
   1px boşlukla çizilen bir teknik-föy matrisine çevrildi.

   Izgara boşluğu = çizgi rengi, hücreler beyaz. Böylece ayrı
   ayrı kenarlık tanımlamadan tek pikselik, çift çizgisiz bir
   matris çıkıyor. Yükseklik hizalaması da CSS Grid'ten geliyor;
   eski Bootstrap flex düzeltmesine gerek kalmadı.

   --sf-accent panelden gelir (view-home.blade.php satır içi).
   ============================================================ */

.sf-area {
	--sf-accent: #0B4F8A;
	--sf-line: #E2E6E9;
	padding: 90px 0;
	background: #FAFBFC;
	border-top: 1px solid var(--sf-line);
	border-bottom: 1px solid var(--sf-line);
}

.sf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 10px;
	background: var(--sf-line);
	border: 1px solid var(--sf-line);
}

.sf-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px 32px;
	background: #fff;
	overflow: hidden;
	transition: background .2s ease-out;
}

/* Köşedeki sıra numarası — dekoratif, ekran okuyucudan gizli */
.sf-index {
	position: absolute;
	top: 16px;
	right: 22px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--sf-accent);
	opacity: .09;
	transition: opacity .2s ease-out;
	pointer-events: none;
}

.sf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 22px;
	border: 1px solid var(--sf-accent);
	color: var(--sf-accent);
	font-size: 21px;
	transition: background .2s ease-out, color .2s ease-out;
}

.sf-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #0F1418;
}

.sf-body {
	flex: 1 1 auto;
}

.sf-body,
.sf-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #3A444C;
}

/* Alt kenardan büyüyen vurgu çizgisi */
.sf-rule {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--sf-accent);
	transition: width .3s cubic-bezier(.2,.8,.2,1);
}

.sf-cell:hover .sf-icon {
	background: var(--sf-accent);
	color: #fff;
}

.sf-cell:hover .sf-index { opacity: .16; }
.sf-cell:hover .sf-rule  { width: 100%; }

@media (max-width: 991px) {
	.sf-grid { grid-template-columns: repeat(2, 1fr); }
	.sf-cell { padding: 30px 26px 28px; }
	.sf-index { font-size: 40px; }
}

@media (max-width: 575px) {
	.sf-area { padding: 60px 0; }
	.sf-grid { grid-template-columns: 1fr; }
	.sf-cell { padding: 26px 22px 24px; }
}

/* Hareketi kısıtlayan kullanıcılar */
@media (prefers-reduced-motion: reduce) {
	.sf-cell, .sf-icon, .sf-index, .sf-rule { transition: none; }
}

/* ============================================================
   WHY CHOOSE US — SMART GEO AZE'ye özel
   ------------------------------------------------------------
   UK sitesi bu bölümde dönüşümlü editöryal satırlar kullanıyor.
   GEO bilerek ayrı bir ritim kullanır: lacivert bandın üzerine
   taşan, kademeli dizilmiş kartlar.

   Bant SABİT YÜKSEKLİKLİ DEĞİL. Başlık kendi kutusunun içinde
   durur, kartlar negatif üst boşlukla bandın alt kenarına taşar.
   Böylece başlık metni uzayınca (Gürcüce başlıklar İngilizceden
   belirgin uzun) bant da birlikte uzar — kırpılma olmaz.

   Kademe :nth-child(3n+2)/(3n+3) ile verildiği için panelden
   dördüncü madde eklenirse desen bir sonraki satırda tekrar eder.

   --wcg-band panelden gelir; vurgu GEO'nun kırmızısıdır.
   ============================================================ */

.wcg-area {
	--wcg-band: #172F58;
	--wcg-accent: #C8102E;
	position: relative;
	padding-bottom: 90px;
	background: #F5F7F8;
}

.wcg-head {
	padding: 76px 0 132px;          /* alt boşluk kartların taşması için */
	background: var(--wcg-band);
}

/* Koyu bant üzerinde başlık — tema .headline rengini koyu bırakıyor */
.wcg-head .headline h2 { color: #fff; }
.wcg-head .headline h3 { color: #C3CEDC; }   /* lacivert üzerinde 7.4:1 */

.wcg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	/* stretch (ızgara varsayılanı): kart yükseklikleri satır yüksekliğinden
	   kendi üst boşluğu çıkarılarak hesaplanır. Sonuç: ÜSTLER kademeli,
	   ALTLAR hizalı. start kullanılırsa alt kenarlar içerik uzunluğuna göre
	   düzensizleşiyor — Gürcüce metinler İngilizceden uzun olduğu için
	   bu fark canlıda belirginleşiyordu. */
	align-items: stretch;
	margin-top: -96px;              /* bandın üzerine taşır */
}

.wcg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 14px 34px rgba(15, 20, 24, .12);
	transition: transform .22s cubic-bezier(.2,.8,.2,1),
	            box-shadow .22s ease-out;
}

/* Kademe — her üç kartta bir tekrar eder */
.wcg-card:nth-child(3n+2) { margin-top: 34px; }
.wcg-card:nth-child(3n+3) { margin-top: 68px; }

.wcg-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(15, 20, 24, .18);
}

.wcg-shot {
	position: relative;
	overflow: hidden;
}

.wcg-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.wcg-card:hover .wcg-shot img { transform: scale(1.04); }

/* Fotoğrafın alt kenarına oturan numara bloğu */
.wcg-no {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 9px 16px;
	background: var(--wcg-accent);
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
}

.wcg-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 26px 28px;
	border-top: 3px solid var(--wcg-accent);
}

.wcg-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #0F1418;
}

.wcg-title i {
	flex: 0 0 auto;
	font-size: 17px;
	color: var(--wcg-accent);
}

.wcg-text,
.wcg-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #3A444C;
}

@media (max-width: 991px) {
	.wcg-head { padding: 60px 0 112px; }
	.wcg-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		margin-top: -80px;
	}
	/* İki sütunda kademe deseni de ikişerli olmalı */
	.wcg-card:nth-child(3n+2),
	.wcg-card:nth-child(3n+3) { margin-top: 0; }
	.wcg-card:nth-child(2n)   { margin-top: 30px; }
}

@media (max-width: 575px) {
	.wcg-area { padding-bottom: 60px; }
	.wcg-head { padding: 50px 0 96px; }
	.wcg-grid {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: -70px;
	}
	/* Tek sütunda kademe anlamsız */
	.wcg-card:nth-child(n) { margin-top: 0; }
	.wcg-body { padding: 22px 20px 24px; }
	.wcg-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.wcg-card,
	.wcg-shot img { transition: none; }
	.wcg-card:hover { transform: none; }
	.wcg-card:hover .wcg-shot img { transform: none; }
}

/* ============================================================
   Yukari-cik butonu ile yuzen iletisim butonu (FAB) cakismasi
   ------------------------------------------------------------
   Tema .scroll-top'u sag alt koseye (bottom:20 right:20) sabitliyor;
   FAB de ayni kosede (bottom:22 right:22). Olculdu: 50x50 butonun
   48x48'i FAB'in uzerine biniyordu.

   Cozum: yukari-cik butonu SOL ALT koseye alindi, FAB sag altta kaldi.
   Karsit koseler oldugu icin FAB acilip 258px yukari buyudugunde bile
   cakisma imkansiz; JS koordinasyonu gerekmez.

   .has-fab sinifini blade yalnizca FAB gercekten render edilecekse
   ekler; kanallar panelden kapatilirsa buton eski kosesinde kalir.
   ============================================================ */

.scroll-top.has-fab {
	/* Sol alt kose. Tema right:20px veriyor — left ile birlikte iki kenara
	   birden yaslanmasin diye right MUTLAKA auto'ya cekilmeli. */
	right: auto;
	left: 22px;
	/* FAB toggle ile ayni taban cizgisi (FAB da bottom:22) */
	bottom: 22px;
}

/* FAB ile ayni dil: daire, tam opaklik, esdeger golge.
   Tema opacity:.7 veriyordu — beyaz ok koyu zeminde soluk kaliyordu. */
.scroll-top.has-fab {
	border-radius: 50%;
	opacity: 1;
	box-shadow: 0 8px 22px rgba(15, 20, 24, .30);
}

@media (max-width: 767px) {
	/* Mobilde FAB bottom:16 — ayni taban cizgisi */
	.scroll-top.has-fab {
		right: auto;
		left: 16px;
		bottom: 16px;
	}
}

/* ============================================================
   Erisilebilirlik: bolum alt basligi kontrasti
   ------------------------------------------------------------
   Tema .headline h3 icin #777 veriyor. Olculdu:
     beyaz     4.48:1   <- AA esigi 4.5'in ALTINDA
     #f5f5f5   4.11:1   (.bg-area bolumleri)
     #FAFBFC   4.32:1   (.sf-area)
   Uc zeminde de kaliyordu. #5C666F ile: 5.86 / 5.37 / 5.65 — hepsi gecer,
   ama govde metninden (#3A444C) hala belirgin acik, yani "alt baslik"
   hiyerarsisi korunuyor.

   Not: .wcg-head icindeki alt baslik lacivert bant uzerinde durur ve
   ayri kuralla (#C3CEDC) eziliyor — bkz. §18.
   ============================================================ */

.headline h3 {
	color: #5C666F;
}

/* ============================================================
   Marka logolari — ana sayfa "Brands & Partners" + /brands
   ------------------------------------------------------------
   Logolar panelden tek tek yuklenir ve her biri farkli en/boy
   oraninda gelir (genis yatay, kare, dikey). Tutarli gorunum icin:

   - object-fit: contain  -> logo asla kirpilmaz veya gerilmez
   - sabit yukseklikli kutu -> satirlar hizali kalir
   - max-width: 100%      -> genis logolar kutuyu tasirmaz

   Logo yoksa eski metin gorunumu aynen durur (bkz. blade kosulu),
   boylece logolar tek tek eklenirken bolum bozulmaz.
   ============================================================ */

/* --- Ana sayfa kutucugu --- */
.partner-tile.has-logo {
	padding: 14px 16px;
}

.partner-logo {
	display: block;
	width: 100%;
	height: 56px;
	object-fit: contain;
	object-position: center;
	/* Renkli logolar arasinda gorsel butunluk: normalde hafif soluk,
	   uzerine gelince tam renk. Tek tip bir "logo duvari" hissi verir. */
	filter: grayscale(100%);
	opacity: .72;
	transition: filter .2s ease-out, opacity .2s ease-out;
}

.partner-tile:hover .partner-logo,
.partner-tile:focus-visible .partner-logo {
	filter: grayscale(0);
	opacity: 1;
}

/* --- /brands sayfasi karti --- */
.brand-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 46px;
	margin-bottom: 14px;
}

.brand-logo img {
	max-width: 150px;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 991px) {
	.partner-logo { height: 48px; }
}

@media (max-width: 575px) {
	.partner-logo { height: 42px; }
	.brand-logo { height: 40px; }
	.brand-logo img { max-height: 40px; max-width: 130px; }
}

/* Hareketi kisitlayan kullanicilar */
@media (prefers-reduced-motion: reduce) {
	.partner-logo { transition: none; }
}

/* ============================================================
   Brands & Partners — logosuz hal de "bitmis" gorunsun
   ------------------------------------------------------------
   Onceki hali 6 sutunlu, ortalanmis, kucuk kutucuklardi; logo
   gelmeden once bos logo yuvasi gibi duruyordu. Yeni hali bir
   MARKA DIZINI gibi okunur: daha genis kutu, sola hizali guclu
   isim, vurgu cizgisiyle ayrilmis kategori etiketi.

   Logo yuklendiginde kutu otomatik olarak ortalanmis logo
   moduna gecer (.has-logo) — iki hal de kasitli gorunur.
   ============================================================ */

.partner-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.partner-tile {
	/* Sola hizali dizin gorunumu — ortalanmis bosluk "eksik gorsel"
	   hissi veriyordu */
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	min-height: 96px;
	padding: 20px 20px 18px;
	text-align: left;
	/* Sol kenarda vurgu seridi: hover'da genisler */
	border-left: 3px solid #E2E6E9;
}

.partner-tile:hover {
	border-left-color: #0B4F8A;
}

.partner-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
}

/* Kategori etiketi: uzerinde kisa vurgu cizgisi */
.partner-cat {
	position: relative;
	margin-top: 10px;
	padding-top: 9px;
	font-size: 10px;
}

.partner-cat::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 2px;
	background: #0B4F8A;
	transition: width .22s cubic-bezier(.2,.8,.2,1);
}

.partner-tile:hover .partner-cat::before { width: 40px; }

/* --- Logo modu: kutu ortalanir, serit notr kalir --- */
.partner-tile.has-logo {
	align-items: center;
	justify-content: center;
	text-align: center;
	border-left-color: #E2E6E9;
	padding: 16px 18px;
}

.partner-tile.has-logo:hover {
	border-left-color: #0B4F8A;
}

@media (max-width: 991px) {
	.partner-grid { grid-template-columns: repeat(3, 1fr); }
	.partner-name { font-size: 17px; }
}

@media (max-width: 575px) {
	.partner-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.partner-tile { min-height: 84px; padding: 16px 14px 14px; }
	.partner-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.partner-cat::before { transition: none; }
}

/* ------------------------------------------------------------
   Logo duvari optik dengeleme
   Yuklenen logolarin dogal oranlari cok farkli:
     3M 1:1 (160x160), Apollo 6.4:1 (1280x201), Cromwell 3.2:1
   Sadece yukseklik sabitlenirse genis logolar kutunun tamamini
   kaplayip kare logolari eziyor. max-width ile genisligi de
   sinirlayinca gorsel agirliklar birbirine yaklasiyor.
   ------------------------------------------------------------ */
.partner-logo {
	height: 60px;
	max-width: 165px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 991px) {
	.partner-logo { height: 52px; max-width: 140px; }
}

@media (max-width: 575px) {
	.partner-logo { height: 44px; max-width: 120px; }
}

/* Ust seritteki e-posta/telefon artik <a> — lacivert zeminde beyaz kalmali.
   Tema global a rengi buraya sizarsa metin okunmaz olur (bkz. §15). */
.header-area .header-info a,
.header-area .header-info a span {
	color: inherit;
	text-decoration: none;
}

.header-area .header-info a:hover,
.header-area .header-info a:hover span,
.header-area .header-info a:focus-visible span {
	color: #4FC3F0;
}