/* wwwroot/css/site.css - FINAL FULL VERSİYON (HİZALAMA SORUNU GİDERİLDİ) */

/* --- 1. TEMEL AYARLAR --- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    /* Premium Arka Plan: Üstten aşağı hafifçe koyulaşan metalik gri */
    background: linear-gradient(to bottom, #f5f6f7 0%, #d0d4db 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #343a40;
}

/* --- 2. ANİMASYONLAR --- */

@keyframes glowing-border {
    0% {
        box-shadow: 0 0 5px rgba(176, 179, 184, 0.7);
        border-color: rgba(176, 179, 184, 0.7);
    }

    100% {
        box-shadow: 0 0 20px rgba(176, 179, 184, 0.9);
        border-color: #b0b3b8;
    }
}

@keyframes breathing-glow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 193, 7, 0);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 40px rgba(255, 193, 7, 0.4);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 193, 7, 0);
    }
}

@keyframes sea-wave {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.8);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 25px rgba(255, 193, 7, 0);
    }
}

@keyframes shine-continuous {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(25, 135, 84, 0);
        transform: scale(1.03);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
        transform: scale(1);
    }
}

/* --- 3. BİLEŞENLER --- */

.colorful-title {
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(to right, #000 0%, #ffc107 50%, #fd7e14 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    letter-spacing: 1px;
}

.title-underline {
    height: 4px;
    width: 100px;
    background-color: #ffc107;
    margin: 15px auto;
    border-radius: 2px;
}

.focus-container {
    animation: breathing-glow 3s infinite ease-in-out;
    padding: 30px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    display: inline-block;
}

.hero-container {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    border: 3px solid #b0b3b8;
    border-radius: 1rem;
    animation: glowing-border 3s infinite alternate ease-in-out;
}

    .hero-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/tirresmi1.jpeg');
        background-size: cover;
        background-position: center center;
        transform: scale(1.05);
        z-index: 0;
    }

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-title {
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 #000;
}

.hero-subtitle-box {
    background-color: rgba(0, 0, 0, 0.6);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    border-bottom: 3px solid #ffc107;
}

.btn-hero-pulse {
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 3px solid #fff;
    background-color: #ffc107;
    color: #000;
    padding: 16px 45px;
    z-index: 10;
    transition: all 0.3s ease;
    animation: sea-wave 2s infinite;
    white-space: nowrap;
}

    .btn-hero-pulse::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        animation: shine-continuous 3s infinite linear;
        pointer-events: none;
    }

.btn-custom-black {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    transition: all 0.3s ease;
}

    .btn-custom-black:hover {
        background-color: #ffeb3b;
        color: #000;
        border-color: #ffeb3b;
        transform: translateY(-3px);
    }

.card-hover-effect {
    transition: transform 0.3s ease;
    border: 2px solid #b0b3b8;
    border-radius: 0.375rem;
    animation: glowing-border 3s infinite alternate ease-in-out;
}

    .card-hover-effect:hover {
        transform: translateY(-10px);
    }

.card-img-wrapper {
    overflow: hidden;
}

.card-hover-effect .card-img-wrapper img {
    transition: transform 0.5s ease;
}

.card-hover-effect:hover .card-img-wrapper img {
    transform: scale(1.1);
}

.video-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 3px solid #b0b3b8;
    animation: glowing-border 3s infinite alternate ease-in-out;
    background-color: #000;
}

    .video-frame:hover {
        box-shadow: 0 0 30px rgba(176, 179, 184, 0.8);
        transform: scale(1.01);
        transition: all 0.3s ease;
    }

/* --- GÜNCELLENEN: GALERİ RESİMLERİ (SABİT BOYUT GARANTİSİ) --- */
.gallery-item {
    overflow: hidden;
    border-radius: 1rem;
    border: 3px solid #b0b3b8;
    animation: glowing-border 3s infinite alternate ease-in-out;
    background-color: #000;
    /* ÖNEMLİ: Kutunun yüksekliğini 400px'e kilitliyoruz */
    height: 400px;
    width: 100%;
    display: flex; /* İçindeki resim tam otursun diye */
}

    .gallery-item img {
        /* Resme "Bu kutuyu tamamen doldur" diyoruz */
        width: 100%;
        height: 100%;
        /* ÖNEMLİ: Resim boyutu farklı olsa bile, 
       resmi sündürmeden (basıklaştırmadan) kutuya sığdırır ve fazlalıkları kırpar */
        object-fit: cover;
        object-position: center; /* Resmi ortalar */

        transition: transform 0.5s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.05);
    }
/* --------------------------------------------- */

.modal-header-custom {
    background-color: #ffc107;
    color: #000;
    border-bottom: 4px solid #000;
}

.btn-pulse {
    animation: pulse-green 2s infinite;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .hero-container {
        min-height: 450px !important;
    }

    .hero-title {
        font-size: 2rem !important;
        letter-spacing: 1px;
    }

    .hero-subtitle-box p {
        font-size: 1.1rem !important;
    }

    .hero-content p.lead {
        font-size: 1rem !important;
    }

    .btn-hero-pulse {
        padding: 12px 25px !important;
        font-size: 1rem !important;
        width: 90%;
    }
    /* Video Alanı Düzenlemesi */
    .video-wrapper {
        width: 100%; /* Bulunduğu kutunun genişliğini kaplasın */
        max-width: 900px; /* Ama en fazla 900 piksel olsun, daha fazla büyümesin */
        margin: 30px auto; /* Üstten alttan boşluk bırak ve ORTALA */
        text-align: center;
        border-radius: 15px; /* Köşeleri hafif yuvarlatalım, şık dursun */
        overflow: hidden; /* Yuvarlak köşelerden taşan kısımları gizle */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Hafif bir gölge verelim */
    }

        .video-wrapper video {
            width: 100%; /* Video, oluşturduğumuz çerçevenin içini tam doldursun */
            height: auto; /* En-boy oranı bozulmasın, otomatik ayarlansın */
            display: block; /* Alt tarafta boşluk kalmasını engeller */
        }

}
/* =========================================
   YENİ PARLAYAN YAZI EFEKTİ (SHINE ANIMATION)
   ========================================= */

.shiny-text {
    /* 1. Font Ayarları */
    font-family: 'Montserrat', sans-serif; /* Güçlü, modern font */
    font-weight: 700; /* Kalın */
    text-transform: uppercase; /* Hepsi büyük harf olsun, heybetli dursun */
    letter-spacing: 1px; /* Harf aralarını biraz açalım */
    /* 2. Parlama Efekti (Sihirli Kısım) */
    background: linear-gradient( to right, #2c3e50 20%, /* Koyu lacivert (Başlangıç) */
    #3498db 40%, /* Parlak mavi (Orta) */
    #f1c40f 50%, /* ALTIN SARISI PARLAMA (Tam orta zirve) */
    #3498db 60%, /* Parlak mavi (Tekrar) */
    #2c3e50 80% /* Koyu lacivert (Bitiş) */
    );
    background-size: 200% auto; /* Arka planı genişlet ki hareket edebilsin */
    /* 3. Arka Planı Yazının İçine Hapsetme */
    color: #000; /* Yedek renk (eski tarayıcılar için) */
    background-clip: text;
    -webkit-background-clip: text; /* Yazının içini arka planla doldur */
    -webkit-text-fill-color: transparent; /* Yazının kendi rengini sil ki arkadaki parlama görünsün */
    /* 4. Animasyonu Başlat */
    animation: shineMove 4s linear infinite; /* 4 saniyede bir sürekli tekrar et */
}

/* Parlama Hareketinin Tarifi */
@keyframes shineMove {
    to {
        background-position: 200% center; /* Arka planı soldan sağa kaydır */
    }
}
/* =========================================
   VİDEO/GÖRSEL ALANI GİRİŞ KUTUSU
   ========================================= */
.intro-box-container {
    background-color: #fff; /* Beyaz arka plan */
    padding: 40px; /* İçeriden geniş boşluk */
    border-radius: 15px; /* Köşeleri yumuşat */
    /* Hafif ve şık bir gölge efekti */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Altına inşaat sarısı ince bir çizgi çekelim, şık durur */
    border-bottom: 4px solid #f1c40f;
    /* Çok geniş ekranlarda aşırı yayılmasın */
    max-width: 900px;
    /* Kutuyu sayfada ortala */
    margin-left: auto;
    margin-right: auto;
}

    /* Kutunun içindeki paragrafın ek ayarı */
    .intro-box-container p.lead {
        letter-spacing: 0.5px; /* Harfleri biraz açalım, okuması kolay olsun */
    }
/* Header'ı şeffaf ve modern yapan kod */
.custom-header {
    background-color: rgba(0, 0, 0, 0.6) !important; /* %60 şeffaf siyah */
    backdrop-filter: blur(10px); /* Arkasını hafif buzlu cam gibi yapar */
    position: absolute; /* Resmin üzerine binmesi için */
    width: 100%;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sayfa içeriğinin header altında kalmaması için */
main {
    padding-top: 0 !important;
}
/* --- ŞEFFAF MENÜ AYARLARI --- */
/* Header artık resmin üzerine binmeyecek, en üstte şerit olarak kalacak */
.custom-header {
    background-color: rgba(33, 37, 41, 0.9) !important; /* Hafif şeffaf koyu gri/siyah */
    backdrop-filter: blur(5px);
    position: relative !important; /* Absolute yerine Relative yaptık, böylece resmin üstüne binmez */
    width: 100%;
    z-index: 1000;
    margin-bottom: 0 !important; /* Resimle arasını sıfırladık */
    border-bottom: 2px solid #ffcc00 !important; /* Altına sarı ince bir çizgi ekledik, çok şık durur */
}

/* --- İÇERİĞİ AŞAĞI İTİP ORTALAMA (HERO SECTION) --- */
.hero-container {
    padding-top: 50px !important; /* Menü üstte kaldığı için bu değeri düşürdük */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 600px !important; /* İdeal kamyon yüksekliği */
    margin-top: 0 !important;
}

.hero-content {
    margin-top: 0 !important; /* Padding ile dengelediğimiz için ek margini sıfırladık */
    text-align: center;
    width: 100%;
}

/* Sayfa ana içeriğinin (main) menü tarafından ezilmemesi için */
main {
    padding-top: 0 !important;
}
/* --- YENİ MODERN HEADER TASARIMI --- */
.main-header {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
}

/* Üstteki İnce Siyah Bant */
.top-bar {
    background: #1a1a1a;
    color: #f1f1f1;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 2px solid #ffcc00; /* İnce sarı bir hat */
}

    .top-bar i {
        color: #ffcc00;
        margin-right: 5px;
    }

/* Ana Menü Alanı (Koyu Gri/Siyah Geçişli) */
.header-nav {
    background: linear-gradient(180deg, #2c2c2c 0%, #000000 100%) !important;
    padding: 15px 0 !important;
}

.brand-logo {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

    .brand-logo span {
        font-weight: 300;
        color: #ddd;
    }

.nav-link {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-left: 20px;
    transition: 0.3s;
}

    .nav-link:hover {
        color: #ffcc00 !important; /* Üzerine gelince sarı olur */
    }

/* Resim Alanını Aşağı Çekelim */
.hero-container {
    margin-top: 0 !important;
    border-top: none !important;
}
/* --- TEK PARÇA MODERN HEADER --- */
.single-main-header {
    background: linear-gradient(180deg, #1e1e1e 0%, #000000 100%) !important; /* Tek parça derinlikli siyah */
    border-bottom: 3px solid #ffcc00 !important; /* Alttaki sarı hat kurumsallığı artırır */
    padding: 12px 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 1000;
}

.brand-logo {
    font-weight: 800;
    font-size: 1.5rem;
    color: #ffcc00 !important;
}

    .brand-logo span {
        font-weight: 300;
    }

.header-contact-info .contact-item {
    font-size: 15px;
}

/* Sayfa içeriği ile arayı açalım */
.hero-container {
    margin-top: 0 !important;
}