/* =========================================================
   ORTAK MEDYA ÖNİZLEME — PAYLAŞILAN STİL (PF-1 §11)
   =========================================================

   ⚠️ BU DOSYA HEM ADMIN HEM PUBLIC LAYOUT TARAFINDAN YÜKLENİR.
      Kurallar `luxysail-brand.css` içinden BURAYA TAŞINDI (kopyalanmadı):
      public shell admin CSS'ini yüklemez, ama `luxy-media-preview.js`
      sözleşmesini paylaşır. İki kopya olsaydı biri güncellenip diğeri
      geride kalırdı.

   ⚠️ Yükleyenler:
        Pages/Shared/_Layout.cshtml               (admin)
        Pages/Public/Shared/_PublicLayout.cshtml  (public)

   ⚠️ BAĞIMSIZ ÇALIŞIR: renk değişkenleri `var(--x, fallback)` biçiminde
      yazılıdır, bu yüzden `luxysail-brand.css` yüklenmese de doğru görünür.
      JS'in kullandığı `d-none` sınıfı da bu dosyada (alt yazıya kapsamlı olarak)
      tanımlıdır — public shell Bootstrap CSS YÜKLEMEZ ve yüklemesi gerekmez.
   ========================================================= */

/* =====================================================================
   ORTAK MEDYA ÖNİZLEME (luxy-media-preview.js) — PROJE STANDARDI

   ⚠️ CANONICAL BÜYÜK ÖNİZLEME ÖLÇÜSÜ: 640px / 16:9 (= 640×360).
      Bu değerin TEK kaynağı .luxy-mpreview-img kuralıdır. Kaynağı, düzeltme
      turunda deneyim kapağı için seçilen .luxy-popover-image ölçüsüdür
      (kart kapağının 320×180'inin 4 KAT ALANI) ve proje geneline o
      genelleştirilmiştir — yeni ekran kendi ölçüsünü UYDURMAZ.

   ⚠️ max-width: 90vw → dar ekranda görsel viewport'u taşıramaz; JS'teki
      yatay flip/clamp hesabı bu üst sınıra güvenir.
   ===================================================================== */

/* --- MOD: table-hover — thumbnail'ın sağında yüzen önizleme --- */
.luxy-mpreview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;   /* modal (1055) üstünde, toast'ın (1090) altında */
    padding: .25rem;
    border-radius: 10px;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);

    /* ⚠️ Fareyi ASLA yakalamaz: imlecin altına girip mouseleave tetikleyemez,
          bu yüzden titreme (flicker) yapısal olarak imkânsızdır. */
    pointer-events: none;

    /* Kapalı durum: ölçülebilir ama görünmez. */
    visibility: hidden;
}

/* Ölçüm fazı — JS konumlandırmadan önce boyut okur, ekranda görünmez. */
.luxy-mpreview--measuring {
    visibility: hidden;
}

.luxy-mpreview--open {
    visibility: visible;
}

/* 🔍 CANONICAL ÖLÇÜ — tek kaynak.
   ⚠️ object-fit: cover → oran korunur, görsel gerilmez.
   ⚠️ SABİT genişlik (max-width DEĞİL): küçük bir kaynak görselde önizleme
      boyutu görselden görsele değişmesin. */
/* ⚠️ .luxy-popover-image selektörü KALDIRILDI (freeze turu): Bootstrap Popover
      tabanlı iki önizleme kopyası ortak yardımcıya taşındığında kullanımı sıfıra
      düştü — hiçbir JS ya da markup ona sınıf atamıyor. Ölçünün tarihsel kaynağı
      olarak yukarıdaki yorumda anılmaya devam ediyor. */
.luxy-mpreview-img {
    display: block;
    width: 640px;
    max-width: 90vw;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
    border-radius: 8px;
}

/* --- MOD: gallery-click — lightbox --- */
.luxy-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, .75);
}

.luxy-lightbox--open {
    display: flex;
}

.luxy-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    max-height: 100%;
}

/* ⚠️ object-fit: CONTAIN (hover önizlemenin cover'ının tersi): lightbox
      görselin TAMAMINI gösterir, kırpmaz. max-* ile viewport'u taşımaz. */
.luxy-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .4);
}

.luxy-lightbox-caption {
    max-width: 90vw;
    color: #fff;
    font-size: .875rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/*
   🔴 BOOTSTRAP BAĞIMSIZLIĞI (PF-2 runtime recovery).

   luxy-media-preview.js alt yazıyı gizlemek için Bootstrap'in `d-none` yardımcı
   sınıfını kullanıyor. Ama `d-none` YALNIZ nanite-theme.min.css içinde tanımlıdır
   ve o dosya ADMIN layout'una aittir — public shell onu YÜKLEMEZ. Yani public
   tarafta alt yazısı olmayan bir görselde boş şerit görünür kalırdı.

   ⚠️ ÇÖZÜM DAR: JS sözleşmesi (`d-none` toggle) DEĞİŞTİRİLMEDİ ve admin davranışı
      aynen korundu; yalnız aynı etkiyi bu dosya kendi içinde de garanti ediyor.
      Alternatifler ve neden seçilmediler:
        · Bootstrap CSS'i public'e yüklemek → var olmayan dosya + shell izolasyonu.
        · nanite-theme'i public'e taşımak → tüm admin temasını public'e sokmak.
        · JS'te sınıf adını değiştirmek → paylaşılan helper'ın sözleşmesini
          değiştirip admin işaretlemesini de etkileme riski.

   ⚠️ Seçici KAPSAMLIDIR: genel bir `.d-none` kuralı YAZILMADI — o, admin
      sayfalarında Bootstrap'in kendi kuralıyla çakışabilecek ikinci bir kaynak
      olurdu. Kural yalnız bu alt yazıya bağlıdır.
*/
.luxy-lightbox-caption.d-none {
    display: none;
}

.luxy-lightbox-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    color: var(--luxy-navy, #17216F);
    font-size: 1.25rem;
    line-height: 1;
}

.luxy-lightbox-close:hover {
    background-color: #fff;
}

/* ⚠️ Galeri thumbnail'ı TIKLANABİLİR olduğunu göstermeli; hover'da BÜYÜMEZ
      (büyütme yalnız tıklamayla, lightbox'ta). */
[data-luxy-gallery-preview] img {
    cursor: zoom-in;
}

/* ⚠️ Hover önizlemesi taşıyan thumbnail de imleçle işaretlenir. */
[data-luxy-table-image-preview] img,
[data-luxy-hover-preview] {
    cursor: zoom-in;
}