/* ==========================================
   HEADER: Bu dosyada tanımlı DEĞİL - .main-header artık
   tamamen style_v2.css içinde yönetiliyor (masaüstü + mobil).
   Buradaki eski tekrar eden kural, mobil düzeltmesini
   eziyordu (cascade sırası yüzünden), o yüzden kaldırıldı.
   ========================================== */

/* ==========================================
   SMALL STRIP BANNER (MÜKEMMEL DENGELENMİŞ ŞERİT)
   ========================================== */
.small-strip-banner {
    position: relative;
    /* Yüksekliği tam istediğin gibi şerit formatına (350px) sabitledik */
    height: 350px !important; 
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    
    display: flex;
    align-items: flex-end; /* Yazıları şeridin alt kısmına yakın hizalar */
    justify-content: flex-start;
    
    /* SİHİRLİ DOKUNUŞ: Üst boşluğu (padding-top) 120px yapıyoruz. 
       Böylece üstteki şeffaf menü ne kadar geniş olursa olsun, 
       alttaki "Modern ve Şık..." başlığını asla ezmez, altına sıkıştırmaz. */
    padding: 120px 5% 40px 5%; 
    box-sizing: border-box;
}

/* Şerit içindeki yazıların tasarımı */
.small-strip-banner .banner-content {
    text-align: center;
    z-index: 2;
}

.small-strip-banner h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Yazının patlaması için */
}

.small-strip-banner .breadcrumb {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    letter-spacing: 1px;
}

.small-strip-banner .breadcrumb span {
    color: #ff9f43; /* Marka turuncunuz */
    font-weight: 700;
}
.urunler, .hakkimizda {
    padding: 80px 5%;
    text-align: center;
}

.urunler h2, .hakkimizda h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 40px;
}

/* ==========================================================================
   DOKUZ DİZAYN - BÜYÜTÜLMÜŞ BOYUT & ALTTAN TIRMANAN YAZI EFEKTİ (GÜNCEL)
   ========================================================================== */

/* 1. ANA BÖLÜM */
section.urunler {
    width: 100%;
    display: block;
    clear: both;
    padding: 50px 0;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* Bölüm Başlığı (Hizmetlerimiz) */
section.urunler h1 {
    font-size: 2.2rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    padding: 0 5%; /* Sitenin genel sol hizası */
}

/* 2. DIŞ KAPSAYICI (Yatay Kaydırma Alanı) */
section.urunler .product-container {
    width: 100%;
    overflow-x: auto; /* Yatay kaydırmayı zorunlu kılar */
    scroll-snap-type: x mandatory;
    padding: 10px 5% 25px 5%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* 3. İÇ LİSTE (Kartların yan yana kilitlendiği, asla alta düşmediği alan) */
section.urunler .product-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Kartların alt satıra fırlamasını kesinlikle engeller */
    justify-content: flex-start;
    align-items: center;
    gap: 25px; /* Büyük kartlar arası ideal boşluk */
    width: max-content; /* İçerik kadar yatayda uzasın ki kartlar büzüşmesin */
}

/* 4. ÜRÜN KARTININ ANA GÖVDESİ (Beğendiğin o büyük boyutlar sabitlendi) */
section.urunler .product {
    flex: 0 0 320px; /* Genişlik 320px olarak büyük kalıyor */
    width: 320px;
    height: 420px; /* Yükseklik 420px olarak büyük kalıyor */
    background-color: #1a1a1a; /* Yazıların arkada patlamaması için koyu zemin */
    border-radius: 8px;
    overflow: hidden; /* Altta gizlenen yazıların karttan taşmasını maskeler */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    position: relative; /* İçerideki yazıları absolute ile üzerine bindirmek için */
    box-sizing: border-box;
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* 5. KARTIN İÇİNDEKİ FOTOĞRAF (Kartın tamamını kaplar) */
section.urunler .product img {
    width: 100%;
    height: 100%; /* Fotoğraf artık kartın tüm gövdesini kaplıyor */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* 6. SİNEMATIK ARKA PLAN KARARTMASI (Sihirli Katman) */
/* Kartın üzerine gelince yazının okunması için alta sahte siyah bir gradyan perde örüyoruz */
section.urunler .product::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85) 75%, rgba(0, 0, 0, 0.95));
    z-index: 2;
    opacity: 0; /* Başlangıçta görünmez */
    transition: opacity 0.3s ease;
}

/* 7. ALTTAN BÜYÜLÜ ŞEKİLDE TIRMANACAK OLAN YAZILAR */
section.urunler .product h3,
section.urunler .product p {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    text-align: left;
    z-index: 3; /* Karartma perdesinin de üstünde dursunlar */
    
    /* BAŞLANGIÇTA GİZLEME: Yazıları büyük kartın (420px) taban çizgisinin altına itip saklıyoruz */
    transform: translateY(220px); 
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease;
}

/* Başlığın Konumu (Görsel üstünde keskin okunması için beyaz) */
section.urunler .product h3 {
    bottom: 80px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

/* Açıklama Metninin Konumu */
section.urunler .product p {
    bottom: 20px;
    color: #dddddd;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* ==========================================================================
   8. DİNAMİK HOVER (FARE ÜSTÜNE GELDİĞİNDE)
   ========================================================================== */

/* Kart premium bir hisle yukarı esnesin */
section.urunler .product:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Fotoğraf arka planda sinematik büyüsün */
section.urunler .product:hover img {
    transform: scale(1.05);
}

/* Siyah karartma perdesi devreye girsin */
section.urunler .product:hover::after {
    opacity: 1;
}

/* BAŞLIK VE AÇIKLAMA ALTTAN PÜRÜSSÜZCE YUKARI TIRMANIP BELİRSİN */
section.urunler .product:hover h3,
section.urunler .product:hover p {
    transform: translateY(0); /* Orijinal taban konumlarına cuk diye otururlar */
    opacity: 1; /* Tamamen görünür olurlar */
}

/* ==========================================================================
   9. İNCE VE ORTALANMIŞ SCROLLBAR TASARIMI
   ========================================================================== */
section.urunler .product-container::-webkit-scrollbar {
    height: 4px;
}
section.urunler .product-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin: 0 35%; /* Çubuğu tam ortada şık bir şerit yapar */
}
section.urunler .product-container::-webkit-scrollbar-thumb {
    background: #ff9f43; /* Dokuz Dizayn Turuncusu */
    border-radius: 10px;
}

/* ==========================================================================
   10. MOBİL UYUMLULUK AYARI
   ========================================================================== */
@media (max-width: 768px) {
    section.urunler .product {
        flex: 0 0 260px;
        width: 260px;
        height: 360px; /* Mobilde kartları orantılı daralttık */
    }
    /* Mobilde dokunmatik ekranlar için yazılar ve karartma sabit açık kalır */
    section.urunler .product h3 {
        transform: translateY(0);
        bottom: 70px;
        font-size: 1.1rem;
        opacity: 1;
    }
    section.urunler .product p {
        transform: translateY(0);
        bottom: 15px;
        font-size: 0.85rem;
        opacity: 1;
    }
    section.urunler .product::after {
        opacity: 1;
    }
    section.urunler .product-container::-webkit-scrollbar-track {
        margin: 0 20%;
    }
}
/* ==========================================================================
   DOKUZ DİZAYN - MEDYA & BASIN HABERLERİ GRİD MİMARİSİ
   ========================================================================== */

section.medya-haberler {
    width: 100%;
    padding: 60px 0 90px 0;
    background-color: #fafafa; /* Ürün rayından ayrışması için çok hafif kırık beyaz */
    box-sizing: border-box;
}

.medya-baslik-alani {
    padding: 0 5%;
    margin-bottom: 40px;
    text-align: left;
}

.medya-baslik-alani h2 {
    font-size: 2.2rem;
    color: #111111;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.medya-baslik-alani p {
    font-size: 1rem;
    color: #666666;
    margin: 0;
}

/* 3'lü jilet gibi yan yana dizilen grid düzeni */
.medya-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 5%;
    box-sizing: border-box;
}

/* Haber Kartının Temeli */
a.haber-kart {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none; /* Link çizgisini kaldırır */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Haber Görsel Alanı */
.haber-gorsel {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}

.haber-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Sol üstteki kurumsal etiketler */
.haber-etiket {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #111111;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.haber-etiket.video-renk {
    background-color: #ff9f43; /* Önemli videolar için Dokuz Dizayn Turuncusu */
    color: #ffffff;
}

/* Yazı Alanı */
.haber-detay {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.haber-detay h3 {
    font-size: 1.2rem;
    color: #111111;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.haber-detay p {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.haber-link-text {
    font-size: 0.88rem;
    color: #ff9f43; /* Kurumsal Turuncu */
    font-weight: 700;
    margin-top: auto; /* Yazı ne kadar uzun olursa olsun linki hep en alta sabitler */
    transition: transform 0.25s ease;
}

/* --- BASIN KARTLARI HOVER REAKSİYONLARI --- */
a.haber-kart:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

a.haber-kart:hover .haber-gorsel img {
    transform: scale(1.04);
}

a.haber-kart:hover .haber-detay h3 {
    color: #ff9f43; /* Üzerine gelince başlık turuncuya döner */
}

a.haber-kart:hover .haber-link-text {
    transform: translateX(4px); /* Ok işareti hafifçe sağa kayar */
}

/* ==========================================
   MEDYA MOBİL UYUMLULUK AYARI
   ========================================== */
@media (max-width: 992px) {
    .medya-grid {
        grid-template-columns: repeat(2, 1fr); /* Tabletlerde yan yana 2 tane */
    }
}

@media (max-width: 768px) {
    .medya-grid {
        grid-template-columns: 1fr; /* Telefonlarda tekli liste düzeni */
        gap: 20px;
    }
    .haber-gorsel {
        height: 200px;
    }
}
/* ==========================================================================
   DOKUZ DİZAYN - SİNEMATİK TAM EKRAN (HERO BANNER) & AKICI ANİMASYONLAR
   ========================================================================== */

/* Ana Banner Kutusu (Ana sayfa gibi kocaman, tam ekran yüksekliğinde) */
.enerjisa-hero-banner {
    position: relative;
    width: 100%;
    height: 85vh; /* Ekran yüksekliğinin %85'ini kaplar, devasa kurumsal duruş */
    min-height: 550px;
    overflow: hidden; /* Dışarı taşan animasyonları gizler */
    display: flex;
    align-items: center; /* Yazıları dikeyde tam ortalar */
    justify-content: flex-start;
    box-sizing: border-box;
    background-color: #000000;
}

/* 1. FOTOĞRAFIN UZAKLAŞMA (ZOOM-OUT) ANİMASYON KATMANI */
.banner-bg-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    
    /* Başlangıçta fotoğraf büyük (yakın) durur */
    transform: scale(1.15); 
    
    /* Sayfa açıldığında tetiklenecek akıcı uzaklaşma efekti */
    animation: kurumsalUzaklas 3.5s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

@keyframes kurumsalUzaklas {
    to {
        transform: scale(1); /* Fotoğraf yavaşça orijinal boyutuna geri çekilir */
    }
}

/* 2. YAZILARIN SONRADAN YUKARI KAYARAK GELMESİ (FADE-IN UP) */
.banner-hero-content {
    position: relative;
    z-index: 2; /* Fotoğrafın üstünde kalması için */
    padding: 0 5%;
    max-width: 850px;
    box-sizing: border-box;
    text-align: left;
    
    /* Başlangıçta yazılar görünmez ve 40px aşağıda bekler */
    opacity: 0;
    transform: translateY(40px);
    
    /* Fotoğraf oynamaya başladıktan 0.4 saniye sonra yazılar tırmanmaya başlar */
    animation: yazilariGetir 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards;
}

@keyframes yazilariGetir {
    to {
        opacity: 1;
        transform: translateY(0); /* Yazılar jilet gibi kendi yerine oturur */
    }
}

/* Tasarımı Destekleyen İnce Turuncu Çizgi */
.enerjisa-hero-banner .banner-divider {
    width: 80px;
    height: 3px;
    background-color: #ff9f43; /* Dokuz Dizayn Turuncusu */
    margin: 20px 0;
    border-radius: 2px;
}

/* Başlık Stili */
.enerjisa-hero-banner h2 {
    font-size: 3.2rem; /* Büyük ve heybetli */
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Açıklama Metni Stili */
.enerjisa-hero-banner p {
    font-size: 1.3rem;
    color: #e5e5e5;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   BANNER MOBİL CİHAZ UYUMU
   ========================================== */
@media (max-width: 768px) {
    .enerjisa-hero-banner {
        height: 65vh; /* Mobilde dikey alanı biraz daraltarak ekranı korur */
        min-height: 420px;
    }
    .enerjisa-hero-banner h2 {
        font-size: 2.2rem;
    }
    .enerjisa-hero-banner p {
        font-size: 1rem;
    }
    .enerjisa-hero-banner .banner-divider {
        margin: 15px 0;
    }
}