/* Place Your Custom Styles Here */

/*------------------------------------------------------
[Slogan Slider] — TD0004

Hero'da countdown'ın yerine gelen dönen slogan alanı.
Bootstrap 5 Carousel (carousel-fade) üzerine kurulu; ayrı bir
JS/CSS bağımlılığı yok.

Not: Sloganların satır sayısı ekran genişliğine göre 2-3 arasında
değişiyor. Konteynere sabit bir min-height verilmezse her geçişte
altındaki form yukarı/aşağı zıplar (CLS). Aşağıdaki clamp değerleri
en uzun slogan ("Eğitim bir maliyet kalemi değil, en yüksek getirili
yatırım.") 360px / 768px / 1440px'de ölçülerek belirlendi.
------------------------------------------------------*/

.slogan-slider {
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;

    /* Geçiş süresini tek yerden ayarlamak için. 1s yumuşak ama uyuşuk
       değil; 1.4s'e kadar çıkılabilir, ötesi ağır hissettiriyor. */
    --slogan-fade: 1s;
}

/*
Yumuşak geçiş — Bootstrap'in varsayılan crossfade'inin üzerine yazıyoruz.

Bootstrap varsayılanında giden slide sönmüyor: `opacity 0s .6s` ile tam
opaklıkta arkada bekleyip 0.6sn sonra anlık kesiliyor, gelen slide de
onun üstünde beliriyor. 0.6sn'de göze çarpmıyor ama süreyi uzatınca iki
slogan uzun süre üst üste okunur hâle geliyor.

Çözüm: giden slide'ı gerçekten söndürüyoruz ve iki tarafa birbirini
tamamlayan easing veriyoruz — giden hızlı kaybolur (ease-out), gelen geç
belirir (ease-in). Böylece süre uzasa da üst üste binme neredeyse sıfır.
İki tarafın süresi eşit tutuldu; Bootstrap'in slide-bitti callback'i
transition süresini elementten okuduğu için farklı süreler vermek
carousel'in iç zamanlamasını bozardı.
*/

/* Gelen slide: geç başlar, yumuşakça belirir */
.slogan-slider.carousel-fade .carousel-item {
    transition-property: opacity;
    transition-duration: var(--slogan-fade);
    transition-timing-function: cubic-bezier(0.7, 0, 1, 1);
}

/* Giden slide: hemen sönmeye başlar, sona doğru yavaşlar */
.slogan-slider.carousel-fade .active.carousel-item-start,
.slogan-slider.carousel-fade .active.carousel-item-end {
    opacity: 0;
    transition: opacity var(--slogan-fade) cubic-bezier(0, 0, 0.3, 1);
}

/* Aktif olmayan slide'lar Bootstrap tarafından display:none yapılıyor,
   bu yüzden min-height'ı hem inner'a hem metne veriyoruz: inner boş
   kalan anlarda da yüksekliği koruyor. */
.slogan-slider .carousel-inner {
    min-height: clamp(5.5rem, 12vw, 7rem);
}

.slogan-slider .slogan-text {
    min-height: clamp(5.5rem, 12vw, 7rem);
    margin: 0;
    padding: 0 0.5rem;

    /* Metni kendi alanı içinde dikey ortala. Flex'i .carousel-item'a
       değil <p>'ye veriyoruz — carousel-item'ın display'ini ezersek
       Bootstrap'in slide gösterme/gizleme mantığı bozulur. */
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Nunito", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(1.35rem, 3.6vw, 2.5rem);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.slogan-teaser {
    margin-bottom: 0;
    opacity: 0.85;
}

/*------------------------------------------------------
[Site Brand] — TST0001 Senaryo 3, Adım 6

Mobilde tespit edilen iki kusur birlikte düzeltildi:

1) LOGO MOBİLDE KÜÇÜK KALIYORDU. Eski değer `clamp(1.8rem, 7vw, 75px)`
   idi. 390px'lik bir telefonda 7vw = 27px, yani tercih edilen değer
   tabanın (1.8rem ≈ 29px) altında kaldığı için logo bütün telefonlarda
   29px'e çakılıyordu — masaüstündeki 75px'in üçte biri. Sorun TAVANDA
   değil TABANDA olduğu için `vw` katsayısını büyütmek tek başına
   yetmezdi; taban 3.25rem'e çekildi. Yeni davranış: 360-430px arası
   ≈54-65px, masaüstünde yine 75px.

   Ek olarak mobilde wordmark şeridin sağ ucuna yaslandı (Hocam'ın
   isteği); md ve üzerinde logoyla yan yana dizilime dönüyor.

2) SCROLL SONRASI HEADER KAYBOLUYORDU. Blok `position-absolute` ile
   #intro'nun içine yapıştırılmıştı, dolayısıyla sayfayla birlikte
   yukarı kayıyordu. Masaüstünde içerik `min-vh-100` ile ekrana sığdığı
   için fark edilmiyordu; mobilde içerik uzayınca logo ekrandan
   çıkıyordu. Artık `position: fixed`.

z-index 1030 = Bootstrap'in fixed-top seviyesi. Modal (1055) ve
backdrop'ın (1050) ALTINDA kalması bilinçli: KVKK/detay modalı açıkken
logonun önde durmaması gerekiyor.
------------------------------------------------------*/

.site-brand {
    z-index: 1030;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;

    /* Mobilde logo sol kenarda, wordmark sağ kenarda dursun (Hocam'ın
       isteği) — dar ekranda ikisi yan yana sıkışmak yerine şeridin iki
       ucuna yaslanıyor. md ve üzerinde klasik yan yana dizilime dönüyor. */
    justify-content: space-between;

    /* Şerit tam genişlikte ama tepedeyken saydam. İçerik hero'nun üst
       bandına denk geldiğinde tıklamaları yutmasın diye olaylar sadece
       çocuklarda açık. */
    pointer-events: none;
    background-color: transparent;
    transition: background-color 0.3s ease-out, padding 0.3s ease-out;
}

.site-brand > * {
    pointer-events: auto;
}

@media (min-width: 768px) {
    .site-brand {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }
}

/* Mobil taban bilinçli olarak yüksek: 390px'lik bir telefonda 15vw ≈ 59px.
   Tavan 75px'e 500px genişlikte ulaşılıyor, yani tablet ve üstünde
   masaüstü boyutu geçerli. */
.site-brand-logo {
    height: clamp(3.25rem, 15vw, 75px);
    width: auto;
    transition: height 0.3s ease-out;
}

/* Wordmark'ın katsayısı (5vw) logonunkinden (12vw) düşük tutuluyor ki
   logo her ekran genişliğinde yazıdan baskın kalsın — TD0001-1 kararı. */
.site-brand-name {
    font-size: clamp(1.15rem, 5vw, 2.5rem);
    transition: font-size 0.3s ease-out;
}

/* Sayfa tepeden ayrılınca: arkaya zemin gelir (slideshow'un açık
   kareleri üzerinde beyaz yazı okunmuyordu) ve blok bir tık küçülür ki
   mobilde içeriğin üstünü fazla kapatmasın. */
.site-brand.is-scrolled {
    background-color: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.site-brand.is-scrolled .site-brand-logo {
    height: clamp(2.5rem, 11vw, 56px);
}

.site-brand.is-scrolled .site-brand-name {
    font-size: clamp(1rem, 4vw, 1.75rem);
}

/*------------------------------------------------------
[Site Footer]

TalentP.AI_MVP4'teki `.landing-footer` şeridinin bu projeye uyarlaması:
solda telif + sürüm, sağda bağlantılar, ince ve sessiz bir bar.

Oradaki footer sayfa akışının sonunda duruyor çünkü orası çok sayfalı bir
uygulama. Burası tek ekranlık bir coming-soon sayfası ve arkada tam ekran
slideshow dönüyor; akışın sonuna konsa 100vh'lik hero'nun altında kalır,
kimse görmez. Bu yüzden üstteki logo şeridiyle simetrik olacak şekilde
`fixed` — sayfa kaydırılsa da yerinde kalıyor.

Zemin yarı saydam + blur: altındaki fotoğraf değiştikçe metin okunur
kalsın diye. Aynı dili `.site-brand.is-scrolled` de kullanıyor.
------------------------------------------------------*/

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 8px 20px;
    background-color: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-footer-version {
    color: #0d6efd;
    font-weight: 600;
    font-size: 11px;
    margin-left: 4px;
}

/* Sosyal ikonlar en sağda, kendi aralarında metin bağlantılarından daha sık
   duruyor — ikon ikon değil, bir grup gibi okunsunlar. */
.site-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.site-footer-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #ffffff;
}

/* Dar ekranda tek sütuna dönüyor; yükseklik arttığı için hero içeriğinin
   alt boşluğu da (aşağıdaki kural) buna göre açılıyor. */
@media (max-width: 767.98px) {
    .site-footer {
        padding: 6px 12px;
        flex-direction: column;
        text-align: center;
        gap: 4px;
        font-size: 11px;
    }

    .site-footer-right {
        justify-content: center;
        gap: 12px;
    }
}

/* Sabit şerit hero'nun altını kapatmasın diye hero'nun yüksekliği şerit kadar
   kısaltılıyor. Bootstrap'in `min-vh-100` yardımcı sınıfını eziyoruz; custom.css
   en son yüklendiği için aynı özgüllükte kazanıyor.
   İçeriğin dolgusuna (py-9/py-lg-12) dokunulmuyor — dikey ortalama bozulmasın.
   Footer'ın dolgusu değişirse buradaki değerler de güncellenmeli. */
.intro-content-inner.min-vh-100 {
    min-height: calc(100vh - 56px);
}

@media (max-width: 767.98px) {
    .intro-content-inner.min-vh-100 {
        min-height: calc(100vh - 76px);
    }
}

/* Bootstrap'in kendi reduced-motion kuralları var ama yukarıdaki
   override'larımız onlardan daha spesifik olduğu için burada aynı
   spesifiklikle tekrar susturuyoruz. Bu blok dosyanın sonunda kalmalı. */
@media (prefers-reduced-motion: reduce) {
    .slogan-slider.carousel-fade .carousel-item,
    .slogan-slider.carousel-fade .active.carousel-item-start,
    .slogan-slider.carousel-fade .active.carousel-item-end {
        transition: none;
    }

    .site-brand,
    .site-brand-logo,
    .site-brand-name {
        transition: none;
    }
}