/* css/pages/_home.css */

/* ========================================================================= */
/* TEMİZLENMİŞ VE BİRLEŞTİRİLMİŞ HERO BÖLÜMÜ (GÖRSEL ODAKLI) */
/* ========================================================================= */

/* Temel container */
.hero-section {
  color: var(--white-color, #ffffff);
  min-height: 100vh;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arka plan katmanı (background-image ile kullanılıyor) */
.hero-image-bg-layer,
.image-background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Eğer img ile kullanmak isterseniz (alternatif) */
.image-background-container img.hero-full-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay (koyu ton) */
.hero-overlay-dark,
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: -1;
}

/* İçerik kapsayıcısı */
.hero-content-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  padding: 2rem;
  box-sizing: border-box;
  text-align: left;
}

/* Metin bloğu (okunurluk için genişlik sınırı) */
.hero-text-block {
  max-width: 800px;
}

/* Overline başlık */
.hero-overline-title {
  font-size: 3rem;
line-height: 1.08;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}

/* Ana başlık */
.hero-main-heading {
  font-size: 3.5rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Açıklama metni */
.lead-text-light {
  font-size: 1.2rem;
  max-width: 90%;
  line-height: 1.6;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 992px) {
  .hero-section {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
  }
  .hero-main-heading {
    font-size: 2.8rem;
  }
  .hero-overline-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
  }
  .hero-content-wrapper {
    padding: 1.25rem;
    text-align: center;
  }
  .hero-text-block {
    max-width: 100%;
  }
  .hero-overline-title {
    font-size: 1.5rem;
  }
  .hero-main-heading {
    font-size: 2rem;
  }
  .lead-text-light {
    font-size: 1rem;
  }
}
/* Make hero text follow company-profile layout: constrained left-aligned block, h1 normal, paragraph italic */
.hero-section .hero-content-wrapper {
    /* match company-profile sizing and left alignment */
    position: relative;
    z-index: 10;
    max-width: 1200px;      /* aynı genişlik kısıtlaması */
    padding: 2rem;          /* içerik etrafı nefes alanı */
    box-sizing: border-box;
    text-align: left;       /* solda hizala (şirket profili gibi) */
    align-self: flex-start; /* hero içinde yukarı/sola doğru konumlandır */
    margin-left: 0;         /* container içinde sol hizalama */
    color: var(--white-color, #fff);
}

/* iç bloğun maksimum okunabilir genişliği (şirket profili ile aynı) */
.hero-section .hero-text-block {
    max-width: 800px; /* okunurluk için sınır */
}

/* Başlık düz (normal), italik kaldırıldı */
.hero-section .hero-content-wrapper h1,
.hero-section h1 {
    font-style: normal !important; /* düz yazı */
    font-weight: 700;               /* daha belirgin başlık */
    color: var(--light-color);      /* mevcut renk korunur */
    margin-top: 0;                  /* gerektiğinde üst boşluğu azalt */
}

/* Hero içindeki açıklama/paragraf italic yap */
.hero-section .hero-content-wrapper p,
.hero-section p {
   
    color: var(--white-color);
    margin-bottom: 1.25rem;
}

/* Override hero text colors with direct HEX (replace the HEX values as needed) */
.hero-section .hero-overline-title {
	/* ESENKIYI yazısı rengi - burayı istediğiniz HEX ile değiştirin */
	color: #cbdceb !important; /* <- change this HEX for ESENKIYI */
}

.hero-section .hero-main-heading {
	/* Başlık: "Denizcilikte Güvenin ve Tecrübenin Mimarisi" - burayı istediğiniz HEX ile değiştirin */
	color: #f2ece4 !important; /* <- change this HEX for the main heading */
    
}

.hero-section .lead-text-light {
	/* Açıklama/paragraf: italik metin rengi - burayı istediğiniz HEX ile değiştirin */
	color: #f2ece4 !important; /* <- change this HEX for the paragraph */
}

/* Mobilde tekrar ortala (daha iyi görünürlük için) */
@media (max-width: 768px) {
    .hero-section .hero-content-wrapper {
        text-align: center;
        padding: 1.25rem;
        align-self: center;
    }
    .hero-section .hero-text-block { max-width: 100%; }
    .hero-section .hero-content-wrapper h1 { font-size: 2.2rem; }
}

/* ========================================================================= */
/* ABOUT SECTION - YENİ TASARIM CSS'İ */
/* ========================================================================= */

/* Ayarlar (tek yerde tut) */
:root {
	--about-image-col-width: 420px;  /* görsel kolon genişliği (masaüstü) */
	--about-image-gap: 30px;         /* kolonlar arası boşluk */
	--about-image-width: 500px;      /* opsiyonel kesin görsel kutusu genişliği */
	--about-image-height: 420px;     /* opsiyonel kesin görsel kutusu yüksekliği */
}

/* About container */
.about-section {
	padding-top: 4rem;
	
}

/* Başlıklar */
.about-main-header { margin-bottom: 1.5rem; }
.about-main-header .main-title {
	font-size: 2.5rem;
	color: var(--primary-color, #003366);
	margin-bottom: 0.5rem;
}
.about-main-header .lead-slogan {
	font-size: 1.15rem;
	color: var(--text-color, #343a40);
	opacity: 0.8;
}

/* İçerik row: sabit görsel kolonu + esnek metin kolonu */
/* flex-wrap: wrap ile çok küçük ekranlarda alt alta düşmesini sağlıyoruz */
.about-content-row {
	display: flex;
	gap: var(--about-image-gap);
	align-items: flex-start;
	flex-wrap: wrap; /* küçük ekranlarda alt alta */
	box-sizing: border-box;
}

/* Görsel sütunu: sabit genişlik, küçülmeyi engelle */
.image-col {
	padding: 0;
	flex: 0 0 var(--about-image-col-width);
	max-width: var(--about-image-col-width);
	box-sizing: border-box;
	position: relative;
    margin-bottom: 90px;
 z-index: 1;
    text-align: center; /* Resmi ortala */
}

/* Metin sütunu: kalan alanı kullanır, taşmayı önlemek için min-width:0 */
.text-col {
	flex: 1 1 calc(100% - var(--about-image-col-width) - var(--about-image-gap));
	min-width: 0;
	box-sizing: border-box;
	z-index: 2;
    margin-bottom:150px;
    cursor: default !important;
}

/* Görsel: kutuyu doldursun, içeriğin üzerine çıkmasın; sabit kutu istenirse değişkenleri güncelle */
.about-image-item {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	/* Eğer sabit kutu isterseniz alt satırın yorumunu kaldırın: */
	/* width: var(--about-image-width) !important; */
	/* height: var(--about-image-height) !important; */
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	flex-shrink: 0;
	margin-bottom: 20px;
	box-sizing: border-box;
}

/* Alternatif: kesin kutu gerekiyorsa yüksek özgüllükli override (aktif etmek isterseniz kullanın)
.about-section .image-col .about-image-item {
	width: var(--about-image-width) !important;
	height: var(--about-image-height) !important;
}
*/

/* Responsive: küçük ekranlarda alt alta istifleme ve boyut ayarları */
@media (max-width: 900px) {
	:root { --about-image-col-width: 100%; }
	.about-content-row { flex-direction: column; }
	.image-col, .text-col { flex: 0 0 100%; max-width: 100%; }
	.image-col { order: 1; }
	.text-col { order: 2; }
	/* Mobilde görsel daha kısa istiyorsanız: */
	.about-image-item { height: auto; max-height: 260px; }
}

/* ========================================================================= */
/* DİĞER SECTION'LAR VE RESPONSIVE AYARLAR */
/* ========================================================================= */

/* Tüm Section'lara Genel Padding (Eski tanımınız korunur) */
main section {
    padding: 2rem 0;
    cursor: default !important;
}

/* Hakkımızda Bölümü */
.about-section .row {
    flex-direction: row; /* Varsayılan olarak yan yana olmalı */
    align-items: center;
}

/* Eskiden var olan .about-section img stili (Taşmayı önleyici olarak güçlü bir şekilde tekrar tanımlandı) */
.about-section img {
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    height: auto;
}


/* --- MOBİL UYUMLULUK --- */

@media (max-width: 768px) {
    /* Hero Section Mobil Düzenlemesi */
    .hero-section {
        min-height: 65vh; 
        padding: 30px 20px; /* mobilde daha küçük padding */
    }
    
    /* Hakkımızda/Görsel Bölümü Mobil Düzenlemesi */
    .about-content-row {
        flex-direction: column;
        gap: 30px; /* Boşluk azaltıldı */
    }
    
    .about-main-header {
        margin-bottom: 2rem;
    }
    
    .about-main-header .main-title {
        font-size: 2rem;
    }
    
    /* Eskiden var olan .about-section stili korunur */
    /* Mobilde metni üste taşı (reverse-mobile mantığı) */
    .about-section .row {
        flex-direction: column-reverse; 
    }
    
    /* Metin alanı */
    .text-col {
        padding: 0;
    }

    /* Görselin mobilde alt alta doğru hizalanması */
    .about-image-item {
        width: 100%;
    }
}

/* CONSOLIDATED: tek bir yerde about görsel ayarları (kopyaları kaldırılacak) */
:root {
	/* about/column sizing */
	--about-image-col-width: 420px; /* sabit görsel kolon genişliği */
	--about-image-gap: 30px;        /* kolonlar arası boşluk */

	/* kesin manuel kontrol için (masaüstü) */
	--about-image-width: 500px;   /* >= burada genişliği ayarla */
	--about-image-height: 420px;  /* >= burada yüksekliği ayarla */

	/* stats ile ilgili değişkenler korunuyorsa onları ayrı bırakabilirsiniz */
	--stats-visual-max-height: 360px;
	--stats-image-offset: 70px;
	--stats-offset: 20px;
}

/* OVERRIDE: Tek, kesin .about-image-item tanımı — diğer tüm tekrarları kaldırın */
.about-section .image-col .about-image-item {
	display: block !important;
	flex: 0 0 auto !important;            /* küçülmeyi engelle */
	width: var(--about-image-width) !important;
	max-width: none !important;           /* önceki max-width kısıtlarını kaldır */
	height: var(--about-image-height) !important;
	max-height: none !important;
	object-fit: cover !important;         /* kırpma ile kutuyu doldursun */
	border-radius: 8px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
	margin-left: 0 !important;
	margin-bottom: 20px !important;
	box-sizing: border-box !important;
}

/* ========================================================================= */
/* STATS SECTION (RAKAMLARLA BÖLÜMÜ) - MASTER CARD STİLİ */
/* ========================================================================= */

.stats-section {
    padding: 4rem 0;
}

/* Tek Kapsayıcı Kart (Master Card) */
.stats-master-card {
    background-color: var(--white-color, #ffffff);
    border-radius: 50px;
    box-shadow: 0 15px 40px rgba(0, 51, 102, 0.15); /* Derin kurumsal gölge */
    overflow: hidden; /* İçerik taşmasını engeller */
    
    /* İçerik Boşluğu */
    padding: 50px ;
    padding-left: 30px;
    padding-right: 30px;
}

/* Ana Başlık Boşluğu */
.about-main-header {
    margin-bottom: 2rem;
}

/* 1) Satır yüksekliğini eşitle ve sağ kolonu butonu alta itebilecek hale getir */
.stats-master-card .row {
    /* mevcut display/flex-wrap kuralınız korunuyorsa üzerine yaz */
    align-items: stretch; /* kolonların eşit yüksek olması için (görsel ile sağ kolonu eşitle) */
}

/* 2) Sağdaki ızgara kapsayıcısını sütun düzenine çevir, butonu alta sabitle */
.stats-grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* grid (üst) ve buton (alt) arasında boşluk bırakır */
    height: 100%;
    box-sizing: border-box;
}

/* Masaüstü: stats master kart içindeki row'u tek satır tut ve kolon genişliklerini belirle */
.stats-master-card .row {
    display: flex;        /* zorla flex (bootstrap .row zaten flex ama burada kesinleştiriyoruz) */
    flex-wrap: nowrap;    /* tek satır: görsel sol, içerikler sağda kalır */
    align-items: center;  /* dikey ortala (isteğe göre flex-start yapılabilir) */
}

/* Sol görsel sütunu: dar (%35) */
.stats-visual-col {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sağ istatistikler sütunu: geniş (%65) */
.stats-grid-wrapper {
    flex: 0 0 65%;
    max-width: 65%;
    padding: 30px 40px;
}

/* Görsel biraz daha küçük gösterilsin (masaüstü) */
.stats-master-image {
    max-width: 120%;  /* küçültülmüş oran */
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 40px;  /* İstatistik görselinin köşelerini hafifçe yuvarlar */
    margin-left: 100px;    /* Görseli soldan biraz uzaklaştırır, daha dengeli görünür */
}

/* Görsel kolonunu hizala ve görselin taşmasını engelle */
.stats-visual-col {
    /* kolon yüksekliğini ebeveyne bırak, içeriği ortala */
    display: flex;
    align-items: center;    /* dikey ortala */
    justify-content: center;/* yatay ortala */
    padding: 0 16px;
    box-sizing: border-box;
}

/* Görselin yüksekliğini sınırlayıp orantıyı koru.
   --stats-visual-max-height değerini değiştirerek, görselin yuvarlakların
   üst/alt hizasına gelmesini sağlayabilirsiniz. */
.stats-master-image {
    max-height: var(--stats-visual-max-height); /* kritik: burada değiştirin */
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-left: 0;
    display: block;
}

/* Eğer satır yüksekliği eşitlenmiş ise (align-items: stretch), bu ek ayar yardımcı olur */
.stats-master-card .row {
    align-items: center; /* görsel ile istatistik kolonunu dikeyde ortalar */
}

/* Mobilde görselin taşmasını engelle ve tam genişlik yap */

/* --- SAĞ KOLON: SAYAÇ GRİDİ --- */

.stats-grid {
    /* Sayaçların yerleştiği 2x2 ana satır */
    display: flex;       /* flex satırı */
    flex-wrap: wrap;     /* öğeler alt satıra geçsin */
    gap: 30px 20px;      /* Dikey 30px, Yatay 20px boşluk (korundu) */
    justify-content: flex-start;
    
}

/* Her sayaç öğesi masaüstünde %50 genişlik alır -> 2 sütun, 2 satır (2x2) */
.stats-item-col {
    padding: 0;          /* mevcut kural korunur */
    flex: 0 0 50%;       /* sabit %50 genişlik */
    max-width: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch; /* içeriğin yüksekliğini eşitleyerek düzen sağlar */
}

/* Stat öğelerinde ikon solda, sayı ve açıklama sağda (satır içi/yan yana düzen) */
.stat-inner-item {
    display: flex;               /* yatay düzen: ikon + içerik */
    align-items: center;         /* dikey ortala */
    gap: 1rem;                   /* ikon ile metin arası mesafe */
    padding: 12px 10px;
    text-align: left;            /* sağdaki metin sola dayalı */
}

/* Yuvarlak (ikon + sayı) daha büyük, içeriği dikey istif: ikon üstte, sayı altta */
.stat-icon-wrapper {
    /* boyutu büyüt */
    width: 110px;
    height: 110px;
    min-width: 110px;
    min-height: 110px;
    border-radius: 50%;
    background-color: var(--primary-color, #003366);
    color: #fff;
    display: flex;
    flex-direction: column; /* ikon üstte, sayı altta */
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* ikon yuvarlağın içinde biraz daha küçük gözüksün */
.stat-icon-wrapper .stat-icon {
    font-size: 1.5rem; 
    line-height: 1;
    cursor: default !important;
}

/* sayı yuvarlağın içinde belirgin olsun */
.stat-icon-wrapper .stat-number {
    /* Masaüstü: sayıyı daha büyük yap (önceki ~1.15rem idi) */
    font-size: 1.9rem;    /* artırıldı -> daha belirgin rakam */
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #fff;
}

/* Eğer JS veya başka kurallar .counter üzerine yazıyorsa, bunu da güçlü kıl */
.stat-icon-wrapper .counter {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    line-height: 1;
}

/* Mobilde biraz küçült ama hâlâ belirgin olsun */

/* Başlığı garanti merkezle (kart içinde) */
.stats-master-card .section-heading {
    text-align: center;
}

/* Responsive: mobilde yuvarlak küçülsün ve satır içi düzen bozulmasın */

/* ZORLA: stats-grid kesin 2x2 düzen (Bootstrap .row/.col-6 etkilerini geçersiz kıl) */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 sütun */
    gap: 24px 20px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* İçerideki .col-6 sınıfı Bootstrap tarafından genişlik/flex verir — burada iptal et */
.stats-grid > .col-6,
.stats-grid .col-6 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
}

/* Her sayaç öğesi grid hücresi gibi davranır */
.stats-item-col {
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

/* Mobilde tek sütuna düşür */

/* 1) Satır yüksekliğini eşitle ve sağ kolonu butonu alta itebilecek hale getir */
.stats-master-card .row {
    /* mevcut display/flex-wrap kuralınız korunuyorsa üzerine yaz */
    align-items: stretch; /* kolonların eşit yüksek olması için (görsel ile sağ kolonu eşitle) */
}

/* 2) Sağdaki ızgara kapsayıcısını sütun düzenine çevir, butonu alta sabitle */
.stats-grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* grid (üst) ve buton (alt) arasında boşluk bırakır */
    height: 100%;
    box-sizing: border-box;
}

/* Kart içindeki CTA: stats-grid'in hemen altında ortalanmış ve altta kalacak */
.cta-row {
    display: flex;
    justify-content: center; /* yatayda ortala */
    margin-top: 12px;        /* grid ile buton arası mesafe */
    width: 100%;
}

.stats-grid-wrapper .cta-button {
    align-self: center;      /* flex sütun içinde ortala (gerekirse) */
    /* isteğe bağlı: daha belirgin boşluk veya boyut ayarı */
    /* margin-bottom: 6px; */
}

/* Ayarlanabilir yatay kaydırma: pozitif değer sağa kaydırır (örn. 20px). 
   Düzenlemek için sadece --stats-offset değerini değiştir. */
:root {
	--stats-offset: 20px; /* => burayı değiştirerek sağa yaklaştır (örn: 30px / 10px / 0) */
}

/* Sağdaki yuvarlak + yazı grubunu sağa kaydır */
.stats-grid {
	/* ...mevcut grid kuralları korunur... */
	transform: translateX(var(--stats-offset));
	transition: transform 160ms ease; /* isteğe bağlı: yumuşak kayma */
}

/* Mobilde kaydırmayı kaldır (daha iyi okunurluk için) */

/* Stat açıklamalarının başına onay (tick) işareti ekle */
.stat-text p {
	/* ...existing rules... */
	position: relative; /* pseudo-element hizalaması için */
	padding-left: 0; /* işaret ve metin arası boşluk */
}
.stat-text p::before {
	content: none;
}

/* Mobilde boşluk koruma / işaret boyutunu küçültme */

/* stats-master-card içindeki başlık satırını flex ile yatayda ortala */
.stats-master-card .about-main-header {
	display: flex;             /* satırı flex yap */
	justify-content: center;   /* içeriği yatayda ortala */
	align-items: center;       /* dikey ortala */
}

/* Güçlü merkezleme (bazı eski kuralları geçersiz kılmak için) */
.stats-master-card .about-main-header .col-12,
.stats-master-card .section-heading {
	text-align: center !important;
}

/* Ayarlanabilir görsel yüksekliği: değeri artırarak görseli yuvarlakların yüksekliğine eşitleyin */
:root {
	--stats-visual-max-height: 360px; /* → burayı 320px, 380px, 420px vb. yaparak ince ayar yapın */
}

/* Görsel kolonunu hizala ve taşmayı engelle */
.stats-visual-col {
    display: flex;
    align-items: center;    /* dikey ortala */
    justify-content: center;/* yatay ortala */
    padding: 0 16px;
    box-sizing: border-box;
}

/* Görselin yüksekliğini sınırlayıp orantıyı koru.
   --stats-visual-max-height değerini değiştirerek, görselin yuvarlakların
   üst/alt hizasına gelmesini sağlayabilirsiniz. */
.stats-master-image {
    max-height: var(--stats-visual-max-height); /* kritik: burada değiştirin */
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-left: 0;
    display: block;
}

/* Eğer satır yüksekliği eşitlenmiş ise (align-items: stretch), bu ek ayar yardımcı olur */
.stats-master-card .row {
    align-items: center; /* görsel ile istatistik kolonunu dikeyde ortalar */
}

/* Mobilde görselin taşmasını engelle ve tam genişlik yap */

/* Ayarlanabilir görsel offset: sağa kaydırma için değeri artır (örn. 120px, 160px) */
:root {
	--stats-image-offset: 70px; /* => burayı değiştirerek görseli sağa taşı */
}

/* Sonradan gelen kuralın üzerine yazacak kesin kural */
.stats-master-image {
    width: 270px;
    height: 480px;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: block;
    margin-left: 0 !important;
}

/* Eğer görselin sütun içinde hep sola yaslı kalmasını istersen (margin ile oynamak yerine),
   aşağıdaki satırı kullanıp değeri kaldır: */
/*
.stats-visual-col { justify-content: flex-start; }
*/

/* Mobilde offset'i azalt */

/* Override: kesin .about-image-item boyutu - önceki kuralları geçersiz kılmak için yüksek özgüllük ve !important kullan */
:root {
	--about-image-width: 600px;   /* masaüstünde resim genişliğini buradan ayarla (örn: 420px / 360px / 50%) */
	--about-image-height: 500px;  /* masaüstünde resim yüksekliğini buradan ayarla (örn: 420px) */
}

/* Daha özgül seçici ile tüm önceki kuralları ezer; manuel değişiklikler için bu bloğu güncelle */
.about-section .image-col .about-image-item {
	display: block !important;
	flex: 0 0 auto !important;            /* küçülmeyi engelle */
	width: var(--about-image-width) !important;
	max-width: none !important;           /* önceki max-width kısıtlarını kaldır */
	height: var(--about-image-height) !important;
	max-height: none !important;
	object-fit: cover !important;         /* kırpma ile kutuyu doldursun */
	margin-left: 0 !important;            /* istenirse burada offset ver */
	box-sizing: border-box !important;
}

/* Mobilde daha küçük değerler uygula */
@media (max-width: 768px) {
	:root {
		--about-image-width: 100%;    /* mobilde tam genişlik */
		--about-image-height: 240px;  /* mobilde daha kısa yükseklik */
	}
	.about-section .image-col .about-image-item {
		width: var(--about-image-width) !important;
		height: var(--about-image-height) !important;
	}
}

/* İpucu (yorum): Eğer görselin kutusunu sabit tutup içeriği değiştirmek istersen,
   sadece --about-image-height ve --about-image-width değerlerini güncelle. */

/* ===== ABOUT: prevent overlap, force grid layout on desktop, allow wrapping on small screens ===== */

/* Desktop: iki sütunlu grid - sol sabit görsel sütunu, sağ esnek metin sütunu */
@media (min-width: 901px) {
	.about-content-row {
		display: grid !important;
		grid-template-columns: var(--about-image-col-width) 1fr !important;
		gap: var(--about-image-gap) !important;
		align-items: start;
		box-sizing: border-box;
	}

	/* görsel kolonu artık grid içinde davranır; flex kurallarını geçersiz kıl */
	.image-col {
		flex: 0 0 auto !important;
		max-width: none !important;
		width: auto !important;
	}

	/* metin kolonu gridin ikinci sütununu kullanır; kelime kaydırma ekle */
	.text-col {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
		white-space: normal;
	}

	/* görsel kutusunu sütun genişliğine göre tam doldur, sabit px width/height'leri zorla kaldır */
	.about-section .image-col .about-image-item {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: cover !important;
		box-sizing: border-box !important;
	}
}

/* Mobil / küçük ekran: alt alta istifleme (eski responsive davranışı koru) */
@media (max-width: 900px) {
	.about-content-row {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--about-image-gap) !important;
	}
	.image-col, .text-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.about-section .image-col .about-image-item {
		width: 100% !important;
		height: auto !important;
		max-height: 260px;
	}
}

/* ===== end about overrides ===== */

/* Make index hero (the ESENKIYI one) position like the "BİZ KİMİZ?" company-profile hero */
.hero-section.about-hero .hero-content-wrapper {
    /* align like company-profile: left-aligned block, pushed down from top */
    text-align: left !important;
    align-self: flex-start !important;
    max-width: 1200px;
    padding: 2rem;
    box-sizing: border-box;

    /* Dikey ofset: blok daha aşağı/üst taşınsın istiyorsanız buradaki değeri değiştirin.
       Öneri: doğrudan margin değeri yerine --hero-top-offset değişkenini kullanın. */
    margin: 180px auto 0 auto; /* <- burayı değiştirmek yazıyı aşağı/üst taşır */
    /* Alternatif olarak doğrudan: margin: 140px auto 0 auto; şeklinde değiştirin */

    /* Yatay içerik içi kaydırma: metni iç konteyner içinde sola/sağa taşımak için değiştirin */
    padding-left: 1.8rem; /* <- burayı artır/s azaltarak sola/haydaze hareket ettirebilirsiniz */
}

/* iç metin bloğunun şirket profili ile aynı şekilde dar tutulmasını sağla */
.hero-section.about-hero .hero-text-block {
    max-width: 800px;
}

/* başlık ve diğer metinlerin z-index ve konum ayarları */
.hero-section.about-hero .hero-overline-title
{
    position: relative;
    z-index: 12;
    cursor: default !important;
    top:3rem !important;
    font-size: 3rem   !important;
}
.hero-section.about-hero .hero-main-heading
{
    position: relative;
    z-index: 12;
    cursor: default !important;
    top:3rem !important;
}
.hero-section.about-hero .lead-text-light {
    position: relative;
    z-index: 12;
    cursor: default !important;
    top:3rem !important;
    font-size: 1.2rem !important;
}

/* Mobil: küçük ekranlarda ortala ve üst boşluğu azalt */
@media (max-width: 768px) {
    .hero-section.about-hero .hero-content-wrapper {
        text-align: center !important;
        margin: 6vh auto 0 auto; /* mobilde daha küçük üst boşluk */
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .hero-section.about-hero .hero-text-block { max-width: 100%; }
}

/* EŞİT BAŞLIK BOYUTU VE BOŞLUKLARI */
/* "ESENKIYI" ve "Denizcilikte Güvenin ve Tecrübenin Mimarisi" başlıklarını eşit boyutta göster */
.hero-section .hero-overline-title {
    font-size: 3rem;      /* Başlık boyutu (her iki başlık için aynı yapıldı) */
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.6rem; /* alt boşluk */
    text-transform: uppercase;
}

/* Ana başlık aynı boyutta, fakat italic korunur */
.hero-section .hero-main-heading {
    font-size: 3rem;      /* Aynı boyut */
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.9rem; /* küçük farkla okunurluğu koru */
    font-style: italic !important; /* italik kalması istendiği için zorla uygula */
}

/* Mobilde oranları küçült */
@media (max-width: 768px) {
    .hero-section .hero-overline-title,
    .hero-section .hero-main-heading {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;

    }
}

/* Küçültülmüş kart boyutları (ESENKIYI listeleri için) */
.bg-light .card,
.bg-secondary .card {
    max-width: 320px;           /* kart genişliğini sınırla */
    margin: 0 auto;             /* sütunda ortala */
    padding: 16px 18px;         /* iç boşluğu küçült */
    border-radius: 12px;        /* köşe yuvarlama */
    box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* hafif gölge */
    text-align: center;         /* ikon+başlık+metin ortalı */
}

/* Kart içeriği: başlık ve paragraf daha küçük ve sıkı */
.bg-light .card h3,
.bg-secondary .card h3,
.card h3 {
    font-size: 1.05rem;         /* daha küçük başlık */
    margin: 0.5rem 0 0.6rem 0;
    line-height: 1.15;
}

.bg-light .card p,
.bg-secondary .card p,
.card p {
    font-size: 0.95rem;         /* daha küçük paragraf */
    margin: 0 0 0.6rem 0;
    line-height: 1.4;
    cursor: default !important;
}

/* Kart ikonunu küçült ve boşluğu ayarla */
.card .card-icon {
    font-size: 1.6rem;          /* daha küçük ikon */
    margin-bottom: 0.5rem;
    color: var(--primary-color, #3c467b);
}

/* Mobilde daha kompakt görünüm */
@media (max-width: 768px) {
    .bg-light .card,
    .bg-secondary .card {
        max-width: 100%;
        padding: 12px 14px;
    }
    .card .card-icon { font-size: 1.3rem; }
    .card h3 { font-size: 1rem; }
    .card p { font-size: 0.95rem; }
}

/* Başlıkları buton görünümüne getir (hover efekti yok) */
.btn-title {
	display: inline-block;
	background-color: #3c467b;        /* Hizmetlerimizi Keşfedin butonuna yakın renk */
	color: #ffffff;                  /* metin beyaz */
	padding: 0.6rem 1.1rem;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	border: none;
	box-shadow: none;
	cursor: default;                 /* hover imlecini göstermesin */
	/* hover veya focus için ekstra stil tanımlamayın (bilerek yok) */
}

/* --------------------------------------------------
   ÖZEL: Ana sayfadaki buton-görünümlü başlık ayarları
   - Denizlerin Güvenilir Römorkör Hizmetleri (h1 .main-title.btn-title)
   - ESENKIYI Rakamlarla (h2 .section-heading.btn-title)
   Bu kurallar mevcut .btn-title stilini korur, sadece boyutu büyütür ve ortalar.
   -------------------------------------------------- */

/* Denizlerin Güvenilir Römorkör Hizmetleri: ortala ve büyüt */
.main-title.btn-title {
	/* Türkçe yorum: Başlığı buton gibi göster, ortala ve daha büyük yap. */
	display: inline-block;         /* blok içi-butona dönüştür */
	margin: 0 auto 1rem;        /* ortala (üst 0, alt 1.25rem) */
	margin-left: 200px;   
    margin-top:100px;      /* metin ortala */
	font-size: 2.2rem;             /* masaüstü daha büyük (isteğe göre ayarlayın) */
	padding: 0.75rem 1.6rem;       /* buton görünümlü dolgu */
	border-radius: 50px;          
	/* hover olmamasını garanti et (btn-title zaten hover eklemiyor ama güvenlik için) */
	cursor: default;
}

/* ESENKIYI Rakamlarla ve benzeri .section-heading.btn-title için büyütme ve ortalama */
.section-heading.btn-title,
.btn-title.section-heading {
	/* Türkçe yorum: Rakamlar başlığını buton gibi göster ve büyüt */
	display: inline-block;
	margin: 0 auto 1rem;
	text-align: center;
	font-size: 1.8rem;             /* başlık için yeterli büyüklük */
	padding: 0.6rem 1.4rem;
	border-radius: 50px;
	cursor: default;
}

/* Mobil uyumluluk: daha küçük ekranlarda fontları biraz küçült */
@media (max-width: 768px) {
	.main-title.btn-title {
		font-size: 1.25rem;
		padding: 0.45rem 0.9rem;
	}
	.section-heading.btn-title {
		font-size: 1.05rem;
		padding: 0.4rem 0.8rem;
	}
}

/* Ayarlanabilir bölüm dikey boşluğu: buradaki değeri değiştirerek
   .bg-light.bg-section ve .bg-secondary.bg-section yüksekliğini artırabilirsiniz. */
:root {
	--section-vertical-padding: 4rem; /* <-- bu değeri artırın (ör: 5rem / 6rem / 8rem) */
}

/* Uygulama: ilgili section'ların üst/alt padding'ini değişkenle ayarla */
.bg-light.bg-section,
.bg-secondary.bg-section {
	padding-top: var(--section-vertical-padding);    /* üst boşluk - burayı değiştirin */
	padding-bottom: 1.7rem; /* alt  boşluk - burayı değiştirin */
}

/* Alternatif: sabit yükseklik (eğer padding yeterli değilse),
   yorum satırını kaldırıp istediğiniz min-height değerini kullanın. */
/*
.bg-light.bg-section,
.bg-secondary.bg-section {
	min-height: 60vh;  /* <-- örnek: ekranın %60'ı kadar yüksek olsun (değiştirin) */


/* Ayarlanabilir about-section alt boşluğu (burayı değiştirebilirsiniz) */
:root {
	--about-section-bottom-padding: 3rem; /* <- bu değeri değiştirin (örn. 1rem / 1.5rem / 3rem) */
}

/* Hedef: sadece about-section olan .bg-section'ların alt boşluğunu kontrol et */
.about-section.bg-section {
	/* üst boşluk mevcut kuralları korur; sadece alt boşluğu buradan ayarlayın */
	padding-bottom: var(--about-section-bottom-padding);
}

/* Kategori: section'ları ayıran ince çizgiyi kaldırmak için override
   - Eğer çizgi border-top/bottom kaynaklıysa border: none; ile kaldırılır.
   - Eğer çizgi gölge (box-shadow) kaynaklıysa box-shadow: none; ile kaldırılır.
   - Eğer sayfada <hr> kullanıldıysa onu gizleyebilirsiniz (açıkça isterseniz kapatın).
   Değiştirmek isterseniz aşağıdaki satırların değerini düzenleyin. */

.bg-section,
.bg-section + .bg-section {
    border-top: none !important;    /* <- border-top çizgisi varsa burayı değiştirin */
    border-bottom: none !important; /* <- gerekirse alt border kaldır */
    box-shadow: none !important;    /* <- gölge tarzı çizgi varsa burayı değiştirin */
    background-clip: padding-box !important; /* kenar çizgisi/çoklu arkaplanlarda yardımcı */
}

/* Eğer sayfada <hr> etiketleri kullanılarak çizgi eklenmişse (ve bunu gizlemek isterseniz): */
hr {
    display: none !important; /* <- hr kullanımı varsa kaldırır; istemezseniz bu satırı silin */
}

/* Alternatif hedefleme: Sadece about-section çizgisini kaldırmak isterseniz:
.about-section.bg-section { border-top: none !important; box-shadow: none !important; }
*/

/* Stat metinlerinin soluna görsel ikon ekleme: hizalama ve boyut ayarları */
.stat-text {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0rem;       /* ikon ile metin arası boşluk azaltıldı */
    padding-left: 0;    /* eskiden kullanılan pseudo-element padding'ini iptal et */
    margin: 0;
    white-space: nowrap; /* İçeriğin tek satırda kalmasını sağlar */
    overflow: hidden;    /* Taşan içeriği gizler */
    text-overflow: ellipsis; /* Taşan içeriğe üç nokta ekler */
}

/* Gerçek görsel ikon (solda) */
.stat-text .stat-icon-img {
    width: 24px;
    height: auto;
    object-fit: contain;
    display: inline-block;
    margin-right: 8px;
}

/* Paragrafın varsayılan margin'ini temizle ve metin boyutunu koru */
.stat-text p {
    margin: 0;
    font-size: 1.1rem; /* Yazı boyutu büyütüldü */
    line-height: 1.2;
}

/* Eğer önceki pseudo-element tanımları varsa bunları iptal et */
.stat-text p::before { content: none !important; }

/* Küçük ekran: ikonları biraz küçült */

/* Küçük düzen: başlık ile alt içerik arasındaki boşluğu azalt */
/* - .main-title.btn-title: alt margin küçültüldü
   - .about-content-row: üst margin sıfırlandı (HTML'deki <br><br> etkisini nötrler)
   Yorum: margin değerleri ile oynayarak ince ayar yapabilirsiniz. */
.main-title.btn-title {
    margin-top: 100px;    /* başlığı biraz aşağı bırak (isteğe göre azalt/çoğalt) */
    margin-bottom: 2rem; /* alt boşluğu küçültüldü */
    margin-left: 200px;
    text-align: center;
}

/* Eğer HTML içinde <br><br> varsa bunların yarattığı ekstra boşluğu iptal et */
.about-section .container > br,
.about-section .container > br + br {
    display: none !important;
}

/* about-content-row'u başlığa daha yakın yap (negatif üst boşluk azaltıldı/iptal) */
.about-content-row {
    margin-top: 0 !important; /* önceki negatif/pozitif değerleri iptal et */
    align-items: center;
    gap: var(--about-image-gap);
    box-sizing: border-box;
}

/* Mobilde başlığın ve içeriğin aralığını koru */
@media (max-width: 900px) {
    .main-title.btn-title {
        margin-top: 30px;
        margin-bottom: 0.75rem;
        font-size: 1.6rem;
    }
    .about-content-row { margin-top: 0; }
}

/* ========================================================================= */
/* MOBİL UYUMLULUK (RESPONSIVE) - INDEX.HTML İÇİN ÖZEL KURALLAR               */
/* ========================================================================= */

/* ========================================================================= */
/* MOBİL UYUMLULUK - GÜÇLÜ VERSİYON (!important ile)                        */
/* Bu kodu home.css dosyanızın EN SONUNA ekleyin                            */
/* ========================================================================= */

/* MOBILE RESPONSIVE START */
/* ===== MOBİL: 768px ve ALTI ===== */
@media screen and (max-width: 768px) {
    
    /* ===== GENEL DÜZENLEMELER ===== */
    
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
    
    body {
        padding-top: 0 !important; /* Mobil hero görselinin en üstte başlaması için kaldırıldı */
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
    }
    
    /* Tüm section'lar */
    section {
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .bg-section {
        padding: 0 !important;
    }
    
    
    /* ===== HERO BÖLÜMÜ ===== */
    
    .hero-section,
    .hero-section.about-hero {
        /* Mobil hero görselinin menü arkasında kalması için min-height ve height değerleri ayarlandı */
        min-height: 50vh !important;
        height: 50vh !important;
        padding: 0 !important; /* Tüm paddingleri kaldır */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .hero-content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        text-align: center !important;
        margin: auto !important; /* Metni dikey ve yatayda ortala */
        padding-top: 0 !important; /* Üst padding'i sıfırla */
        padding-bottom: 0 !important; /* Alt padding'i sıfırla */
    }
    
    .hero-text-block {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* ESENKIYI başlığı */
    .hero-overline-title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
    
    /* Ana başlık */
    .hero-main-heading {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
    
    /* Açıklama */
    .lead-text-light {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        text-align: center !important;
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
        top: 0 !important; /* Metni en üste hizala */
    }
    
    
    /* ===== HAKKIMIZDA BÖLÜMÜ ===== */
    
    .about-section .bg-section {
        padding: 2rem 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Başlık buton */
    .main-title.btn-title {
        display:none !important;
    }
    
    /* BR etiketlerini gizle */
    .about-section br {
        display: none !important;
    }
    
    /* Row düzeni */
    .about-content-row {
        display: flex !important;
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 1.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Kolonlar */
    .about-section .row > div,
    .about-section .col-md-6,
    .about-section .image-col,
    .about-section .text-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Görsel */
    .about-section img,
    .about-section .about-image-item {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        max-height: 200px !important;
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Metin alanı */
    .about-text-wrapper {
        padding: 0 !important;
        text-align: center !important;
    }
    
    .about-section .section-heading {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        margin-top:1rem !important;
    }
    
    .about-section p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    /* Buton */
    .about-section .btn,
    .about-section .cta-button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.8rem !important;
        font-size: 0.95rem !important;
        text-align: center !important;
        display: block !important;
        margin: 1rem 0 0 0 !important;
    }
    
    
    /* ===== HİZMETLER (3 KART) ===== */
    
    .bg-light .row,
    .bg-secondary .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .bg-light .col-3,
    .bg-light .col-4,
    .bg-secondary .col-3,
    .bg-secondary .col-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .card-icon {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .card h3 {
        font-size: 1rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .card p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    /* Bölüm başlıkları */
    h2.btn-title,
    .btn-title {
        font-size: 1.2rem !important; /* Daha küçük font boyutu */
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 1.5rem !important;
        margin-top: 1rem;
        display: inline-block !important;
    }
    
    
}

/* --- SAĞ KOLON: SAYAÇ GRİDİ --- */

.stats-grid {
    /* Sayaçların yerleştiği 2x2 ana satır */
    display: flex;       /* flex satırı */
    flex-wrap: wrap;     /* öğeler alt satıra geçsin */
    gap: 30px 20px;      /* Dikey 30px, Yatay 20px boşluk (korundu) */
    justify-content: flex-start;
    
}

/* Her sayaç öğesi masaüstünde %50 genişlik alır -> 2 sütun, 2 satır (2x2) */
.stats-item-col {
    padding: 0;          /* mevcut kural korunur */
    flex: 0 0 50%;       /* sabit %50 genişlik */
    max-width: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch; /* içeriğin yüksekliğini eşitleyerek düzen sağlar */
}

/* Stat öğelerinde ikon solda, sayı ve açıklama sağda (satır içi/yan yana düzen) */
.stat-inner-item {
    display: flex;               /* yatay düzen: ikon + içerik */
    align-items: center;         /* dikey ortala */
    gap: 1rem;                   /* ikon ile metin arası mesafe */
    padding: 12px 10px;
    text-align: left;            /* sağdaki metin sola dayalı */
}

/* Yuvarlak (ikon + sayı) daha büyük, içeriği dikey istif: ikon üstte, sayı altta */
.stat-icon-wrapper {
    /* boyutu büyüt */
    width: 110px;
    height: 110px;
    min-width: 90px;
    min-height: 90px;
    border-radius: 50%;
    background-color: var(--primary-color, #003366);
    color: #fff;
    display: flex;
    flex-direction: column; /* ikon üstte, sayı altta */
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* ikon yuvarlağın içinde biraz daha küçük gözüksün */
.stat-icon-wrapper .stat-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* sayı yuvarlağın içinde belirgin olsun */
.stat-icon-wrapper .stat-number {
    /* Masaüstü: sayıyı daha büyük yap (önceki ~1.15rem idi) */
    font-size: 1.9rem;    /* artırıldı -> daha belirgin rakam */
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #fff;
    cursor: default !important;
}

/* Eğer JS veya başka kurallar .counter üzerine yazıyorsa, bunu da güçlü kıl */
.stat-icon-wrapper .counter {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    line-height: 1;
    cursor: default !important;
}

/* Mobilde biraz küçült ama hâlâ belirgin olsun */

/* Başlığı garanti merkezle (kart içinde) */
.stats-master-card .section-heading {
    text-align: center;
}

/* Responsive: mobilde yuvarlak küçülsün ve satır içi düzen bozulmasın */

/* ZORLA: stats-grid kesin 2x2 düzen (Bootstrap .row/.col-6 etkilerini geçersiz kıl) */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 sütun */
    gap: 24px 20px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* İçerideki .col-6 sınıfı Bootstrap tarafından genişlik/flex verir — burada iptal et */
.stats-grid > .col-6,
.stats-grid .col-6 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
}

/* Her sayaç öğesi grid hücresi gibi davranır */
.stats-item-col {
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

/* Mobilde tek sütuna düşür */

/* 1) Satır yüksekliğini eşitle ve sağ kolonu butonu alta itebilecek hale getir */
.stats-master-card .row {
    /* mevcut display/flex-wrap kuralınız korunuyorsa üzerine yaz */
    align-items: stretch; /* kolonların eşit yüksek olması için (görsel ile sağ kolonu eşitle) */
}

/* 2) Sağdaki ızgara kapsayıcısını sütun düzenine çevir, butonu alta sabitle */
.stats-grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* grid (üst) ve buton (alt) arasında boşluk bırakır */
    height: 100%;
    box-sizing: border-box;
}

/* Kart içindeki CTA: stats-grid'in hemen altında ortalanmış ve altta kalacak */
.cta-row {
    display: flex;
    justify-content: center; /* yatayda ortala */
    margin-top: 12px;        /* grid ile buton arası mesafe */
    width: 100%;
}

.stats-grid-wrapper .cta-button {
    align-self: center;      /* flex sütun içinde ortala (gerekirse) */
    /* isteğe bağlı: daha belirgin boşluk veya boyut ayarı */
    /* margin-bottom: 6px; */
}

/* Ayarlanabilir yatay kaydırma: pozitif değer sağa kaydırır (örn. 20px).
   Düzenlemek için sadece --stats-offset değerini değiştir. */
:root {
 --stats-offset: 20px; /* => burayı değiştirerek sağa yaklaştır (örn: 30px / 10px / 0) */
}

/* Sağdaki yuvarlak + yazı grubunu sağa kaydır */
.stats-grid {
 /* ...mevcut grid kuralları korunur... */
 transform: translateX(var(--stats-offset));
 transition: transform 160ms ease; /* isteğe bağlı: yumuşak kayma */
}

/* Mobilde kaydırmayı kaldır (daha iyi okunurluk için) */

/* Stat açıklamalarının başına onay (tick) işareti ekle */
.stat-text p {
 /* ...existing rules... */
 position: relative; /* pseudo-element hizalaması için */
 padding-left: 30px; /* işaret ve metin arası boşluk */
 cursor: default !important;
}
.stat-text p::before {
 content: "✔";                 /* onay işareti (isteğe göre "✓" veya font-icon kullanılabilir) */
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 color: var(--tick-color); /* eskiden #28a745 idi -> şimdi değişkenden okunur */
 font-weight: 700;
 font-size: 1.05rem;           /* işaret boyutu */
 line-height: 1;
 /* erişilebilirlik notu: pseudo-elementler aria ile okunmaz; eğer ekran okuyucu gerekliyse HTML içine ekleyin */
}

/* Mobilde boşluk koruma / işaret boyutunu küçültme */

/* stats-master-card içindeki başlık satırını flex ile yatayda ortala */
.stats-master-card .about-main-header {
 display: flex;             /* satırı flex yap */
 justify-content: center;   /* içeriği yatayda ortala */
 align-items: center;       /* dikey ortala */
}

/* Güçlü merkezleme (bazı eski kuralları geçersiz kılmak için) */
.stats-master-card .about-main-header .col-12,
.stats-master-card .section-heading {
 text-align: center !important;
}

/* Ayarlanabilir görsel yüksekliği: değeri artırarak görseli yuvarlakların yüksekliğine eşitleyin */
:root {
 --stats-visual-max-height: 360px; /* → burayı 320px, 380px, 420px vb. yaparak ince ayar yapın */
}

/* Görsel kolonunu hizala ve taşmayı engelle */
.stats-visual-col {
    display: flex;
    align-items: center;    /* dikey ortala */
    justify-content: center;/* yatay ortala */
    padding: 0 16px;
    box-sizing: border-box;
}

/* Görselin yüksekliğini sınırlayıp orantıyı koru.
   --stats-visual-max-height değerini değiştirerek, görselin yuvarlakların
   üst/alt hizasına gelmesini sağlayabilirsiniz. */
.stats-master-image {
    max-height: var(--stats-visual-max-height); /* kritik: burada değiştirin */
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-left: 0;
    display: block;
}

/* Eğer satır yüksekliği eşitlenmiş ise (align-items: stretch), bu ek ayar yardımcı olur */
.stats-master-card .row {
    align-items: center; /* görsel ile istatistik kolonunu dikeyde ortalar */
}

/* Mobilde görselin taşmasını engelle ve tam genişlik yap */

/* Ayarlanabilir görsel offset: sağa kaydırma için değeri artır (örn. 120px, 160px) */
:root {
 --stats-image-offset: 70px; /* => burayı değiştirerek görseli sağa taşı */
}

/* Sonradan gelen kuralın üzerine yazacak kesin kural */
.stats-master-image {
    /* ...mevcut kurallarınızı koruyun... */
    max-height: var(--stats-visual-max-height);
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: block;

    /* KRİTİK: burada değişken ile margin-left uygula; önceki margin-left:0'i geçersiz kılar */
    margin-left: var(--stats-image-offset) !important;
}

/* Eğer görselin sütun içinde hep sola yaslı kalmasını istersen (margin ile oynamak yerine),
   aşağıdaki satırı kullanıp değeri kaldır: */
/*
.stats-visual-col { justify-content: flex-start; }
*/

/* Mobilde offset'i azalt */
/* ===== ÇOK KÜÇÜK EKRANLAR: 480px ve altı ===== */
@media screen and (max-width: 480px) {
    
    .hero-main-heading {
        font-size: 1.3rem !important;
    }
    
   
    
}
/* MOBILE RESPONSIVE END */

@media screen and (max-width: 768px) {
    /* Footer'ı saran section için özel kurallar */
    body > section:last-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* main etiketinin alt boşluğunu sıfırla */
    main {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    /* Footer'ı saran section için özel kurallar */
    body > section:last-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* main etiketinin alt boşluğunu sıfırla */
    main {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Sadece Mobil Görünüm (max-width: 767.98px) - YENİ TASARIM */
@media (max-width: 767.98px) {

    /* Ana kart: Arka plan resmini alır ve tam ekran kaplar */
    .stats-master-card {
        position: relative;
        padding: 0;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        background-image: url(../../images/mobilesenkıyırakamlarla.png);
        background-size: cover;
        background-position: center;
        margin: 2rem 0;
        height: 85vh;
        min-height: 400px;
        overflow: hidden;
    }

    /* Masaüstü için olan başlığı gizle */
    .stats-section .about-main-header {
        display: none !important;
    }

    /* Masaüstü resim kolonunu tamamen gizle */
    .stats-visual-col {
        display: none !important;
    }

    /* İstatistikler ve butonu içeren sarmalayıcıyı tam karta yay */
    .stats-grid-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        padding: 10px 10px; /* Üst ve yan boşluklar ayarlandı */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* İçeriği dikeyde yayar (yuvarlaklar üstte, buton altta) */
    }

    /* İstatistik listesi (konumlandırma için kapsayıcı) */
    .stats-grid {
        position: relative;
        width: 100%;
        height: 100%; /* Buton için altta boşluk bırakır, yüksekliği ayarlayabilirsiniz */
    }

    .stats-item-col {
        position: absolute; /* Her bir yuvarlağı serbestçe konumlandırmak için */
        width: auto;
        padding: 0;
    }

    /* --- YUVARLAKLARI KONUMLANDIRMA --- */
    /* Aşağıdaki top, left, right değerlerini yüzde (%) olarak değiştirerek
       her bir yuvarlağı görsel üzerinde istediğiniz yere taşıyabilirsiniz. */

    /* 1. Yuvarlak (25+) */
    .stats-item-col:nth-child(1) {
        top: 10%;  /* Yukarıdan uzaklık */
        left: 5%; /* Soldan uzaklık */
    }

    /* 2. Yuvarlak (450+) */
    .stats-item-col:nth-child(2) {
        top: 30%;   /* Yukarıdan uzaklık */
        left: 5%; /* Soldan uzaklık */
    }

    /* 3. Yuvarlak (10+) */
    .stats-item-col:nth-child(3) {
        top: 50%;  /* Yukarıdan uzaklık */
        left: 5%; /* Soldan uzaklık */
    }

    /* 4. Yuvarlak (100%) */
    .stats-item-col:nth-child(4) {
        top: 70%;   /* Yukarıdan uzaklık */
        left: 5%; /* Soldan uzaklık */
    }

    /* Tek bir istatistik öğesi */
    .stat-inner-item {
        display: flex;
        align-items: center;
        gap: 10px; /* Yuvarlak ile yazı arası boşluk */
    }

    /* Yuvarlak sayı kısmı */
    .stat-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(25, 34, 59, 0.75);
        flex-shrink: 0;
        z-index: 2;
        border: none; /* Çizgileri kaldırmak için */
        outline: none; /* Çizgileri kaldırmak için */
    }
    
    .stat-number {
        color: white;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .stat-suffix {
        display: none;
    }

    /* Ok ikonu (mobil görünümde kaldırıldı) */
    .stat-number::after {
        display: none;
    }
    
    /* Yazı kısmı (mobil görünümde buton olarak stilize edildi) */
    .stat-text {
        display: flex; /* Flexbox ile hizalama */
        align-items: center; /* Dikeyde ortala */
        gap: 8px; /* İkon ve metin arası boşluk */
        background-color: rgba(25, 34, 59, 0.9); /* Koyu mavi, yarı saydam */
        color: #ffffff;
        padding: 8px 15px;
        border-radius: 25px; /* Yuvarlak köşeler */
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-width: 180px; /* Butonun çok genişlemesini engelle */
        min-width: 150px;
    }

    .stat-text .stat-icon-img {
        display: inline-block; /* İkonu görünür yap */
        width: 16px; /* İkon boyutu */
        height: auto;
        flex-shrink: 0; /* İkonun küçülmesini engelle */
    }

    .stat-text p {
        margin: 0;
        line-height: 1.2;
        font-size: 0.85rem; /* Yazı küçültüldü */
        white-space: normal;
    }

    /* Buton (altta kalacak) */
    .stats-section .cta-row {
        display: flex !important;
        justify-content: center;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .stats-section .cta-row .btn {
        width: 100%;
        max-width: 400px;
    }
}