/* css/pages/_gemi-kurtarma.css */

/* =========================================== */
/* 1. HERO BÖLÜMÜ (Aciliyet ve Odak Noktası) */
/* =========================================== */



.hero-salvage {
	/* Tam ekran yüksekliği: viewport yüksekliğinin tamamı eğer header yoksa,
	   veya header varsa header yüksekliği düşülerek ayarlanır */
	min-height: 100vh;
	
	padding: 0;               /* üst/alt padding kaldırıldı, hero tam ekran olsun */
	display: flex;
	align-items: center;      /* dikey merkezleme */
	justify-content: center;  /* yatay merkezleme */
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	
}

.hero-salvage::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* karartma/brightness kaldırıldı */
	filter: none;
	z-index: 0;            /* içeriklerin arkasında ama bölümün üstünde olsun */
	pointer-events: none;
}

/* Eğer sayfada overlay elemanı varsa gizle (karartma istemiyorsanız) */
.hero-salvage .hero-overlay {
	display: none !important;
}

.hero-salvage > .container,
.hero-salvage .contact-box,
.hero-salvage h1,
.hero-salvage p {
	position: relative;
	z-index: 2;            /* içerik kesinlikle pseudo-element'in üstünde gösterilsin */
}

.hero-salvage h1 {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-salvage p {
    font-size: 1.3rem;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

.hero-salvage .contact-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero-salvage .contact-box a {
    /* Acil Buton */
    background-color: var(--accent-color); /* Turuncu/Kırmızı */
    color: var(--white-color);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-transform: uppercase;
    transition: background-color 0.3s;
    box-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.5);
}

.hero-salvage .contact-box a:hover {
    background-color: var(--primary-dark);
}

.hero-salvage .contact-box span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 1px;
}


/* =========================================== */
/* 2. HİZMETLER BÖLÜMÜ (Kartlar) */
/* =========================================== */
.services-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: nowrap;         /* tek satır */
             /* küçük ekranlarda yatay kaydırma sağlar */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.services-grid .service-card {
    flex: 0 0 calc(25% - 1.5rem); /* dört kart için eşit genişlik */
    box-sizing: border-box;
}

.service-card {
    background-color: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--primary-color);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.15);
}

.service-card h3 {
    color: #3c467b; /* card heading color explicit as requested */
    font-size: 1.4rem;
    margin-top: 0;
}

/* Mobilde kartları alt alta koy */
@media (max-width: 768px) {
    .services-grid {
        display: flex;
        flex-wrap: wrap;
    }
    .services-grid .service-card {
        flex: 0 0 100%;
        margin-bottom: 1rem;
    }
}

/* =========================================== */
/* 3. SÜREÇ BÖLÜMÜ (Listeleme/Timeline) */
/* =========================================== */
.process-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
    padding-left: 1.5rem; /* Sol tarafa çizgi için boşluk */
    border-left: 2px solid var(--secondary-color); /* Timeline çizgisi */
}

.process-item {
    position: relative;
    padding-left: 1.5rem;
    margin-left: -1.5rem; /* Çizgiye hizalama için */
}

/* Adım Numarası/İkonu */
.process-item h3::before {
    content: attr(data-step); /* HTML'deki data-step özelliğini kullan */
    position: absolute;
    left: -2rem; /* Çizgi üzerine oturması için */
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid var(--white-color); /* Timeline'da belirginlik */
    box-shadow: 0 0 0 3px var(--accent-color);
}

.process-item h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--accent-color);
}

/* ---------------------------------------------------
   Hero düzeni: index hero ile BİREBİR aynı görünüm
   - Arka plan resmi: images/gemikurtarmahero.jpg (HTML inline atandı)
   - Overlay, içerik z-index ve solda hizalama uygulandı
   --------------------------------------------------- */
.about-hero,
.hero-with-image {
    position: relative;
    overflow: hidden;
    min-height: 90vh; /* gerektiğinde 100vh ile değiştirin */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Arka plan katmanı (HTML içindeki .hero-image-bg-layer kullanılsın) */
.hero-image-bg-layer {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0; /* overlay'in altında */
}

/* Aynı opaklıkta overlay (index ile eşleştirme) */
.hero-overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6); /* index hero ile aynı karartma */
    z-index: 1;
    pointer-events: none;
}

/* İçerik konteyneri (index.html ile aynı pozisyon ve boşluklar) */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    box-sizing: border-box;
    text-align: left !important;
    align-self: flex-start !important;
    margin: 180px auto 0 auto; /* index.html ile aynı dikey pozisyon */
    padding-left: 1.8rem;
    color: var(--white-color, #fff);
}

.hero-text-block { max-width: 800px; }

/* Metin stilleri (index.html ile aynı boyutlar) */
.hero-overline-title {
    color: #cbdceb;
    font-size: 3rem;
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.hero-main-heading {
    color: #f2ece4;
    font-size: 3rem;
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 0.9rem;
    font-style: italic !important;
}

.lead-text-light {
    color: #f2ece4;
    opacity: 0.95;
    font-size: 1.2rem;
    max-width: 90%;
    line-height: 1.6;
}

/* ---------------------------------------------------
   Referans başlığı: buton görünümü (hover EFEKTİ YOK)
   - Başlık buton gibi görünür; hover ile renk değişimi yok
   --------------------------------------------------- */
.casestudy-section .casestudy-heading-btn {
    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;
}

/* kesinlikle hover efekti yok */
.casestudy-section .casestudy-heading-btn:hover,
.casestudy-section .casestudy-heading-btn:focus {
    background-color: var(--primary-color); /* aynı kalır */
    color: var(--white-color);
    text-decoration: none;
    outline: none;
}

/* Referans kartları: mevcut stil korunur, responsive ayar eklendi */
.casestudy-group {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

.casestudy-card {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 1rem 0;
    background-color: var(--white-color);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    max-height: calc(40vh - 2rem); /* Yüksekliği azaltıldı */
    overflow: hidden;
}

.casestudy-image-wrapper {
    flex: 0 0 35%;
    max-width: 35%;
}
.casestudy-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display:block;
}
.casestudy-text {
    flex: 1;
    padding-right: 1rem;
}

.casestudy-text h3 {
    font-size: 1.2rem; /* Başlık fontu küçültüldü */
}

.casestudy-text p {
    font-size: 0.9rem; /* Paragraf fontu küçültüldü */
    line-height: 1.4;
}

/* Mobilde referans kartları alt alta ve görsel üstte */
@media (max-width: 768px) {
    .casestudy-card {
        flex-direction: column;
        text-align: center;
    }
    .casestudy-image-wrapper { max-width: 100%; flex: 0 0 auto; }
}

/* =========================================== */
/* MOBİL UYUM (Resmin Altında Boşluk Ekleme) */
/* =========================================== */
@media (max-width: 767px) {
    /* HTML yapınızda resim ilk sütunda olduğu için, mobil görünümde (alt alta yığıldığında) 
       resmin altına boşluk ekleriz. */
    .section-padding .col-md-6:first-child {
        margin-bottom: 2.5rem;
    }

.kapsamlı-baslik {
       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;
    position:relative !important;
    top:1rem !important;
    margin-bottom:2rem !important;
}
/* =========================================== */
/* 5. Acil İletişim (CTA) BÖLÜMÜ */
/* =========================================== */
.cta-salvage {
    background-color: var(--primary-dark);
    color: var(--white-color);
    text-align: center;
    padding: 3rem 0;
}
.cta-salvage a {
    /* Acil Buton */
    background-color: var(--accent-color);
    color: var(--white-color);
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    text-transform: uppercase;
    margin-top: 1.5rem;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.5);
}

/* =========================================== */
/* RESPONSIVE AYARLAR */
/* =========================================== */
@media (max-width: 768px) {
    .hero-salvage {
        min-height: calc(100vh - var(--header-height));
        height: calc(100vh - var(--header-height));
        padding: 1.5rem 0;
    }
    .hero-salvage h1 {
        font-size: 2.2rem;
    }
    .hero-salvage .contact-box span {
        font-size: 1.2rem;
    }
    .process-list {
        padding-left: 0.5rem; /* Mobil ekranlarda çizgiye daha yakın */
    }
    .process-item h3::before {
        left: -1.5rem; /* Numarayı çizgiye yaklaştır */
    }
}

/* HERO: gemi-kurtarma sayfası hero'sunu tam ekran yap (header yüksekliğini düşerek) */
:root {
    --gk-header-height: 70px; /* header yüksekliğinize göre ayarlayın (ör: 70px) */
}

/* Section padding/marginlerini iptal ederek beyaz boşlukları kaldır */
.about-hero.hero-with-image,
.hero-with-image.about-hero {
    min-height: calc(100vh - var(--gk-header-height));
    height: calc(100vh - var(--gk-header-height));
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Eğer bg-section global padding veriyorsa hero için iptal et */
.about-hero.bg-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Arka plan katmanını kesin kaplama yap */
.about-hero .hero-image-bg-layer,
.hero-with-image .hero-image-bg-layer {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Overlay kesinlikle arka planın üstünde ama içeriğin altında */
.about-hero .hero-overlay-dark,
.hero-with-image .hero-overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
    pointer-events: none;
}

/* İçerik bloğu üst/alt ekstra boşluklardan temizlensin; yazı konumları korunur */
.about-hero .hero-content-wrapper,
.hero-with-image .hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    box-sizing: border-box;
    text-align: left;
    /* varsa önceki büyük margin-top'u korumak istemezseniz bu satırı kaldırın veya ayarlayın */
    /* margin: 140px 0 0 0; */ 
}

/* Mobilde de tam ekran davranışı */
@media (max-width: 768px) {
    .about-hero.hero-with-image,
    .hero-with-image.about-hero {
        min-height: calc(100vh - var(--gk-header-height));
        height: calc(100vh - var(--gk-header-height));
    }
    .about-hero .hero-content-wrapper {
        padding: 1.25rem;
        text-align: center;
    }
}

/* Override: gemi-kurtarma hero'sunu tam ekran yap, section padding/marginleri kaldır */
:root {
	/* header yüksekliğini sitenize göre ayarlayın (index inline style ile 70px kullanılıyor) */
	--gk-header-height: 70px;
}

/* Kesin override: hero viewport yüksekliğini kaplasın */
.about-hero.hero-with-image,
.hero-with-image.about-hero {
	min-height: calc(100vh - var(--gk-header-height)) !important;
	height: calc(100vh - var(--gk-header-height)) !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center; /* içerik dikey ortalanır; gerekirse flex-start yapın */
}

/* Eğer .bg-section gibi global padding veriyorsa about-hero için iptal et */
.about-hero.bg-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Arka plan katmanını section'u tam kaplayacak şekilde kesinleştir */
.about-hero .hero-image-bg-layer,
.hero-with-image .hero-image-bg-layer {
	position: absolute !important;
	inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
	width: 100% !important;
	height: 100% !important;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	z-index: 0 !important;
}

/* Overlay kesinlikle arka planın üstünde, içerikten önce */
.about-hero .hero-overlay-dark,
.hero-with-image .hero-overlay-dark {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.6) !important;
	z-index: 1 !important;
	pointer-events: none;
}

/* İçerik bloğunun üst/alt boşluklarını temizle; yazı konumunu koru */
.about-hero .hero-content-wrapper,
.hero-with-image .hero-content-wrapper {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	padding: 2rem;
	box-sizing: border-box;
	text-align: left;
	/* margin: 0 !important; -> Bu kural metnin pozisyonunu bozduğu için kaldırıldı. */
}

/* Mobilde de tam ekran davranışı (header yüksekliği ile uyumlu) */
@media (max-width: 768px) {
	.about-hero.hero-with-image,
	.hero-with-image.about-hero {
		min-height: calc(100vh - var(--gk-header-height)) !important;
		height: calc(100vh - var(--gk-header-height)) !important;
	}
	.about-hero .hero-content-wrapper {
		padding: 1.25rem;
		text-align: center;
	}
}

/* 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: 2rem 0 !important;
        overflow: hidden !important;
    }

    /* HERO BÖLÜMÜ */
    .about-hero.hero-with-image,
    .hero-with-image.about-hero {
        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 */
        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 */
    }

    /* HİZMETLER BÖLÜMÜ */
    .services-grid {
        flex-direction: column !important; /* Kartları alt alta diz */
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    .services-grid .service-card {
        flex: 0 0 100% !important; /* Tam genişlik al */
        margin-bottom: 0 !important;
        padding: 1.5rem !important;
    }
    .service-card h3 {
        font-size: 1.3rem !important;
    }
    .service-card p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    /* VAKA ÇALIŞMASI BÖLÜMÜ */
    .casestudy-section .casestudy-heading-btn {
        font-size: 1.5rem !important;
        padding: 0.6rem 1rem !important;
        margin: 0 auto 0rem auto !important;
        width: 90% !important; /* Ekrandan taşmayı engellemek için genişlik ayarı */
        white-space: normal !important; /* Metnin iki satıra yayılmasını sağlar */
    }
    .casestudy-group {
        height: auto !important; /* Yüksekliği içeriğe göre ayarla */
        padding: 1rem 0 !important;
    }
    .casestudy-card {
        flex-direction: column !important; /* Görsel ve metni alt alta diz */
        text-align: center !important;
        margin: 1rem 0 !important;
        max-height: none !important; /* Maksimum yüksekliği kaldır */
        padding: 1rem !important;
    }
    .casestudy-image-wrapper {
        flex: 0 0 100% !important; /* Görsel tam genişlik al */
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }
    .casestudy-text {
        padding-right: 0 !important;
    }
    .casestudy-text h3 {
        font-size: 1.3rem !important;
    }
    .casestudy-text p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    .hero-main-heading {
        font-size: 1.3rem !important;
    }
    .casestudy-section .casestudy-heading-btn {
        font-size: 1.2rem !important;
        padding: 0.5rem 0.8rem !important;
    }
    .service-card h3,
    .casestudy-text h3 {
        font-size: 1.1rem !important;
    }
    .service-card p,
    .casestudy-text p {
        font-size: 0.85rem !important;
    }
}
}
/* MOBILE RESPONSIVE END */