/* css/pages/_romorkorculuk.css */

/* ========================================================================= */
/* HERO BÖLÜMÜ (ANASAYFA İLE AYNI) */
/* ========================================================================= */

/* 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;
  color:#3c467b;
}

/* 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; }
}

/* 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:1rem !important;
    font-size: 3rem   !important;
}
.hero-section.about-hero .hero-main-heading
{
    position: relative;
    z-index: 12;
    cursor: default !important;
    top:1.1rem  !important;
    font-size: 3rem !important;
}
.hero-section.about-hero .lead-text-light {
    position: relative;
    z-index: 12;
    cursor: default !important;
    top:1.2rem !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 {
         min-height: 50vh !important;
        height: 50vh !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .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.8rem; /* mobil uyum */
        line-height: 1.05;
    }
}

/* =========================================== */
/* İKİ SECTION ARASINDA KESİNTİSİZ ARKAPLAN */
/* =========================================== */

.full-bg-wrapper {
    position: relative; /* İçindeki elemanlar için konumlandırma bağlamı oluştur */
    overflow: hidden; /* Dışarı taşan kısmı gizle */
    z-index: 1; /* Diğer elemanların üzerinde olmasını garantile */
}

.full-bg-wrapper::before {
    content: "";
    position: absolute;   /* was fixed -> now absolute so it scrolls with the wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;         /* fills the wrapper's height; when wrapper scrolls out, image goes away */

    background-image: url('../../images/cizgi.jpg'); /* existing image path (adjust if needed) */
    background-size: cover;
    background-repeat: no-repeat;
    /* remove background-attachment: fixed; so image scrolls with content */
    background-position: center center;

    z-index: -1; /* sit behind wrapper content but above page background */
    pointer-events: none; /* ensure it doesn't block interactions */
}

/* Önemli Not: Arka planı sabitlerken, içeriklerin (özellikle ilk section'daki) görünürlüğünü sağlamalıyız. */
/* Eğer ilk section'daki karartma katmanınız varsa (hero-overlay), bu zaten işinizi görecektir. */
/* Eğer karartma katmanı yoksa, içeriklerin arka planı şeffaf olmalıdır. */


/* Ek ayar: İçeriklerin arka planının şeffaf olduğundan emin olun. */
.content-background-wrapper .bg-section {
    background-color: transparent !important;
    cursor: default !important;
    /* Bu, sarmalayıcı içindeki tüm bölümlerin arka planını şeffaf yapar. */
}
/* =========================================== */
/* 2. OPERASYONEL MÜKEMMELLİK (Resim/Metin) */
/* =========================================== */
.excellence-section .row {
    align-items: center;
    cursor: default !important;
}

.excellence-img-col {
    position: relative;
    padding: 2rem;
}

.excellence-img-col img {
    width: 85%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Tecrübe Rozeti */
.experience-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1rem 1.5rem;
    border-radius:20px;
    color: var(--primary-color);
    text-align: center;
    line-height: 1.2;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.experience-badge strong {
    font-size: 1.8rem;
    display: block;
}
.excellence-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem; /* başlık, paragraflar ve buton arasındaki artırılmış eşit boşluk */
    align-items: flex-start;
    box-sizing: border-box;
}

/* Butonu daha aşağıya it: ekstra üst boşluk ver */
.excellence-text-col .btn {
    margin-top: 0.1rem; /* buton daha aşağıda görünsün */
    align-self: flex-start;
}

.excellence-text-col {
    padding-left: 3rem;
    padding-top: 5rem;
}

/* Küçük ekranlarda metin akışını bozmayacak şekilde ayar */
@media (max-width: 768px) {
	.excellence-text-col {
		padding-left: 0;
		align-items: stretch;
		justify-content: flex-start; /* mobilde üstten akış korunsun */
	}
}

/* =========================================== */
/* 3. HİZMET KARTLARI (4'lü Grid) */
/* =========================================== */
.services-section h2 {
    margin-bottom: 5rem;
    margin-top:5rem;
}

/* English page title position fix */
:lang(en) .services-section {
    padding-top: 8rem;
}

.services-grid {
    gap: 2rem;
}

:root {
	--card-fill-color: #ecedf2;    /* Krem/Açık Gri İç Dolgu */
	--card-border-color: #3c467b;  /* Kurumsal Mavi Kontür/Çizgi */
}

.services-grid .service-card {
    /* iç dolgu ve genel kutu */
    background-color: var(--card-fill-color);
    padding: 2rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    
    /* ince kontür + hafif gölge (kontürü box-shadow ile garanti ediyoruz) */
    box-shadow:
        0 0 0 1px var(--card-border-color),
        0 4px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 280ms ease;
    will-change: transform;
    
    /* üst vurgu şeridi (kalıcı) */
    border-top: 5px solid var(--card-border-color);
    /* kenar çizgisi görünürlüğü için opsiyonel outline: */
    outline: 0;
}

/* Hover: yukarı hareket etsin (mevcut gölge korunur/çoğaltılır) */
.services-grid .service-card:hover {
	transform: translateY(-20px); /* yukarı taşı */
	box-shadow:
		0 0 0 1px var(--card-border-color),
		0 14px 30px rgba(0, 0, 0, 0.32);
}

/* Mobilde daha az hareket: performans ve görünürlük için azalt */
@media (max-width: 768px) {
	.services-grid .service-card:hover {
		transform: translateY(-4px);
	}
}

/* Kart içindeki başlık ve paragraf stilleri */
.services-grid .service-card h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #3c467b; /* card heading color explicit as requested */
}

.services-grid .service-card p {
    font-size: 1rem;
    color: var(--dark-color);
    flex-grow: 1;
    cursor: default !important;
}

/* Card icon color: set to brand dark blue (#3c467b) */
.services-grid .service-card .icon,
.services-grid .service-card .card-icon {
    color: #3c467b; /* explicit hex as requested */
}

/* =========================================== */
/* 4. FİLO GÜCÜ BÖLÜMÜ (Ters Çevrilmiş Metin/Resim) */
/* =========================================== */
.fleet-strength-section {
    padding: 5rem 0;
}
.fleet-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.fleet-stats {
    padding-right: 3rem;
}

.fleet-stats h2 {
    color: #3c467b !important;
}

.stats-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.stat-item {
    background-color: var(--white-color);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
}
.stat-item strong {
    font-size: 1.5rem;
    display: block;
    color: var(--primary-color);
}
.highlight-text {
    font-weight: 700;
}

/* =========================================== */
/* 5. GÜVENLİK VE SERTİFİKALAR BÖLÜMÜ */
/* =========================================== */
.security-section h2 {
    margin-bottom: 1.5rem;
}

.certificate-grid {
    /* display: flex ve justify-content: center KALDIRILDI. 
       HTML'deki .row ve .col-3 zaten grid sistemi kullanıyor olmalı. */
    gap: 3rem;
    margin-top: 3rem;
    
    /* Grid sisteminizde .row sınıfı bulunuyorsa, bu kısım gereklidir: */
    display: flex;
    justify-content: center;
    
    /* Mobil düzende alt alta düşmesi için sarmalamayı açıyoruz */
    flex-wrap: wrap; 
}

/* Mobildeki .col-3 elemanlarını ortalamak için CSS */
.certificate-grid .col-3 {
    /* Sertifika resmini ve yazısını ortala */
    text-align: center; 
    
    /* DİKKAT: .col-3 yapınızın, mobilde genişliği %100 yapacak bir media query'si olmalıdır.
       Eğer grid sisteminizde bu yoksa, burada manuel olarak ekliyoruz: */
    width: 30%; /* PC'de yan yana durması için */
    min-width: 150px; /* Sıkışmayı önler */
}


/* --- MOBİL CİHAZLAR İÇİN DÜZELTME (Örn: 768px altı) --- */
@media (max-width: 768px) {
    .certificate-grid {
        gap: 2rem;
    }
    
    .certificate-grid .col-3 {
        /* 768px altında ikişerli dizilmeyi zorla */
        width: 45%; 
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .certificate-grid {
        /* Çok küçük ekranlarda alt alta düşmelerini garantile */
        flex-direction: column;
        align-items: center;
    }
    .certificate-grid .col-3 {
        width: 80%; /* Daha dar bir genişlik */
    }
}

.certificate-grid img {
    opacity: 0.9;
    transition: opacity 0.3s;
}

.certificate-grid img:hover {
    opacity: 1;
}
.certificate-grid p {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--dark-color);
}

/* =========================================== */
/* 6. HAREKETE GEÇİRME (CTA) BÖLÜMÜ */
/* =========================================== */
.cta-section {
    color: var(--white-color);
    padding: 4rem 0;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    margin-top: 1.5rem;
}


/* =========================================== */
/* RESPONSIVE AYARLAR (MOBİL) */
/* =========================================== */
@media (max-width: 992px) {
    .excellence-text-col {
        padding-left: 0;
        margin-top: 2rem;
    }
    .fleet-stats {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .stats-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Genel mobil düzen */
    .excellence-section .row,
    .fleet-strength-section .row {
        flex-direction: column;
    }
    .certificate-grid {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .service-card {
        margin-bottom: 1.5rem;
    }
}
/* =========================================== */
/* HERO SONRASI İÇERİK ARKA PLANI */
/* =========================================== */
.kisa-cizgi {
    /* ADIM 1: Varsayılan olarak (Masaüstü ve Büyük Ekranlar) çizgiyi GİZLE */
    display: none; 
}

.content-background-wrapper {
    position: relative;
    z-index: 1;
    background-color: #ecedf2; /* Yedek arka plan rengi */
}

.content-background-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* start: set a CSS variable you can change to move the image down (use px, %, vh, etc.) */
    --content-bg-offset: 0px; /* default: no offset — change this to e.g. 200px */
    background-image: url('../../images/römorkörcülük.png');
    background-size: cover;
    /* vertical position uses the variable so you can nudge the image down:
       - set --content-bg-offset to "200px" to move image 200px lower from the top
       - you can also use percentages like "10%" or viewport units "10vh" */
    background-position: top center; /* section başından başlasın */
    background-repeat: no-repeat;
    background-blend-mode: normal;   /* herhangi bir blend'i iptal et */
    z-index: -1;
    pointer-events: none;
    opacity: 1;                       /* tam orijinal renkler */
}

/* Example: override for mobile if you want a different offset there */
@media (max-width: 768px) {
    .content-background-wrapper::before {
        background-image: none !important; /* Arka plan resmini kaldır */
        background-color: #ecedf2 !important; /* Arka plan rengini ayarla */
        opacity: 1 !important; /* Tam opaklık */
        /* Diğer ayarları koru veya kaldır */
        --content-bg-offset: 0px !important; /* Offset'i sıfırla */
        background-position: center var(--content-bg-offset) !important;
    }
}

/* MOBILE RESPONSIVE START */
@media (max-width: 768px) {
    /* Genel Ayarlar */
    body {
        padding-top: 0 !important; /* Mobil hero görselinin en üstte başlaması için kaldırıldı */
    }
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    section {
        padding: 1rem 0 !important;
        padding-bottom: 0 !important; /* Alt boşluğu sıfırla */
        overflow: hidden !important;
    }

    /* HERO BÖLÜMÜ */
    .hero-section {
        min-height: auto !important; /* İçeriğe göre otomatik yükseklik */
        height: auto !important; /* İçeriğe göre otomatik yükseklik */
        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 */
        position: relative !important; /* Z-index için */
        z-index: 2 !important;
    }
    .hero-text-block {
        width: 100% !important;
        max-width: 100% !important;
    }
    .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 */
    }
    .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 */
    }
    .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 */
        cursor: default !important;
    }

    /* OPERASYONEL MÜKEMMELLİK BÖLÜMÜ */
    .excellence-section .row {
        flex-direction: column !important; /* Sütunları alt alta diz */
    }
    .excellence-img-col {
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    .excellence-img-col img {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }
    .experience-badge {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 1rem !important;
        display: block !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.8rem 1.2rem !important;
        font-size: 0.9rem !important;
    }
    .experience-badge strong {
        font-size: 1.5rem !important;
    }
    .excellence-text-col {
        padding-left: 0 !important;
        padding-top: 0 !important;
        text-align: center !important;
        align-items: center !important;
        gap: 1rem !important;
    }
   
    .excellence-text-col p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    .excellence-text-col .btn {
        margin-top: 1rem !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-left: auto !important; /* Butonu yatayda ortala */
        margin-right: auto !important; /* Butonu yatayda ortala */
        position: relative !important;
        top:-2rem   !important;
    }
    .kisa-cizgi {
        display: block;
    /* 1. Genişliği ayarla (Kısa olması için %10 gibi bir değer) */
    width: 80%; 
    
    /* 2. Çizgiyi ortala */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. Stil (İsteğe bağlı, daha görünür olması için) */
    border: none; /* Varsayılan kenarlığı kaldır */
    border-top: 2px solid #3c467b; /* 2px kalınlığında, düz siyah çizgi ekle */
}

    /* HİZMET KARTLARI BÖLÜMÜ */
    .services-section h2 {
        font-size: 1.8rem !important;
        margin-bottom: 2rem !important;
    }
    .services-grid {
        flex-direction: column !important; /* Kartları alt alta diz */
        gap: 5px !important;
    }
    .services-grid .service-card {
        flex: 0 0 100% !important; /* Tam genişlik al */
        padding: 2rem !important;
        border-radius: 15px !important;
    }
    .services-grid .service-card h3 {
        font-size: 1.3rem !important;
    }
    .services-grid .service-card p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
    .services-grid .service-card:hover {
        transform: translateY(-4px) !important; /* Daha az hareket */
        box-shadow: 0 0 0 1px var(--card-border-color), 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    }

    /* FİLO GÜCÜ BÖLÜMÜ */
    .fleet-strength-section .row {
        flex-direction: column-reverse !important; /* Metin üstte, görsel altta */
    }
    .fleet-stats {
        padding-right: 0 !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    .fleet-stats h2 {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }
    .fleet-stats .lead-text {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        position: relative !important;
        top:1.5rem !important;
    }
    .stats-list {
        grid-template-columns: 1fr !important; /* Tek sütunlu grid */
        gap: 15px !important;
    }
    .stat-item {
        padding: 1rem !important;
        text-align: center !important;
    }
    .stat-item strong {
        font-size: 1.3rem !important;
    }
    .stat-item p {
        font-size: 0.9rem !important;
    }
    .fleet-img {
        padding: 0 !important;
    }
    .fleet-img img {
        border-radius: 8px !important;
    }

    /* CONTENT BACKGROUND WRAPPER */
    .content-background-wrapper {
        margin-top: 0 !important; /* Boşluğu sıfırla */
    }
    .content-background-wrapper::before {
        --content-bg-offset: 80px !important; /* Mobil için offset ayarla */
        background-position: center var(--content-bg-offset) !important;
        opacity: 0.14 !important;
    }
}

/* Mobil Buton Başlık Stili */
@media (max-width: 768px) {
    .mobile-button-title {
       display: block; /* Butonun tam genişlik alıp margin: auto ile ortalanması için */
    margin: 0 auto; /* Butonu yatayda ortalar */
    
    background-color: var(--primary-color);
    color: var(--white-color);
    
    /* YAZI UZUNLUĞUNDA OLMASI İÇİN DÜZENLEMELER */
    padding: 0.5rem 2rem; /* Yan padding'i 8rem'den 2rem'e düşürdüm.
                             Bu değeri metne göre en uygun hale getirebilirsiniz. */
    width: fit-content;   /* Butonun genişliğini içeriği (yazı + padding) kadar yapar */
    text-align: center;   /* Butonun içindeki yazıyı ortalar */
    
    border-radius: 999px;
    font-weight: 1000;
    font-size: 1.25rem;
    text-decoration: none;
    cursor: default;
    box-shadow: none;
    }
    
    /* Başlık zaten h2 olduğu için, mevcut h2 stillerini geçersiz kılmak gerekebilir */
    .fleet-stats h2.mobile-button-title {
        /* Mevcut h2 stillerini geçersiz kılmak için ek ayarlar */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero-main-heading {
        font-size: 1.3rem !important;
    }
    .experience-badge {
        font-size: 0.8rem !important;
        padding: 0.6rem 1rem !important;
        position: relative !important;
        top:-3rem !important;
        left:0rem !important;
        z-index: 5 !important;
    }
    .experience-badge strong {
        font-size: 1.3rem !important;
    }
    
    .services-section h2 {
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem !important;
        color: #3c467b !important;
    }

    .fleet-stats h2 {
        font-size: 1.5rem !important;
        position: relative !important;
        top: 0.2rem;
        margin-bottom: 2rem;
        color: #ecedf2!important;
    }
    .excellence-text-col p,
    .services-grid .service-card p,
    .fleet-stats .lead-text,
    .stat-item p {
        font-size: 0.85rem !important;
       
    }
    .services-grid .service-card h3 {
        font-size: 1.1rem !important;
    }
    .stat-item strong {
        font-size: 1.1rem !important;
    }
    .operasyon-p{
        position: relative !important;
        margin-top: -6rem;
        margin-top:2px;
        cursor: default !important;
    }
    .operasyon-h2{
        position: relative !important;
    
        font-size: 1.5rem;
        margin-top: -7rem;
    }
}
/* MOBILE RESPONSIVE END */