/* Sayfanın genel ayarları */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
}

/* Üst kısım (Header) ayarları */
/* Üst Kısım Genel Ayarı */
.ust-alan {
    background-color: #2c3e50; /* Koyu lacivert kurumsal renk */
    color: white;
    padding: 2px 50px;
    display: flex; /* Sihirli değnek: İçindekileri yan yana dizer */
    justify-content: space-between; /* Sol, Orta ve Sağ'ı birbirinden uzaklaştırır */
    align-items: center; /* Hepsini dikey olarak ortalar */
    border-bottom: 5px solid #ff9800; /* Alta turuncu şerit */
}

/* SOL: Logo Ayarı */
.logo-alani img {
    height: 150px; /* Logo yüksekliği */
    width: auto; /* Genişlik orantılı olsun */
   /*background: white; /* Logo belirgin olsun diye arkasına beyazlık */
    padding: 0px;
    border-radius: 50px;
}

/* ORTA: Başlık Ayarı */
.baslik-alani {
    text-align: center; /* Yazıları ortala */
}

.baslik-alani h1 {
    margin: 0; /* Boşlukları sıfırla */
    font-size: 28px;
    text-transform: uppercase; /* Harfleri büyüt */
    letter-spacing: 1px; /* Harf aralarını aç */
    font-weight: 800; /* Kalın yazı */
}

.baslik-alani h3 {
    margin: 1;      /* Başlığın alt-üst boşluğunu sıfırla */
    font-size: 18px; /* H2 çok büyük olmasın, kibar dursun */
    color: #ff9800; /* İşte turuncu rengimiz geri geldi! */
    font-weight: 600; /* Biraz daha dolgun görünsün */
    letter-spacing: 1px; /* Harflerin arası hafif açılsın */
    text-transform: uppercase; /* İstersen hepsi BÜYÜK HARF olsun */
}

/* SAĞ: Telefon Ayarı */
.iletisim-alani {
    text-align: right;
    display: flex;
    flex-direction: column; /* "Bize Ulaşın" ile numarayı alt alta getir */
}

.telefon-no {
    background-color: #ff9800; /* Turuncu buton */
    color: #2c3e50;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 5px;
    transition: background 0.3s;
}

.telefon-no:hover {
    background-color: white; /* Üzerine gelince beyaz olsun */
}

/* Ana içerik kutusu */
.ana-icerik {
    text-align: center;
    margin-top: 100px;
}

/* Karşılama Alanı (Hero) */
/* Slider Kutusu */
.slider-kutusu {
    position: relative;
    max-width: 100%;
    height: 600px; /* Slider yüksekliği */
    margin:  auto ;
    background-color: #f4f4f4; /* Arka plan rengi */
    overflow: hidden; /* Taşan kısımları gizle */
}

/* Her Bir Slayt */
.slide {
    display: none; /* Başlangıçta hepsi gizli */
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
    animation: fadeEffect 1s; /* Geçiş efekti */
}

/* Sadece 'aktif' sınıfı olan slayt görünsün */
.slide.aktif {
    display: flex; /* Flex ile yan yana dizilim */
}

/* Slayt İçindeki Yazı Alanı */
.slide-yazi {
    flex: 1;
    padding-right: 30px;
}

.slide-yazi h2 {
    font-size: 45px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.slide-yazi p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #555;
}

/* Slayt İçindeki Resim Alanı */
.slide-resim {
    flex: 1;
    display: flex;
    justify-content: center;
}

.slide-resim img {
    max-width: 100%;
    
    /* BURASI DEĞİŞTİ: Yüksekliği serbest bırakma, sınırla */
    max-height: 500px; 
    
    /* Resmi kesmeden, kutunun içine tam sığdır */
    object-fit: contain; 
    
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 3px solid white;
}

/* İleri Geri Tuşları */
.geri-tus, .ileri-tus {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    background-color: rgba(0,0,0,0.5); /* Yarı saydam siyah */
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
}

.ileri-tus {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.geri-tus:hover, .ileri-tus:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Fade Animasyonu (Yumuşak Geçiş) */
@keyframes fadeEffect {
    from {opacity: .4} 
    to {opacity: 1}
}

.buton {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
}

/* Kartlar Alanı */
.kartlar-alani {
    text-align: center;
    padding: 50px 20px;
}

.kart-kutusu {
    display: flex; /* Kartları yan yana dizer */
    justify-content: center;
    gap: 20px; /* Kartlar arası boşluk */
    flex-wrap: wrap; /* Mobilde alt alta geçmesini sağlar */
}

.kart {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Hafif gölge */
    transition: transform 0.3s; /* Hareket efekti */
}

.kart:hover {
    transform: translateY(-10px); /* Üzerine gelince yukarı zıplasın */
}


/* Footer Genel Ayarları */
footer {
    background-color: #2c3e50; /* Sitenin ana koyu rengi */
    color: white;
    padding: 40px 20px 10px; /* Üstten, yanlardan ve alttan boşluk */
    margin-top: 50px; /* İçerikle yapışmasın */
    border-top: 5px solid #ff9800; /* Üstüne turuncu şerit (Header ile uyumlu) */
}

/* İçerik Kutusu Düzeni */
.footer-icerik {
    display: flex; /* Yan yana diz */
    justify-content: space-around; /* Aralarını aç */
    flex-wrap: wrap; /* Mobilde alt alta geçsin */
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Başlıklar (Adres, İletişim) */
.footer-icerik h3 {
    color: #ff9800; /* Turuncu başlık */
    margin-bottom: 15px;
    font-size: 20px;
}

/* Adres Yazısı */
.adres-kutusu p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 300px; /* Yazı çok uzamasın, alt satıra geçsin */
}

/* Telefon Linki */
.iletisim-footer a {
    color: white;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    background-color: #ff9800; /* Turuncu kutu */
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    transition: 0.3s;
}

.iletisim-footer a:hover {
    background-color: white; /* Üzerine gelince beyaz olsun */
    color: #2c3e50; /* Yazı koyu olsun */
}

/* En Alt Telif Yazısı */
.telif-hakki {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* İnce bir çizgi */
    font-size: 14px;
    color: #ccc;
}

/* WhatsApp Butonu Tasarımı */
.whatsapp-buton {
    position: fixed; /* Sayfa kayarken o sabit kalsın */
    bottom: 20px;    /* Alt kısımdan 20px yukarıda */
    right: 20px;      /* Sol kısımdan 20px içeride */
    z-index: 1000;   /* Diğer her şeyin (slider, resimler) üstünde dursun */
    background-color: #25d366; /* WhatsApp yeşili */
    color: white;
    width: 100px;     /* Buton genişliği */
    height: 100px;    /* Buton yüksekliği */
    border-radius: 50%; /* Tam yuvarlak olsun */
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Gölge verelim ki havada dursun */
    display: flex;
    align-items: center; /* İkonu ortala */
    justify-content: center;
    transition: transform 0.3s; /* Hareket efekti */
}

/* İçindeki İkon Ayarı */
.whatsapp-buton img {
    width: 60px;
    height: 60px;
    
    /* İŞTE SİHİRLİ KOD BURASI */
    animation: titreme-efekti 5s infinite; /* 5 saniyede bir, sonsuza kadar yap */
}

/* Üzerine Gelince Animasyon */
.whatsapp-buton:hover {
    transform: scale(1.1); /* Hafifçe büyüsün */
    background-color: #128c7e; /* Rengi koyulaşsın */
}


/* Titreme Animasyonu Tanımı (GÜNCELLENDİ) */
@keyframes titreme-efekti {
    0% { transform: rotate(0deg) scale(1); }
    5% { transform: rotate(15deg) scale(1.1); }
    10% { transform: rotate(-15deg) scale(1.1); }
    15% { transform: rotate(15deg) scale(1.1); }
    20% { transform: rotate(-15deg) scale(1.1); }
    25% { transform: rotate(15deg) scale(1.1); }
    30% { transform: rotate(0deg) scale(1); } /* 1.5 saniye boyunca sallar */
    100% { transform: rotate(0deg) scale(1); } /* Geri kalan 3.5 saniye bekle */
}


/* Hakkımızda Bölümü Tasarımı */
.hakkimizda {
    background-color: white;
    padding: 60px 20px; /* Üstten alttan boşluk */
}

.hakkimizda-kutu {
    max-width: 1100px; /* İçerik çok yayılmasın */
    margin: 0 auto; /* Ortala */
    display: flex; /* Yazı ve resmi yan yana getir */
    align-items: center; /* Dikeyde ortala */
    gap: 50px; /* Yazı ile resim arası boşluk */
}

/* Yazı Alanı */
/* Yazı Alanı Geneli */
.hakkimizda-yazi {
    flex: 1;
}

/* 1. Marka İsmi (Erdemli Nergiz...) - ARTIK KOCAMAN */
.hakkimizda-yazi h2 {
    color: #ff9800;       /* Turuncu (Dikkat çeker) */
    font-size: 42px;      /* Eskiden 16px idi, şimdi devasa oldu */
    font-weight: 800;     /* En kalın font (Bold) */
    line-height: 1.2;     /* Satırlar birbirine hafif yaklaşsın */
    margin-bottom: 15px;
    text-transform: uppercase; /* Hepsi BÜYÜK HARF olsun */
    letter-spacing: 1px;  /* Harflerin arası hafif açılsın */
}

/* 2. Slogan (Mersin'in Güvenilir...) */
.hakkimizda-yazi h3 {
    color: #2c3e50;       /* Lacivert */
    font-size: 24px;      /* İkinci başlık biraz daha kibar kalsın */
    font-weight: 600;
    margin-bottom: 25px;
}

/* 3. Açıklama Metni (Paragraf) */
.hakkimizda-yazi p {
    font-size: 18px;      /* Okuması daha kolay olsun diye büyüttük */
    line-height: 1.8;     /* Satır aralarını açtık, ferahlasın */
    color: #444;          /* Rengi biraz koyulaştırdık, net görünsün */
    margin-bottom: 20px;
}
/* Tik İşaretli Liste */
.ozellik-listesi {
    list-style: none; /* Noktaları kaldır */
    padding: 0;
}

.ozellik-listesi li {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

/* Resim Alanı */
.hakkimizda-resim {
    flex: 1; /* Diğer yarıyı kapla */
}

.hakkimizda-resim img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 20px 20px 0px #eee; /* Arkasına gölge gibi şekil yap */
}



/* İkili Resim Düzeni */
.ikili-resim-kutu {
    display: flex;       /* Resimleri yan yana dizer */
    gap: 10px;           /* Aralarında 10px boşluk bırakır */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/* Kutunun içindeki resimlerin ayarı */
.ikili-resim-kutu img {
    width: 48%;          /* Her resim alanın yarısını kaplasın */
    height: 300px;       /* Yükseklikleri eşit olsun */
    object-fit: cover;   /* Resimler kutuya tam otursun, basık durmasın */
    border-radius: 10px; /* Köşeleri yuvarlat */
    border: 3px solid white; /* Beyaz çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Gölge */
    transition: transform 0.3s; /* Üzerine gelince hareket efekti */
}

/* Üzerine gelince hafif büyüsün */
.ikili-resim-kutu img:hover {
    transform: scale(1.05);
    z-index: 2; /* Öne çıksın */
}


/* =========================================
   MOBİL İÇİN ÖZEL AYARLAR (EN ALTA EKLE)
   ========================================= */

@media (max-width: 768px) {

    /* 1. ÜST ALAN (HEADER) DÜZELTMESİ */
    .ust-alan {
        flex-direction: column; /* Yan yana değil, alt alta diz */
        height: auto; /* Yükseklik serbest olsun */
        padding: 15px;
        text-align: center; /* Her şeyi ortala */
    }

    .logo-alani img {
        height: 60px; /* Logoyu biraz küçült */
        margin-bottom: 10px;
    }

    .baslik-alani h1 {
        font-size: 20px; /* O devasa yazıyı küçült */
        line-height: 1.3;
    }

    .baslik-alani h2 {
        display: none; /* Mobilde alt başlığı gizle, kalabalık etmesin */
    }

    .iletisim-alani {
        margin-top: 15px;
    }

    /* 2. SLİDER (KAYAN ALAN) DÜZELTMESİ */
    .slider-kutusu {
        height: auto; /* Sabit yükseklik yerine içeriğe göre uzasın */
        min-height: 550px; 
        margin-top: 20px !important;
    }

    .slide {
        flex-direction: column; /* Yazı üstte, resim altta olsun */
        padding: 20px; /* Kenarlardan boşluk ver */
        justify-content: flex-start; /* Üstten başla */
    }

    /* Yazı Kısmı */
    .slide-yazi {
        width: 100%; /* Tam genişlik */
        text-align: center; /* Yazıları ortala */
        margin-bottom: 20px;
        padding-right: 0; /* Masaüstündeki sağ boşluğu sıfırla */
    }

    .slide-yazi h2 {
        font-size: 26px; /* Başlığı küçült */
    }

    .slide-yazi p {
        font-size: 15px;
    }

    /* Resim Kısmı */
    .slide-resim {
        width: 100%; /* Tam genişlik */
        justify-content: center;
    }

    /* O İNCE GÖRÜNEN İKİLİ RESİMLER İÇİN AYAR */
    .ikili-resim-kutu {
        width: 100%;
        gap: 5px; /* Aradaki boşluğu azalt */
    }

    .ikili-resim-kutu img {
        height: 200px; /* Mobilde resim boyunu kısalt */
    }

    /* Tekli resimler için ayar */
    .slide-resim img {
        max-height: 250px; 
    }

    /* 3. SAĞ-SOL OKLAR */
    .geri-tus, .ileri-tus {
        padding: 10px; /* Tuşları biraz küçült */
        top: 60%; /* Biraz daha aşağı al */
    }

    /* HAKKIMIZDA KISMI MOBİL DÜZENLEMESİ */
    .hakkimizda-kutu {
        flex-direction: column; /* Yan yana durmayı bırak, alt alta geç */
        text-align: center;     /* Yazıları ortala, daha şık durur */
        gap: 30px;              /* Yazı ile resim arasına boşluk koy */
    }

    .hakkimizda-yazi {
        width: 100%;            /* Yazı alanı ekranı kaplasın */
        padding: 0 10px;        /* Kenarlardan hafif boşluk */
    }

    .hakkimizda-resim {
        width: 100%;            /* Resim alanı ekranı kaplasın */
        margin-top: 10px;
    }

    .hakkimizda-resim img {
        width: 100%;            /* Resim ekrana tam otursun */
        height: auto;           /* Orantısı bozulmasın */
        max-height: 300px;      /* Çok da uzamasın */
        object-fit: cover;
    }

    /* HAKKIMIZDA KISMI MOBİL DÜZENLEMESİ */
    .hakkimizda-kutu {
        flex-direction: column; /* Yan yana durmayı bırak, alt alta geç */
        text-align: center;     /* Yazıları ortala, daha şık durur */
        gap: 30px;              /* Yazı ile resim arasına boşluk koy */
    }

    .hakkimizda-yazi {
        width: 100%;            /* Yazı alanı ekranı kaplasın */
        padding: 0 10px;        /* Kenarlardan hafif boşluk */
    }

    .hakkimizda-resim {
        width: 100%;            /* Resim alanı ekranı kaplasın */
        margin-top: 10px;
    }

    .hakkimizda-resim img {
        width: 100%;            /* Resim ekrana tam otursun */
        height: auto;           /* Orantısı bozulmasın */
        max-height: 300px;      /* Çok da uzamasın */
        object-fit: cover;
    }
}