/* FSD Acenta — site.css
   Only what Tailwind CDN utilities cannot express. Theming/colors rely on the
   verbatim tailwind.config in _Layout.cshtml. Keep this minimal. */

/* Frosted glass surfaces — backdrop-filter with a Safari fallback prefix
   (Tailwind CDN emits backdrop-blur but not the -webkit- prefix reliably). */
.glass {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Punch-hole color must follow the active theme background so the cut-out
   illusion holds in both themes (light = cloud-white #F8FAFC, dark = primary
   #0f141b). Driven entirely by CSS — no inline color on the punch divs. */
.punch-hole-top,
.punch-hole-bottom {
    background-color: #F8FAFC;
}
.dark .punch-hole-top,
.dark .punch-hole-bottom {
    background-color: #0f141b;
}
/* Rezervasyon özeti (boarding-pass) kartı: koyu temada kenar delikleri BEYAZ okunsun
   (kart zemini primary-container #1b2230 üzerinde siyah daireler kaybolmasın). Yalnız .bp-panel
   kapsamında — Login/diğer perforasyon kullanımları etkilenmez. */
.dark .bp-panel .punch-hole-top,
.dark .bp-panel .punch-hole-bottom {
    background-color: #F8FAFC;
}
/* Boarding-pass kenar delikleri YARI boyut (24px -> 12px) — yalnız .bp-panel; Login etkilenmez.
   (inline left/right de -6px'e çekildi; top -6px ile kesik çizgide ortalı kalır.)
   AÇIK temada delikler KOYU GRİ (#475569 slate-600) — açık kart üzerinde belirgin ama siyah değil
   (koyu temada .dark .bp-panel kuralı beyaz yapar, daha yüksek özgüllükle kazanır). */
.bp-panel .punch-hole-top,
.bp-panel .punch-hole-bottom {
    width: 12px;
    height: 12px;
    top: -6px;
    background-color: #475569;
}

/* Kart vurgu rengi (havalimanı HexRenk'i). Açık temada bölgenin kendi rengini
   kullanır; koyu temada bu renkler (ör. lacivert) zemine kaynadığından açık
   metin token'ına (primary-fixed #e6e9ef) düşülür. Inline style yerine CSS
   değişkeni kullanılır ki cascade ile tema override'ı mümkün olsun. */
.kart-vurgu {
    color: var(--kart-renk, currentColor);
}
.dark .kart-vurgu {
    color: #e6e9ef;
}

/* Dotted flight-path connector usable inside boarding-pass chips/panels. */
.flight-path-dotted {
    background-image: linear-gradient(to bottom, #94A3B8 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}
.flight-path-dotted-h {
    background-image: linear-gradient(to right, #94A3B8 50%, transparent 50%);
    background-size: 8px 2px;
    background-repeat: repeat-x;
}

/* Hide native number-input spinners for a cleaner boarding-pass aesthetic. */
input[type="number"].no-spinner::-webkit-outer-spin-button,
input[type="number"].no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].no-spinner {
    -moz-appearance: textfield;
}

/* =====================================================================================
   Boarding-pass (Yeni Rezervasyon sağ panel) canlandırma. Ev üslubuyla uyumlu kısa easing'ler;
   transform/opacity tabanlı. Hareketi azalt tercihine saygı: prefers-reduced-motion ile kapatılır.
   ===================================================================================== */
@keyframes bpIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bpDash { from { background-position-x: 0; } to { background-position-x: 8px; } }
@keyframes bpFly { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@keyframes bpFlyBack { 0%, 100% { transform: none; } 50% { transform: translateX(-5px); } }
@keyframes bpPulse { 0% { transform: scale(1); } 35% { transform: scale(1.09); text-shadow: 0 0 14px rgba(255,138,0,.55); } 100% { transform: scale(1); } }
@keyframes bpDot { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.5); opacity: 1; } }
@keyframes bpFlash { 0% { opacity: .35; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
@keyframes bpTicket { 0%, 92%, 100% { transform: rotate(0); } 95% { transform: rotate(-9deg); } 98% { transform: rotate(9deg); } }
@keyframes bpSheen { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(240%) skewX(-18deg); } }

.bp-panel { animation: bpIn .5s cubic-bezier(.2, .7, .2, 1) both; }
/* Yumuşak, dönen "ışıltı" şeridi — panelin üstünden geçer (overflow-hidden ile kırpılır).
   AÇIK tema: panel açık (#e8eef7) olduğundan beyaz ışıltı görünmez; koyu lacivet tonlu
   bir ışıltı + hafif marka mavisi kullanılır. KOYU tema: beyaz ışıltı (yüksek kontrast). */
.bp-sheen {
    position: absolute; top: 0; left: 0; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(15, 32, 67, .10) 45%, rgba(30, 144, 217, .08) 55%, transparent);
    pointer-events: none; z-index: 0;
    animation: bpSheen 5.5s ease-in-out 1s infinite;
}
.dark .bp-sheen {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
}
.bp-path { animation: bpDash 1.1s linear infinite; }
.bp-fly { animation: bpFly 2.6s ease-in-out infinite; will-change: transform; z-index: 1; }
/* Dönüş satırı: gidişin aynadaki yansıması — çizgi ve rozet TERS yöne akar. */
.bp-path-back { animation: bpDash 1.1s linear infinite reverse; }
.bp-fly-back { animation: bpFlyBack 2.6s ease-in-out infinite; will-change: transform; z-index: 1; }
.bp-pulse { animation: bpPulse .5s ease; }
.bp-flash { animation: bpFlash .35s ease; }
.bp-ticket { display: inline-block; animation: bpTicket 6s ease-in-out infinite; transform-origin: 50% 15%; }

.bp-dot { width: .45rem; height: .45rem; border-radius: 9999px; display: inline-block; animation: bpDot 1.9s ease-in-out infinite; }
.bp-dot-from { background-color: #2D6A4F; }            /* comfort-green (alış) */
.bp-dot-to { background-color: #FF8A00; animation-delay: .95s; } /* taxiway-orange (bırakış) */

@media (prefers-reduced-motion: reduce) {
    .bp-panel, .bp-sheen, .bp-path, .bp-path-back, .bp-fly, .bp-fly-back, .bp-pulse, .bp-flash, .bp-ticket, .bp-dot { animation: none !important; }
}

/* Smooth height for the dynamic ara-durak repeater rows on add/remove. */
.repeater-row {
    transition: opacity 150ms ease, transform 150ms ease;
}
.repeater-row.removing {
    opacity: 0;
    transform: translateX(12px);
}

/* Subtle scrollbar inside calendar columns. */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 9999px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================================
   fsd-select — saf JS, aranabilir/temalı select (fsd-select.js). Tom Select KALDIRILDI.
   Renkler _ThemeHead'deki tailwind.config token'larıyla birebir (CSS doğrudan hex kullanır).
   ===================================================================================== */
.fsd-select {
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Inter', sans-serif;
}
.fsd-select--auto { min-width: 11rem; }

/* Yerel <select> gizli ama formda kalır — değer/gönderim kaynağı odur. */
.fsd-select__native {
    position: absolute;
    width: 0; height: 0;
    padding: 0; margin: 0; border: 0;
    opacity: 0; overflow: hidden;
    pointer-events: none;
}

/* Görünür kontrol düğmesi */
.fsd-select__control {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.7rem;
    padding: .55rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: left;
    color: #1b1b1e;                               /* on-surface */
    background-color: #f5f3f6;                    /* surface-container-low */
    border: 1px solid rgba(197, 198, 207, .45);   /* outline-variant/45 */
    border-radius: .75rem;                        /* rounded-xl */
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fsd-select__control:hover { border-color: rgba(197, 198, 207, .85); }
.fsd-select__control:focus,
.fsd-select--open .fsd-select__control {
    outline: none;
    border-color: #FF8A00;                        /* taxiway-orange */
    box-shadow: 0 0 0 3px rgba(255, 138, 0, .3);
}
.fsd-select--disabled .fsd-select__control { opacity: .55; cursor: not-allowed; }

.fsd-select__value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    overflow: hidden;
}
.fsd-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsd-select--placeholder .fsd-select__label { color: rgba(69, 70, 78, .7); } /* on-surface-variant/70 */

.fsd-select__arrow {
    font-size: 20px;
    color: #94A3B8;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.fsd-select--open .fsd-select__arrow { transform: rotate(180deg); }

.fsd-select__dot {
    width: .6rem; height: .6rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}

/* Açılır panel — body'ye eklenir (taşma/katman sorunlarını önler) */
.fsd-select__panel {
    position: fixed;
    z-index: 11000;                               /* modallerin (z-100) üstünde */
    background: #ffffff;                          /* surface-container-lowest */
    border: 1px solid rgba(197, 198, 207, .55);
    border-radius: .75rem;
    box-shadow: 0 16px 45px rgba(15, 32, 67, .18);
    padding: .35rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fsd-select__search {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .45rem .4rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(197, 198, 207, .35);
}
.fsd-select__search .material-symbols-outlined { font-size: 18px; color: #94A3B8; flex-shrink: 0; }
.fsd-select__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: .85rem;
    color: #1b1b1e;
    padding: .2rem 0;
}
.fsd-select__input::placeholder { color: rgba(69, 70, 78, .6); }

.fsd-select__list { overflow-y: auto; overscroll-behavior: contain; }
.fsd-select__opt {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem;
    font-size: .875rem;
    color: #1b1b1e;
    border-radius: .5rem;
    cursor: pointer;
    user-select: none;
}
.fsd-select__opt-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsd-select__opt.is-active { background: rgba(255, 138, 0, .12); color: #0f141b; }
.fsd-select__opt.is-selected { font-weight: 700; }
.fsd-select__opt[aria-disabled="true"] { color: #94A3B8; cursor: default; }
.fsd-select__check { font-size: 18px; color: #FF8A00; opacity: 0; flex-shrink: 0; }
.fsd-select__opt.is-selected .fsd-select__check { opacity: 1; }

.fsd-select__group {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #45464e;
    padding: .5rem .6rem .25rem;
}
.fsd-select__empty { padding: .6rem; font-size: .82rem; color: #94A3B8; text-align: center; }

/* ---- Dark tema (arduvaz/slate — _ThemeHead token'larıyla birebir) ---- */
.dark .fsd-select__control {
    color: #e6e9ef;                              /* primary-fixed */
    background-color: #1b2230;                    /* primary-container */
    border-color: rgba(154, 163, 178, .35);       /* on-primary-container/35 */
}
.dark .fsd-select__control:hover { border-color: rgba(154, 163, 178, .6); }
.dark .fsd-select--placeholder .fsd-select__label { color: rgba(230, 233, 239, .55); }
.dark .fsd-select__panel {
    background: #1b2230;
    border-color: rgba(154, 163, 178, .35);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .5);
}
.dark .fsd-select__search { border-color: rgba(154, 163, 178, .3); }
.dark .fsd-select__input { color: #e6e9ef; }
.dark .fsd-select__input::placeholder { color: rgba(230, 233, 239, .5); }
.dark .fsd-select__opt { color: #e6e9ef; }
.dark .fsd-select__opt.is-active { background: rgba(255, 138, 0, .2); color: #ffffff; }
.dark .fsd-select__opt[aria-disabled="true"] { color: #5c6675; }
.dark .fsd-select__group { color: #9aa3b2; }
.dark .fsd-select__dot { box-shadow: 0 0 0 2px rgba(15, 20, 27, .6); }
.dark .fsd-select__arrow,
.dark .fsd-select__search .material-symbols-outlined { color: #9aa3b2; }
.dark .fsd-select__empty { color: #9aa3b2; }

/* =====================================================================================
   Mobil + TABLET kenar menü çekmecesi (drawer). Masaüstünde (>=1024px / lg) menü zaten
   sabittir; bu kurallar yalnızca < lg uygulanır (tablet dahil, mobildeki gibi çekmece).
   Tailwind transform değişken birleşimine güvenmek yerine doğrudan transform ile (kararlı)
   aç/kapat: .is-open ekle/çıkar (layout.js).
   ===================================================================================== */
@media (max-width: 1023.98px) {
    .fsd-drawer {
        transform: translateX(-100%);
        transition: transform .3s ease;
        will-change: transform;
    }
    .fsd-drawer.is-open {
        transform: translateX(0);
    }
}

/* =====================================================================================
   Kenar menü akordiyonu (nav-accordion.js). Grup başlığına (data-nav-toggle) tıklanınca
   o grubun alt linkleri (data-nav-panel) yumuşak biçimde açılır/kapanır: grid satırı
   1fr↔0fr geçişiyle yükseklik animasyonu. İç sarmal overflow:hidden + min-height:0 olmalı.
   Arama sırasında (.is-searching) tüm paneller zorla açılır ki eşleşmeler görünsün.
   ===================================================================================== */
[data-nav-panel] { grid-template-rows: 1fr; }
[data-nav-group].is-collapsed > [data-nav-panel] { grid-template-rows: 0fr; }
[data-nav-group].is-collapsed > [data-nav-toggle] .nav-chevron { transform: rotate(-90deg); }
/* Arama modunda: panelleri aç + chevron'u sıfırla (katlanmış grup da görünür olsun). */
[data-nav-list].is-searching [data-nav-panel] { grid-template-rows: 1fr !important; }
[data-nav-list].is-searching .nav-chevron { transform: none !important; }
/* İlk yüklemede başlangıç durumu anında oturur; katlanma animasyonu görünmesin. */
[data-nav-list].nav-no-anim [data-nav-panel],
[data-nav-list].nav-no-anim .nav-chevron { transition: none !important; }

/* ALT GRUP (data-nav-subgroup) — WhatsApp grubunun "Meta Cloud API" / "WhatsApp Web (QR)"
   alt menüleri (migration 135). Üst grupla AYNI mekanizma (grid 1fr↔0fr), ayrı seçiciyle:
   alt grubun kapanması üst grubun panelini ETKİLEMEZ; üst grup açıkken alt gruplardan yalnız
   içinde bulunulan sayfanınki açık gelir (nav-accordion.js). Arama modunda alt paneller de
   zorla açılır; chevron sıfırlama kuralı yukarıdaki .nav-chevron seçicisinden gelir. */
[data-nav-subpanel] { grid-template-rows: 1fr; }
[data-nav-subgroup].is-collapsed > [data-nav-subpanel] { grid-template-rows: 0fr; }
[data-nav-subgroup].is-collapsed > [data-nav-subtoggle] .nav-chevron { transform: rotate(-90deg); }
[data-nav-list].is-searching [data-nav-subpanel] { grid-template-rows: 1fr !important; }
[data-nav-list].nav-no-anim [data-nav-subpanel] { transition: none !important; }

/* Print: operasyon detayında yazdırırken sadece içerik kalsın */
@media print {
    nav, header, .no-print { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; }
}

/* =====================================================================================
   Şoför listesi — mobilde (< md) tablo yerine KART görünümü (sürücü + taşımacılar).
   Masaüstünde tablo korunur. Her satır (.sofor-row) karta dönüşür; hücreler "etiket: değer"
   olarak dizilir (data-label ::before). Ad/avatar başlık, işlem hücresi altta sağa yaslı.
   ===================================================================================== */
@media (max-width: 767.98px) {
    .sofor-tablo thead { display: none; }
    .sofor-tablo,
    .sofor-tablo tbody { display: block; width: 100%; }
    .sofor-tablo tbody { padding: .75rem; }

    /* Yükleniyor / boş / hata satırları (kart değil) blok olarak kalsın */
    .sofor-tablo tbody > tr:not(.sofor-row),
    .sofor-tablo tbody > tr:not(.sofor-row) > td { display: block; width: 100%; }

    .sofor-tablo tr.sofor-row {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        padding: .9rem;
        border: 1px solid rgba(197, 198, 207, .4);
        border-radius: 1rem;
        background: #f5f3f6;                        /* surface-container-low */
    }
    .sofor-tablo tr.sofor-row + tr.sofor-row { margin-top: .75rem; }

    .sofor-tablo tr.sofor-row td {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        border: 0;
    }
    /* Ad + avatar başlık hücresi (iç flex düzeni kendi hizalar) */
    .sofor-tablo tr.sofor-row td:first-child { display: block; padding-bottom: .5rem; }
    /* "etiket: değer" satırları */
    .sofor-tablo tr.sofor-row td[data-label] {
        justify-content: space-between;
        gap: .75rem;
        padding: .4rem 0;
        border-top: 1px solid rgba(197, 198, 207, .3);
    }
    .sofor-tablo tr.sofor-row td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: .625rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #45464e;                            /* on-surface-variant */
    }
    /* İşlem (butonlar) hücresi altta, sağa yaslı */
    .sofor-tablo tr.sofor-row td:last-child {
        justify-content: flex-end;
        padding-top: .6rem;
    }

    /* Dark tema */
    .dark .sofor-tablo tr.sofor-row {
        background: #0f141b;                        /* primary */
        border-color: rgba(154, 163, 178, .25);
    }
    .dark .sofor-tablo tr.sofor-row td[data-label] { border-top-color: rgba(154, 163, 178, .18); }
    .dark .sofor-tablo tr.sofor-row td[data-label]::before { color: #9aa3b2; } /* on-primary-container */
}

/* Karanlık temada native tarih/saat seçici ikonu (takvim/saat) siyah kalıp
   koyu zeminde kayboluyordu; ikonu açık renge çevir. */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
    opacity: .85;
}
.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="month"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Yalnız DOKUNMATİK cihazlarda görünen öğe — masraf fişi "Fotoğraf Çek" butonu
   (Views/Shared/_FisSecici.cshtml). Masaüstünde input'un capture özniteliği yok
   sayılır ve buton "Dosya Seç" ile aynı diyaloğu açardı; orada gizlenir.
   NOT: display'i BU kural yönetir — öğeye ayrıca `flex` sınıfı verme. */
.fsd-dokunmatik {
    display: none;
}
@media (pointer: coarse) {
    .fsd-dokunmatik {
        display: flex;
    }
}

/* =====================================================================================
   YÜKLENİYOR EKRANI — "KALKIŞ" (kullanıcı isteği 2026-08-28: menü geçişlerinde, girişte ve
   belge indirmede animasyonlu bir yükleniyor ekranı; 2. tur: "daha iyi animasyonlara sahip
   bir tasarım").

   SAHNE KATMANLARI (arkadan öne; hepsi 320x118 boyutlu sahnede mutlak konumlu):
     1. gökyüzü degradesi + ufuk parıltısı
     2. sürüklenen bulutlar (üç ayrı hız = paralaks derinlik)
     3. perspektifli PİST (app_offline.htm içindeki rotateX numarası) + akan orta çizgi
     4. sırayla yanan eşik ışıkları (kovalamaca)
     5. uçak + arkasında uzayıp sönen KONTRAİL
   Kart bir BİNİŞ KARTIDIR: sahne tam genişlikte akar, altında puntolu koparma çizgisi ve
   turuncu koparma tırnakları vardır (site genelindeki boarding-pass diliyle aynı).

   ÖLÇÜLER SAHNEYE GÖRE HESAPLIDIR (320x118). Uçuş eğrisini değiştirirken sahneyi taşırmayın:
   overflow:hidden uçağı SOLMADAN keser ve "kayboldu" gibi durur.

   Performans: yalnız transform / opacity / background-position canlandırılır (düzen tetiklemez).
   Döngüler KISA (1,4 - 2,1 sn) — ekran çoğu zaman yarım saniye görünür; yavaş bir animasyon
   "donmuş" izlenimi verirdi. Uzun beklemede bulutlar ve pist döngüyü canlı tutar.

   Markup: Views/Shared/_Yukleniyor.cshtml · Davranış: wwwroot/js/fsd-yukleniyor.js
   Renkler token ile birebir: taxiway-orange #FF8A00, runway-gray #94A3B8,
   marka mavisi #1E90D9, kart zemini surface-container-lowest / primary-container.
   ===================================================================================== */
.fsd-yuk {
    position: fixed;
    inset: 0;
    z-index: 200; /* bildirim popup (130) ve modallerin (100) ÜSTÜNDE */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(248, 250, 252, .72); /* cloud-white */
    -webkit-backdrop-filter: blur(9px) saturate(140%);
    backdrop-filter: blur(9px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.dark .fsd-yuk {
    background: rgba(15, 20, 27, .8); /* primary */
}
.fsd-yuk.acik {
    opacity: 1;
    visibility: visible;
}

/* ---- Kart (biniş kartı) ---- */
.fsd-yuk-kart {
    position: relative;
    width: min(320px, 100%);
    padding: 0 0 20px;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    /* Koyu temada ayrım KENARLIKLA kurulur (bkz. dark-theme-slate notu). */
    border: 1px solid rgba(15, 32, 67, .07);
    box-shadow: 0 20px 55px rgba(15, 32, 67, .2);
    opacity: 0;
    transform: translateY(14px) scale(.96);
}
.dark .fsd-yuk-kart {
    background: #1b2230;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 26px 65px rgba(0, 0, 0, .65);
}
/* Kart kaplamadan BAĞIMSIZ girer: yay benzeri easing ile yerine oturur. */
.fsd-yuk.acik .fsd-yuk-kart {
    animation: fsdYukKart .42s cubic-bezier(.2, .9, .25, 1.08) forwards;
}
@keyframes fsdYukKart {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ---- Sahne ---- */
.fsd-yuk-sahne {
    position: relative;
    height: 118px;
    overflow: hidden;
    background: linear-gradient(180deg, #dceefb 0%, #eef6fd 52%, #f7fbff 100%);
}
.dark .fsd-yuk-sahne {
    background: linear-gradient(180deg, #16233a 0%, #1a2740 55%, #202c44 100%);
}
/* Ufuk parıltısı — kalkış anının sıcak ışığı; pistin hemen üstünde durur. */
.fsd-yuk-ufuk {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 260px;
    height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 138, 0, .28), rgba(255, 138, 0, 0) 68%);
    animation: fsdYukUfuk 2.6s ease-in-out infinite;
}
@keyframes fsdYukUfuk {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* ---- Bulutlar: üç ayrı hız = paralaks. Sağdan sola akar (uçak sağa gidiyor hissi). ---- */
.fsd-yuk-bulut {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}
.dark .fsd-yuk-bulut {
    background: rgba(148, 178, 214, .16);
}
/* Her bulut, gövdesinin üstüne binen iki kabarcıkla bulut siluetine dönüşür. */
.fsd-yuk-bulut::before,
.fsd-yuk-bulut::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.fsd-yuk-bulut::before { width: 60%; height: 150%; left: 12%; bottom: 30%; }
.fsd-yuk-bulut::after  { width: 42%; height: 120%; right: 10%; bottom: 25%; }

.fsd-yuk-bulut-1 { width: 54px; height: 11px; top: 20px; animation: fsdYukBulut 7s linear infinite; }
.fsd-yuk-bulut-2 { width: 38px; height: 8px;  top: 44px; opacity: .8; animation: fsdYukBulut 11s linear infinite -3s; }
.fsd-yuk-bulut-3 { width: 68px; height: 13px; top: 8px;  opacity: .7; animation: fsdYukBulut 15s linear infinite -8s; }
@keyframes fsdYukBulut {
    from { transform: translateX(340px); }
    to   { transform: translateX(-80px); }
}

/* ---- Pist: YANDAN görünen asfalt şerit ----
   ⚠️ Burada app_offline.htm'in perspektifli pisti (rotateX) KULLANILMAZ. Denendi ve yanlıştı:
   perspektif, kameranın piste DOĞRU baktığını söyler; oysa uçağımız ekranı SOLDAN SAĞA
   kat ediyor — yandan bakış doğru kamera. Üstelik rotateX(66deg) şeridi 62px'ten ~10px'e
   eziyordu, uçak ve ışıklar pistin 20px yukarısında havada duruyordu. */
.fsd-yuk-pist {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    background: linear-gradient(180deg, #cbd5e1 0%, #aab7c8 45%, #94a3b8 100%);
    overflow: hidden;
}
.dark .fsd-yuk-pist {
    background: linear-gradient(180deg, #3a4761 0%, #2b374e 45%, #232e44 100%);
}
/* Orta çizgi çentikleri uçağın tersine akar — kalkış hızını bu verir. */
.fsd-yuk-pist-cizgi {
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 4px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .9) 0 34px, rgba(255, 255, 255, 0) 34px 68px);
    animation: fsdYukPist .7s linear infinite;
}
.dark .fsd-yuk-pist-cizgi {
    background-image: linear-gradient(90deg, rgba(226, 232, 240, .6) 0 34px, rgba(226, 232, 240, 0) 34px 68px);
}
@keyframes fsdYukPist { to { background-position-x: -68px; } }

/* ---- Eşik ışıkları: pistin ÜST kenarına dizilmiş, sırayla yanan kovalamaca ---- */
.fsd-yuk-isik {
    position: absolute;
    bottom: 16px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FF8A00; /* taxiway-orange */
    box-shadow: 0 0 9px 2px rgba(255, 138, 0, .55);
    animation: fsdYukIsik 1.4s ease-in-out infinite;
}
/* Konum ve gecikme AÇIK sınıfla verilir — :nth-of-type kullanılmaz: sahnedeki kardeşlerin
   hepsi span, sıra değişince sessizce yanlış öğeyi seçerdi. */
.fsd-yuk-isik-1 { left: 8%;  animation-delay: 0s; }
.fsd-yuk-isik-2 { left: 34%; animation-delay: .16s; }
.fsd-yuk-isik-3 { left: 62%; animation-delay: .32s; }
.fsd-yuk-isik-4 { left: 90%; animation-delay: .48s; }
@keyframes fsdYukIsik {
    0%, 100% { opacity: .18; transform: scale(.75); }
    40%      { opacity: 1; transform: scale(1.15); }
}

/* ---- Uçuş: YOL (X) ile İRTİFA+AÇI (Y/R) AYRI katmanlarda ----
   app_offline.htm içindeki flight-x / flight-y / flight-r ayrımının aynısı: aynı süreyi
   paylaşan iki animasyon faz kaymadan senkron kalır ve eğri okunur olur. */
.fsd-yuk-ucus {
    position: absolute;
    left: 20px;
    bottom: 18px;
    /* Gölge DÖNMEYEN katmanda durur: uçağın kendisine verilince rotate(90deg) ile birlikte
       dönüyor ve ışık yandan geliyormuş gibi oluyordu. */
    filter: drop-shadow(0 5px 7px rgba(15, 32, 67, .28));
    animation: fsdYukYol 2.1s cubic-bezier(.5, .02, .5, 1) infinite;
}
@keyframes fsdYukYol {
    0%   { transform: translateX(0); opacity: 0; }
    10%  { transform: translateX(12px); opacity: 1; }
    88%  { transform: translateX(268px); opacity: 1; }
    100% { transform: translateX(300px); opacity: 0; }
}

.fsd-yuk-ucak {
    display: block;
    font-size: 26px;
    line-height: 1;
    color: #1E90D9; /* marka mavisi */
    /* Glif burnu YUKARI bakar; 90 derece = yatay uçuş, 76-84 derece = tırmanış. */
    transform: rotate(90deg);
    animation: fsdYukIrtifa 2.1s cubic-bezier(.5, .02, .5, 1) infinite;
}
@keyframes fsdYukIrtifa {
    0%, 12% { transform: translateY(0) rotate(90deg); }
    30%     { transform: translateY(-16px) rotate(76deg); }
    70%     { transform: translateY(-42px) rotate(80deg); }
    100%    { transform: translateY(-58px) rotate(84deg); }
}

/* Kontrail: uçağın arkasında uzar, kuyruğa doğru söner. Uçuş katmanının İÇİNDE olduğu için
   uçakla birlikte taşınır — ayrıca konumlandırmak gerekmez. */
.fsd-yuk-iz {
    position: absolute;
    top: 12px;
    right: 20px;
    height: 3px;
    border-radius: 3px;
    transform-origin: right center;
    transform: rotate(-11deg);
    background: linear-gradient(to left, rgba(30, 144, 217, .55), rgba(169, 214, 240, 0));
    animation: fsdYukIz 2.1s cubic-bezier(.5, .02, .5, 1) infinite;
}
@keyframes fsdYukIz {
    0%, 12% { width: 0; opacity: 0; }
    35%     { width: 46px; opacity: .9; }
    80%     { width: 96px; opacity: .75; }
    100%    { width: 110px; opacity: 0; }
}

/* ---- Koparma çizgisi (biniş kartı perforasyonu) ---- */
.fsd-yuk-ayrac {
    position: relative;
    height: 1px;
    margin: 0 18px;
    border-top: 2px dashed rgba(15, 32, 67, .16);
}
.dark .fsd-yuk-ayrac {
    border-top-color: rgba(255, 255, 255, .16);
}
/* Uçlardaki turuncu tırnaklar koparma noktasını işaretler. */
.fsd-yuk-ayrac::before,
.fsd-yuk-ayrac::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FF8A00;
    opacity: .55;
}
.fsd-yuk-ayrac::before { left: -2px; }
.fsd-yuk-ayrac::after  { right: -2px; }

/* ---- Metin: üzerinden turuncu bir parıltı geçer ---- */
.fsd-yuk-metin {
    margin: 16px 20px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #45464e; /* on-surface-variant */
}
.dark .fsd-yuk-metin { color: #9aa3b2; } /* on-primary-container */
/* background-clip:text desteklenmiyorsa metin GÖRÜNMEZ olurdu — parıltı yalnız destek
   varken devreye girer, aksi hâlde düz renkli metin kalır. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .fsd-yuk-metin {
        background-image: linear-gradient(100deg, #45464e 0 42%, #FF8A00 50%, #45464e 58% 100%);
        background-size: 280% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: fsdYukParilti 2.4s linear infinite;
    }
    .dark .fsd-yuk-metin {
        background-image: linear-gradient(100deg, #9aa3b2 0 42%, #ffb457 50%, #9aa3b2 58% 100%);
        color: transparent;
    }
}
@keyframes fsdYukParilti {
    from { background-position-x: 180%; }
    to   { background-position-x: -80%; }
}

/* ---- Ayrıntı satırı (isteğe bağlı; yalnız süresiz beklemede — fsdYukleniyor.bekle) ----
   Başlık gibi büyük harf/parıltı DEĞİL: cümle okunur kalsın. Boşken [hidden] ile düşer;
   display burada VERİLMEZ, yoksa hidden özniteliğini ezer. */
.fsd-yuk-alt {
    margin: 8px 22px 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #45464e; /* on-surface-variant */
}
.dark .fsd-yuk-alt { color: #9aa3b2; } /* on-primary-container */

/* ---- Belirsiz ilerleme: pist şeridinde kayan turuncu kuyruklu yıldız ---- */
.fsd-yuk-bar {
    position: relative;
    height: 5px;
    margin: 14px 20px 0;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(148, 163, 184, .26);
}
.fsd-yuk-bar > span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255, 138, 0, 0), #FF8A00 55%, #ffc078);
    box-shadow: 0 0 12px rgba(255, 138, 0, .55);
    animation: fsdYukBar 1.35s cubic-bezier(.62, .02, .38, 1) infinite;
}
@keyframes fsdYukBar {
    from { left: -42%; }
    to   { left: 100%; }
}

/* HAREKETİ AZALT tercihine saygı (site genelindeki kuralın aynısı): uçuş, bulutlar, pist ve
   parıltı durur; ekran yine çalıştığını söyler — çubuk yavaş nefes alır. */
@media (prefers-reduced-motion: reduce) {
    .fsd-yuk-kart,
    .fsd-yuk-ufuk,
    .fsd-yuk-bulut,
    .fsd-yuk-pist-cizgi,
    .fsd-yuk-isik,
    .fsd-yuk-metin {
        animation: none;
    }
    .fsd-yuk-kart { opacity: 1; transform: none; }
    /* Uçak seyir irtifasında DURUR: hareketsiz ama anlamlı bir kalkış sahnesi kalır. */
    .fsd-yuk-ucus { animation: none; transform: translateX(140px); opacity: 1; }
    .fsd-yuk-ucak { animation: none; transform: translateY(-30px) rotate(80deg); }
    .fsd-yuk-iz   { animation: none; width: 70px; opacity: .7; }
    .fsd-yuk-bar > span {
        left: 0;
        width: 100%;
        box-shadow: none;
        animation: fsdYukNefes 1.8s ease-in-out infinite;
    }
    @keyframes fsdYukNefes {
        0%, 100% { opacity: .35; }
        50%      { opacity: 1; }
    }
}