/* TatilKamp — Listee public teması ince ayarlar */
[x-cloak] { display: none !important; }

/* Listee logo.svg yerine metin wordmark */
.tk-logo { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #2c3038; text-decoration: none; line-height: 1; }
.tk-logo span { color: #ff5722; }
.footer .tk-logo { color: #fff; }

/* Auth dropdown (bootstrap) küçük düzeltmeler */
.tk-user-menu .dropdown-menu { min-width: 220px; }
.tk-user-menu .dropdown-item { padding: 8px 16px; font-size: 14px; }

/* Detay: yıldız puanlama */
.tk-star { cursor: pointer; font-size: 22px; line-height: 1; }
.tk-star i { color: #dcdcdc; transition: color .1s; }
.btn.border-dashed { border-style: dashed !important; }

/* TempData uyarıları */
.tk-flash { margin: 16px auto; max-width: 1140px; padding: 12px 18px; border-radius: 8px; font-size: 14px; }
.tk-flash.ok { background: #e6f7ee; border: 1px solid #b7ebcf; color: #0f7b4a; }
.tk-flash.err { background: #fdecea; border: 1px solid #f5c6cb; color: #b02a37; }

/* Firma listesi sidebar: Select2 dropdown'ları "Mekan adı ara" input'u ile aynı (tam) genişlikte olsun.
   Tema global'i .select2-container { width: auto !important } uyguluyor; burada sidebar için ezilir. */
.listings-sidebar .filter-content .select2-container { width: 100% !important; }
.listings-sidebar .filter-content .select2-container--default .select2-selection--single { height: 46px; }
.listings-sidebar .filter-content .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; }
.listings-sidebar .filter-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

/* Anasayfa "Öne Çıkan Mekanlar" ilan kartları: görseller farklı en/boy oranlarında
   geldiğinden kartlar farklı yükseklikte oluyordu. Sabit yükseklik + object-fit:cover ile
   tüm ilan görselleri standart boyutta, oran korunarak (kırpılarak) gösterilir. */
.featured-section .blog-img,
.listgrid-sidebar .blog-img { overflow: hidden; border-radius: 10px 10px 0 0; }
.featured-section .blog-img a,
.listgrid-sidebar .blog-img a { display: block; }
.featured-section .blog-img img,
.listgrid-sidebar .blog-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Blog kartları (liste sayfası ve "Diğer Yazılar") ve blog detay kapağı için
   yer ayırma. Görsel yüklenmeden önce tarayıcı kutunun yüksekliğini bilmediği
   için altındaki metin aşağı kayıyordu (CLS). Sabit piksel yerine aspect-ratio
   kullanıldı: kart genişliği kırılım noktalarına göre değiştiğinden oran
   sabitlemek her ekran boyutunda doğru yüksekliği ayırır. */
.blog.grid-blog .blog-image img,
.card .blog-widget .blog-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Blog detay kapak görseli: LCP adayı. max-height ile birlikte oran sabitlenir. */
.blog-content-cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

/* Firma detay — üst galeri şeridi.
   Önceden flex + sabit piksel (160x165) kullanılıyordu; kap daraldığında
   küçük görseller yatayda büzülüp yükseklikleri sabit kaldığı için ince-uzun
   görünüyordu. Grid + aspect-ratio ile her hücre oranı sabit kalır. */
.tk-galeri-serit {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    aspect-ratio: 16 / 7;
}

/* İlk hücre (kapak) sol yarıyı, kalan 4 görsel sağdaki 2x2 ızgarayı doldurur. */
.tk-galeri-serit > :first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.tk-galeri-serit a,
.tk-galeri-izgara a {
    display: block;
    width: 100%;
    height: 100%;
}

.tk-galeri-serit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

@media (max-width: 767.98px) {
    .tk-galeri-serit {
        grid-template-columns: repeat(2, 1fr);
        aspect-ratio: 1 / 1;
    }

    .tk-galeri-serit > :first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* Firma detay — "Galeri" kartındaki küçük resim ızgarası.
   Sabit 110px yükseklik yerine 4:3 oran; kolon genişliği değişse de kare kalır. */
.tk-galeri-izgara img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}