/* =====================================================
   AYGÜN LOJİSTİK - ANA STİL DOSYASI
   ===================================================== */

/* KAYDIRMA ÇUBUĞUNU GİZLEME (Scrollbar Hide) */
::-webkit-scrollbar { display: none; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }

/* 1. EFSANEVİ PRELOADER ANİMASYONLARI */
#preloader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.8s;
}

.truck-body { animation: truckBounce 0.4s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes truckBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }

.wheel { animation: spin 0.6s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.road-line { stroke-dasharray: 20 40; animation: moveRoad 0.8s linear infinite; }
@keyframes moveRoad { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 60; } }

.wind-line { stroke-dasharray: 10 30; animation: windBlow 1s linear infinite; opacity: 0; }
.wind-1 { animation-delay: 0s; animation-duration: 0.8s; }
.wind-2 { animation-delay: 0.3s; animation-duration: 1.2s; }
.wind-3 { animation-delay: 0.1s; animation-duration: 0.9s; }
@keyframes windBlow { 0% { transform: translateX(50px); opacity: 0; } 20% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { transform: translateX(-150px); opacity: 0; } }

/* 2. DİNAMİK YÜZEY VE SCROLL EFEKTLERİ */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(11, 36, 71, 0.05);
}

.reveal-element {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-element.active { opacity: 1; transform: translateY(0) scale(1); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

.bg-blob { position: absolute; filter: blur(80px); z-index: 0; animation: float 10s ease-in-out infinite alternate; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, -50px) scale(1.1); } }

/* 3. KAYAN ŞEHİRLER BANDI & YORUMLAR */
.marquee-wrapper {
    display: flex; width: 100%; overflow: hidden; background-color: #0B2447;
    border-top: 1px solid rgba(0, 223, 162, 0.2); border-bottom: 1px solid rgba(0, 223, 162, 0.2);
}
.marquee-content { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; min-width: 100%; animation: scrollMarquee 20s linear infinite; }

.pause-on-hover { display: flex; width: 100%; overflow: hidden; position: relative; padding: 3rem 0; }
.pause-on-hover:hover .testimonial-track { animation-play-state: paused; }
.testimonial-track { display: flex; flex-shrink: 0; min-width: 100%; gap: 2rem; padding-right: 2rem; animation: scrollMarquee 45s linear infinite; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* 4. LEAFLET HARİTA ÖZELLEŞTİRMELERİ */
.leaflet-popup-content-wrapper { border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(11, 36, 71, 0.2); }
.leaflet-popup-content { margin: 16px; text-align: center; }
.leaflet-popup-tip { background: #fff; }

/* 5. FRİGO / SOĞUK ZİNCİR KARTI - KAR TANESİ ANİMASYONU
   (orijinal dosyada "Hizmetler" bölümündeki ilk kartın içine
   gömülü olan <style> bloğu buraya taşındı) */
@keyframes float-snow {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    15% { opacity: 0.6; }
    85% { opacity: 0.6; }
    100% { transform: translateY(280px) rotate(180deg); opacity: 0; }
}
@keyframes sway-snow {
    0%, 100% { margin-left: 0px; }
    50% { margin-left: 15px; }
}
.snow-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; border-radius: inherit;
}
.snow-item {
    position: absolute; color: #38bdf8;
    animation: float-snow linear infinite, sway-snow ease-in-out infinite;
    transition: all 0.5s ease;
    user-select: none;
}
.group:hover .snow-item {
    color: #cffafe;
    filter: drop-shadow(0 0 6px rgba(207, 250, 254, 0.8));
}
.snow-dust { background-color: currentColor; border-radius: 50%; }
/* =====================================================
   YORUMLAR BÖLÜMÜ - UÇUŞAN SOHBET BALONLARI
   ===================================================== */
/* Balonların opaklığını %8'den %15'e çıkarıyoruz, daha belirgin olacaklar */
@keyframes float-bubble {
    0% { transform: translateY(80px) scale(0.8) rotate(-5deg); opacity: 0; }
    20% { opacity: 0.15; } 
    80% { opacity: 0.15; }
    100% { transform: translateY(-80px) scale(1.1) rotate(5deg); opacity: 0; }
}

.bubble-anim {
    animation: float-bubble 8s infinite linear;
}

/* Farklı balonların aynı anda çıkmaması için süre ve gecikme ayarları */
.bubble-delay-1 { animation-delay: 0s; animation-duration: 9s; }
.bubble-delay-2 { animation-delay: 2s; animation-duration: 12s; }
.bubble-delay-3 { animation-delay: 5s; animation-duration: 8s; }
.bubble-delay-4 { animation-delay: 7s; animation-duration: 14s; }
.bubble-delay-5 { animation-delay: 3s; animation-duration: 10s; }
/* =====================================================
   6. FOOTER PREMİUM KAMYON ANİMASYONU
   ===================================================== */
.footer-truck-wrapper {
    /* 25 saniyede bir tüm turu tamamlar, bezier eğrisi ile duruş kalkışları pürüzsüzdür */
    animation: footerTruckMove 25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    transform-origin: center;
    z-index: 30;
}

.footer-truck-body {
    /* Preloader'daki gibi ama daha hafif, mikro bir yol sarsıntısı */
    animation: footerTruckBounce 0.35s ease-in-out infinite alternate;
    transform-origin: bottom;
}

.footer-wheel {
    /* Tekerleklerin kendi ekseninde dönme efekti */
    animation: footerWheelSpin 0.4s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/* Kamyonun Sağa Gitmesi, Yavaşlayıp Dönmesi ve Sola Dönmesi (Premium Akış) */
@keyframes footerTruckMove {
    0% { left: 0%; transform: scaleX(1); }
    /* %0 - %42 arası: Sağa doğru pürüzsüzce ilerler */
    42% { left: calc(100% - 50px); transform: scaleX(1); }
    /* %42 - %46 arası: Sağ uçta yavaşlar, durur ve kibarca sola doğru yön değiştirir (Ayna efekti) */
    46% { left: calc(100% - 50px); transform: scaleX(-1); }
    /* %46 - %88 arası: Sola doğru geri döner */
    88% { left: 0%; transform: scaleX(-1); }
    /* %88 - %92 arası: Sol uçta durur ve tekrar başlangıç pozisyonuna (sağa) döner */
    92% { left: 0%; transform: scaleX(1); }
    100% { left: 0%; transform: scaleX(1); }
}

/* Tekerlek Dönüş Animasyonu */
@keyframes footerWheelSpin {
    100% { transform: rotate(360deg); }
}

/* Gerçekçi Yol Sarsıntı Animasyonu */
@keyframes footerTruckBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1px); }
}
/* =====================================================
   GENEL YÜK NAKLİYESİ KARTI - HIZ / RÜZGAR ÇİZGİLERİ
   ===================================================== */
.speed-lines-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; border-radius: inherit;
    overflow: hidden;
}

.speed-line {
    position: absolute; right: -100px;
    background-color: currentColor;
    border-radius: 9999px;
    color: #cbd5e1; /* Normal durumda çok hafif gri */
    opacity: 0;
    animation: speed-flow linear infinite;
    transition: all 0.5s ease;
}

.group:hover .speed-line {
    color: #00DFA2; /* Hover anında temanın neon yeşili */
    filter: drop-shadow(0 0 6px rgba(0, 223, 162, 0.6));
}

@keyframes speed-flow {
    0% { transform: translateX(50px); opacity: 0; }
    15% { opacity: 0.6; }
    85% { opacity: 0.6; }
    100% { transform: translateX(-400px); opacity: 0; }
}
/* =====================================================
   KEN BURNS SİNEMATİK ANİMASYONLAR (Smooth Süzülme)
   ===================================================== */
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    /* Başlangıçta biraz daha fazla zoom yapıyoruz ki küçülme efekti hissedilsin */
    transform: scale(1.25); 
}

/* 1. Efekt: Soldan Sağa Süzülerek Uzaklaşma */
@keyframes kenBurnsRight {
    0% { transform: scale(1.25) translateX(-4%); }
    /* Tam 1.0 boyutuna kadar küçülüyor */
    100% { transform: scale(1.0) translateX(2%); }
}

/* 2. Efekt: Sağdan Sola Süzülerek Uzaklaşma */
@keyframes kenBurnsLeft {
    0% { transform: scale(1.25) translateX(4%); }
    100% { transform: scale(1.0) translateX(-2%); }
}

/* 3. Efekt: Merkezden Dümdüz Uzaklaşma */
@keyframes kenBurnsCenter {
    0% { transform: scale(1.25); }
    100% { transform: scale(1.0); }
}

/* Süreyi tam slayt geçiş süresine (7.5 saniye) eşitliyoruz */
.hero-slide:nth-child(3n+1) img.animate-kb {
    animation: kenBurnsRight 7.5s linear forwards;
}
.hero-slide:nth-child(3n+2) img.animate-kb {
    animation: kenBurnsLeft 7.5s linear forwards;
}
.hero-slide:nth-child(3n+3) img.animate-kb {
    animation: kenBurnsCenter 7.5s linear forwards;
}

/* İMLEÇ ÜZERİNE GELİNCE HAREKETİ DONDUR */
#hero-slider:hover .hero-slide img.animate-kb {
    animation-play-state: paused;
}
/* =====================================================
   İLETİŞİM BÖLÜMÜ - DİNAMİK YÜKSELME (Sıvı Geçiş)
   ===================================================== */
#iletisim {
    /* Geçişin yumuşak (smooth) olması için animasyon süresi */
    transition: margin-top 0.8s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================
   AYG BLUE PALETTE COMPATIBILITY FIX
   Yerel Tailwind derlemesinde bulunmayan mavi yardımcı
   sınıfları tamamlar.
   ===================================================== */

.bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-900\/50 {
    background-color: rgb(30 58 138 / 0.5);
}

.border-blue-100 {
    --tw-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.decoration-blue-200 {
    text-decoration-color: #bfdbfe;
}

.text-blue-200 {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.to-blue-400 {
    --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}

.shadow-blue-900\/5 {
    --tw-shadow-color: rgb(30 58 138 / 0.05);
    --tw-shadow: var(--tw-shadow-colored);
}

/* Hizmetler panelindeki "Akış" görünümü. Tailwind derlemesinden bağımsızdır. */
.services-flow {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.25rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.services-flow-card {
    min-width: 86%;
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .services-flow-card { min-width: 68%; }
}
@media (min-width: 1024px) {
    .services-flow-card { min-width: calc(50% - 1.5rem); }
}

/* ===== Navbar AYG Logo Entegrasyonu ===== */
.ayg-navbar-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 3px;
    line-height: 1;
    text-decoration: none;
}

.ayg-navbar-logo-mark {
    display: block;
    width: auto;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
}

.ayg-navbar-logo-text {
    display: inline-block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #0f172a;
    white-space: nowrap;
    transform: translateY(0.5px);
}

@media (max-width: 640px) {
    .ayg-navbar-brand {
        gap: 2px;
    }

    .ayg-navbar-logo-mark {
        height: 21px;
    }

    .ayg-navbar-logo-text {
        font-size: 19px;
        letter-spacing: -0.04em;
        transform: translateY(0);
    }
}

/* ===== Mobil Menü Marka Başlığı ===== */
.ayg-mobile-menu-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4px;
}

.ayg-mobile-menu-logo {
    display: block;
    width: auto;
    height: 46px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ayg-mobile-menu-title {
    margin-top: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.96);
}

.ayg-mobile-menu-divider {
    display: block;
    width: 72px;
    height: 1px;
    margin-top: 16px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
}

/* ===== Erişilebilir Klavye Odak Görünümü ===== */
:where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus {
    outline: none;
}

:where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid rgba(0, 223, 162, 0.95);
    outline-offset: 4px;
    border-radius: 10px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow:
        0 0 0 3px rgba(0, 223, 162, 0.18),
        0 0 0 1px rgba(0, 223, 162, 0.75);
}