/*
Theme Name: PS Engineering Theme
Theme URI: http://ps-engineering.com
Author: emiran
Description: PS Engineering için özel WordPress teması.
Version: 1.1
Text Domain: ps-engineering
*/

:root {
    --eng-blue: #0A192F; 
    --eng-orange: #FF8C00;
    --light-gray: #F4F4F4;
    --white: #ffffff;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--eng-blue);
    margin: 0;
    padding: 0;
}

/* --- Global Buton Stili --- */
.btn-orange {
    background-color: var(--eng-orange) !important;
    color: var(--white) !important;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-orange:hover {
    background-color: #e65c00 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- Hizmet Kartları --- */
.custom-hizmet-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    background: var(--white);
}

.custom-hizmet-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.hizmet-icon i {
    font-size: 3rem;
    color: var(--eng-blue);
    transition: 0.3s;
}

.custom-hizmet-card:hover .hizmet-icon i {
    color: var(--eng-orange);
}

/* --- Dropdown Menü Yapısı --- */
.navbar-nav .sub-menu {
    display: none;
    position: absolute;
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    list-style: none;
    padding: 10px 0;
    margin-top: 0;
    border-top: 3px solid var(--eng-orange);
    z-index: 1000;
}

.navbar-nav .menu-item-has-children:hover > .sub-menu {
    display: block;
}

.sub-menu li a {
    color: var(--eng-blue) !important;
    padding: 8px 20px;
    display: block;
    text-decoration: none;
    transition: 0.3s;
}

/* --- Dil Seçici --- */
.language-switcher-wrapper ul {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-switcher-wrapper .lang-item a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    opacity: 0.6;
}

.language-switcher-wrapper .lang-item.current-lang a {
    color: var(--eng-orange);
    opacity: 1;
    border-bottom: 2px solid var(--eng-orange);
}

/* --- Harita ve Sayfa İçi Kaydırma --- */
html {
    scroll-behavior: smooth;
}

.contact-map-section .ratio {
    height: 400px;
}

.contact-map-section iframe {
    filter: grayscale(10%) contrast(1.1);
    border-radius: 15px;
    width: 100%;
    height: 100%;
}

/* --- Profesyonel Navigasyon Güncellemesi --- */
@media (min-width: 992px) {
    /* Hizmetler ve Ürünler için Büyük Harf Zorunluluğunu Kaldırdık */
    .navbar-nav .nav-link {
        text-transform: none !important; 
        padding: 10px 15px !important;
        font-weight: 500;
    }

    /* Tüm Menü Öğeleri Arasına Eşit Ayraç (|) Ekliyoruz */
    .navbar-nav > .nav-item {
        position: relative;
    }

    .navbar-nav > .nav-item:not(:last-child):after {
        content: "|";
        color: #ddd;
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 300;
        pointer-events: none;
    }

    /* Hover'da Kırmızı Kutu Efekti (Görsel 1) */
    .navbar-nav .nav-item:hover > .nav-link {
        background-color: #e30613 !important;
        color: #ffffff !important;
        border-radius: 4px;
    }

    /* Dropdown Menülerin (Açılır Liste) Üzerine Gelince Açılması */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block !important;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        border-radius: 0;
        background-color: #050d1a !important; /* Koyu Lacivert Popup */
        border-top: 3px solid #FF8C00 !important;
        min-width: 250px;
        padding: 0;
        margin: 0;
    }
}

/* Alt Menü Linkleri */
.dropdown-item {
    font-size: 13px;
    font-weight: 500;
    padding: 12px 20px;
    color: #ffffff !important;
    text-transform: none !important; /* Alt menülerde de büyük harf zorunluluğu yok */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dropdown-item:hover {
    background-color: #e30613 !important;
    color: #ffffff !important;
    padding-left: 25px;
}

/* --- Dil Seçici Hover Ayarları --- */
.language-dropdown:hover > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
    transform: translateY(0);
}

.language-dropdown .dropdown-menu {
    min-width: 140px;
    background-color: #050d1a !important;
}

.language-dropdown .dropdown-item {
    padding: 10px 15px;
    font-size: 12px;
    text-transform: none; /* Dil kısaltmaları büyük kalabilir */
}

/* Mobilde dil seçici düzeni */
@media (max-width: 991px) {
    .language-dropdown {
/*        border-start: none !important;*/
        padding-right: 0 !important;
        margin-top: 15px;
    }
}
/* Slider Arka Plan Ayarları */
.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Bootstrap Fade Efektini Yumuşatalım */
.carousel-fade .carousel-item {
    transition-duration: 1.5s ease-in-out !important;
    transition-property: opacity;
}

/* Gösterge Noktaları (Turuncu Yapalım) */
.carousel-indicators [button] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
}

.carousel-indicators .active {
    background-color: var(--eng-orange) !important;
    opacity: 1;
}

/*logo slide*/
.logo-marquee {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
}

.logo-track {
    display: flex;
    width: max-content; /* İçerik kadar genişle */
    animation: scrollLogos 60s linear infinite;
}

/* Logoları taşıyan eşit boyutlu esnek kutular */
.logo-item {
    width: 180px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px; /* Logolar arası emniyet şeridi */
    box-sizing: border-box;
    flex-shrink: 0; /* Kutuların mobilde veya sıkışmada büzülmesini engeller */
}

/* Kutunun sınırlarına göre kendini oranlayan logolar */
.logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Sünme/basılmayı engeller, orijinal oranı korur */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: default;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Tam yarısında kusursuz başa döner */
}

/* Sayfalama Kapsayıcı */
.reference-pagination ul {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.375rem;
    gap: 5px;
}

/* Sayfa Numaraları */
.reference-pagination ul li a, 
.reference-pagination ul li span {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: var(--eng-blue); /* Sitenin ana mavi tonu */
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    border-radius: 5px;
}

/* Üzerine Gelince (Hover) */
.reference-pagination ul li a:hover {
    background-color: #f8f9fa;
    color: #000;
    border-color: #dee2e6;
}

/* Aktif (O an bulunulan) Sayfa */
.reference-pagination ul li span.current {
    z-index: 3;
    color: #fff;
    background-color: var(--bs-danger); /* Sitenin vurgu rengi (Örn: Turuncu veya Kırmızı) */
    border-color: var(--bs-danger);
}

/* Pasif Durumlar */
.reference-pagination ul li span.dots {
    background-color: transparent;
    border: none;
}
/* =========================================
   Dinamik Yüzdelik Konteyner Ayarı
   ========================================= */
@media (min-width: 1200px) {
    .container {
        max-width: 90%; /* Kalan %8'lik boşluk sağı ve solu eşit hizalar */
    }
}
/* =========================================
   Header ve Menü Yazı Boyutları
   ========================================= */

/* 1. Ana Menü Linkleri (Sayfa İsimleri) */
.navbar .nav-link {
    font-size: 20px !important; /* Varsayılan genelde 16px'tir. Gözüne göre 17px veya 19px yapabilirsin. */
    font-weight: 500 !important; /* Yazıyı büyütünce cılız durmaması için biraz toklaştırıyoruz. */
}

/* Açılır Menü (Dropdown) İçindeki Alt Linkler (Eğer varsa) */
.dropdown-menu .dropdown-item {
    font-size: 16px !important;
}

/* 2. Üst Bilgi Çubuğu (Telefon, Mail vb. kısımlar için - sınıf adın farklıysa ona göre güncelleyebilirsin) */
.top-bar, .header-top, .top-header {
    font-size: 15px !important;
}

/* Masaüstünde Hover ile çalışma (Bootstrap standartlarını da ekledik) */
@media (min-width: 992px) {
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:hover > .dropdown-menu,
    .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }
}

/* Mobilde sadece Tıklama ile çalışma (GÜÇLENDİRİLMİŞ VERSİYON) */
@media (max-width: 991px) {
    /* Başlangıçta tüm alt menüleri gizle */
    .menu-item-has-children > .sub-menu,
    .dropdown > .dropdown-menu {
        display: none !important;
    }
    
    /* JS tarafından mobile-open eklendiğinde göster - DOĞRUDAN VEYA DOLAYLI TÜM ÇOCUKLARI KAPSAR */
    .mobile-open .sub-menu,
    .mobile-open .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        animation: fadeIn 0.3s ease;
        position: static !important;
        float: none !important;
        margin-top: 0 !important;
        background-color: #ffffff; /* Arka planı şeffaf kalmasın diye beyaz yaptık */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobilde açılır menü (dropdown) içindeki linklerin rengi ve tasarımı */
@media (max-width: 991px) {
    .mobile-open .sub-menu a,
    .mobile-open .dropdown-menu a {
        color: #050d1a !important; /* Temanın kendi koyu lacivert/siyah rengi */
        padding: 10px 15px !important;
        display: block;
        border-bottom: 1px solid #f0f0f0; /* Linkler arasına hafif bir çizgi */
        font-weight: 500;
    }

    /* En alttaki linkin alt çizgisini kaldır */
    .mobile-open .sub-menu li:last-child a,
    .mobile-open .dropdown-menu li:last-child a {
        border-bottom: none;
    }

    /* Mobilde menü linkine dokunulduğunda temanın turuncu rengi olsun */
    .mobile-open .sub-menu a:hover,
    .mobile-open .dropdown-menu a:hover,
    .mobile-open .sub-menu a:active,
    .mobile-open .dropdown-menu a:active {
        color: var(--eng-orange) !important;
        background-color: #f8f9fa !important; /* Hafif gri dokunma efekti */
        padding-left: 20px !important; /* Tıklayınca hafif sağa kaysın (hover-orange efekti gibi) */
        transition: 0.3s;
    }
}

/* 1. Header'ı ve tüm menüleri en üst katmana (z-index) sabitliyoruz */
.main-header {
    z-index: 9999 !important;
}

.main-header .dropdown-menu, 
.main-header .sub-menu {
    z-index: 10000 !important;
}

/* 2. Get In Touch Kartının katmanını düşürüp sabitleme mesafesini ayarlıyoruz */
/* DİKKAT: '.get-in-touch-kartin' yazan yeri kartının gerçek class adı ile değiştir */
.get-in-touch-kartin {
    position: sticky !important;
    z-index: 99 !important; /* Menülerin altında (9999'dan küçük) kalmasını sağlar */
    top: 110px !important; /* Header'ın yüksekliği kadar bir boşluk bırakarak sabitlenir */
}