/* ============================================================
   GTS Skeleton — kart görselleri için yumuşak shimmer
   ------------------------------------------------------------
   Görsel (R2 presigned URL, loading="lazy") yüklenene kadar
   sarmalayıcıda soldan sağa kayan hafif bir parıltı gösterilir;
   görsel yüklendiğinde parıltı yumuşakça kaybolur.

   Kullanım: img sarmalayıcısına `.gts-imgskel` sınıfını ekle.
   Sarmalayıcı `position:relative; overflow:hidden` olmalı
   (tc-img-panel / stc-img / htc-img-wrap hepsinde zaten var).

   JS: gts-skeleton.js  →  görsel yüklenince `.is-loaded` ekler.
   JS çalışmazsa: shimmer opak görselin ARKASINDA döner (görünmez)
   → sayfa yine düzgün görünür (graceful degradation).
   ============================================================ */

@keyframes gtsShimmer {
    0%   { background-position: 180% 0; }
    100% { background-position: -180% 0; }
}

/* ── Shimmer paleti — tek değişken; sayfa bağlamında override edilir ──
   Varsayılan: sıcak nötr (tur/otel liste + otel detay paletiyle uyumlu).
   Soğuk-slate sayfalar (Profil, Ana sayfa) `.gts-skel-cool` ile geçer. */
:root {
    --gts-skel-grad: linear-gradient(100deg,#e8e3de 0%,#f1ece7 20%,#fbf8f5 42%,#f1ece7 64%,#e8e3de 100%);
}
.gts-skel-cool {
    --gts-skel-grad: linear-gradient(100deg,#e2e8f0 0%,#eef2f7 20%,#f8fafc 42%,#eef2f7 64%,#e2e8f0 100%);
}

/* Görsel yüklenene kadar sarmalayıcı üstünde shimmer katmanı */
.gts-imgskel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;               /* img'in (z:0) üstünde, rozetlerin (z:3) altında */
    pointer-events: none;
    background: var(--gts-skel-grad);
    background-size: 200% 100%;
    animation: gtsShimmer 1.6s ease-in-out infinite;
}

/* Görsel yüklendi → shimmer yumuşakça kaybolur */
.gts-imgskel.is-loaded::before {
    animation: none;
    opacity: 0;
    transition: opacity .45s ease;
}

/* Erişilebilirlik: "hareketi azalt" tercihinde animasyon yok */
@media (prefers-reduced-motion: reduce) {
    .gts-imgskel::before { animation: none; }
    .gts-imgskel.is-loaded::before { transition: none; }
}


/* ============================================================
   GTS Skeleton — TAM KART hayalet grid'i (liste ilk yüklemesinde)
   ------------------------------------------------------------
   Liste sayfaları server-side render; kartlar HTML ile hazır gelir.
   Yine de ilk boyama + görsel yükleme penceresinde kısa bir
   "hayalet kart" grid'i gösterip gerçek kartlarla değiştiririz.

   Yapı (view'da):
     <div class="gts-listwrap gts-loading" data-gts-listwrap>
        <div class="gts-skelgrid"> ...hayalet kartlar... </div>       (partial)
        <div class="tours-list gts-realgrid" id="..."> ...gerçek... </div>
     </div>

   JS (gts-skeleton.js) window.load'da .gts-loading'i kaldırır
   (min ~350ms görünürlük, ~2sn güvenlik zaman aşımı).
   JS yoksa: _Layout'taki <noscript> stili gerçek grid'i hemen açar.
   ============================================================ */

/* Parıltılı temel yüzeyler */
.gts-skel,
.gts-skel-line,
.gts-skel-block,
.gts-ghost-img {
    background: var(--gts-skel-grad);
    background-size: 200% 100%;
    animation: gtsShimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}
.gts-skel-line  { height: 13px; border-radius: 6px; }
.gts-skel-title { height: 20px; }
.gts-skel-btn   { height: 40px; border-radius: 10px; width: 100%; }

/* Görünürlük durumu — SSR'da .gts-loading damgalıdır (flaş yok) */
.gts-skelgrid { display: grid; gap: 14px; }
.gts-listwrap:not(.gts-loading) .gts-skelgrid { display: none; }
.gts-loading .gts-realgrid { display: none; }

/* Gerçek kartlar açılırken yumuşak beliriş */
@keyframes gtsFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.gts-revealed .gts-realgrid { animation: gtsFadeUp .45s ease both; }

/* Hayalet kart — .tour-card layout'unu taklit eder ama o sınıfı
   KULLANMAZ (filtre/sayaç JS'i .tour-card'ı kapsamsız seçiyor). */
.gts-ghost-card {
    display: flex;
    flex-direction: row;
    border: 1px solid #E8E4DF;
    /* .tour-card ile AYNI kalmali: ayrisirsa icerik yuklenirken kose ziplar. */
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    min-height: 220px;
}
.gts-ghost-img  { width: 280px; flex-shrink: 0; border-radius: 0; }
.gts-ghost-body {
    flex: 1;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gts-ghost-side {
    width: 200px;
    flex-shrink: 0;
    border-left: 1px solid #F0ECE7;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}

/* Mobil: gerçek kartla aynı kırılma (767px) — dikey yerleşim */
@media (max-width: 767px) {
    .gts-ghost-card { flex-direction: column; min-height: 0; }
    .gts-ghost-img  { width: 100%; aspect-ratio: 16 / 9; }
    .gts-ghost-side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gts-skel, .gts-skel-line, .gts-skel-block, .gts-ghost-img { animation: none; }
    .gts-revealed .gts-realgrid { animation: none; }
}


/* ============================================================
   GTS Skeleton — Profil sekmesi panel skeleton'ı
   ------------------------------------------------------------
   Profile.cshtml sekmelerini fetch ile yüklerken (profLoad),
   dönen spinner yerine içeriğe benzeyen panel iskeleti gösterilir.
   JS: Profile.cshtml → profSkeleton() bu sınıfları basar.
   ============================================================ */
.gts-skel-panel { padding: 20px 22px; }
.gts-skel-panel > .gts-skel-title { margin-bottom: 22px; }

.gts-skel-panelcard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    margin-bottom: 14px;
}
.gts-skel-avatar { width: 84px; height: 84px; border-radius: 12px; flex-shrink: 0; }
.gts-skel-panelcard-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

@media (max-width: 640px) {
    .gts-skel-panelcard .gts-skel-btn { display: none; }
    .gts-skel-avatar { width: 60px; height: 60px; }
}

/* Genel satır iskeleti — avatar + metin (ör. rezervasyon kayıtlı yolcu listesi) */
.gts-skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.gts-skel-row-lines { flex: 1; min-width: 0; }