/* LuxorOtoMarket Mobile Hotfix
   Amaç: mobilde kategori görsellerinin "çarpık / alt alta" görünmesini düzeltmek.
   Bu dosya sadece mobilde etkili olur (max-width: 768px) ve mevcut CSS'i bozmaz; sadece override eder.
*/

@media (max-width: 768px) {
  /* Kategori kutuları: 2 sütun grid (alt alta değil) */
  .product-categories-box-main,
  .product-categories-inside-vitrin2-boxarea{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .product-categories-box{
    width: calc(50% - 10px) !important; /* 2'li görünüm */
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 12px;
    overflow: hidden;
  }

  /* Görsel alanı: esneme yok, "tamamı görünsün" */
  .product-categories-box-img,
  .product-categories-box-img-dis{
    height: auto !important;
  }

  .product-categories-box-img{
    aspect-ratio: 16 / 10;              /* geniş banner görseller için */
    background-size: contain !important; /* çarpıklık yapmasın */
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Çerçeve çizgileri mobilde fazla belirginse kapat */
  .product-categories-box-img-line{
    border: none !important;
  }

  /* Kategori adı alanı taşmasın */
  .product-categories-box-txt{
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    min-height: 44px; /* 2 satır için stabil */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Aşırı büyümeyi engelle */
  .product-categories-box a{
    display: block;
  }
}

/* =========================================================
   Luxor Mobile - slider_gold responsive fix (v1)
   Goal: prevent squashed/ezilmiş slider image on mobile
   Safe: only affects .slider_gold section on small screens
   ========================================================= */
@media (max-width: 991.98px){

  /* If slider is image-based */
  .slider_gold img,
  .slider_gold .slick-slide img,
  .slider_gold .swiper-slide img,
  .slider_gold .carousel-item img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;        /* keep nice fill */
    object-position: center center !important;
  }

  /* If theme sets a fixed height on wrappers, undo it */
  .slider_gold,
  .slider_gold .item,
  .slider_gold .slide,
  .slider_gold .slick-slide,
  .slider_gold .swiper-slide,
  .slider_gold .carousel-item{
    height: auto !important;
    min-height: 0 !important;
  }

  /* If slider is background-image based */
  .slider_gold{
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden !important;
  }

  /* Stabilize the visible area to a nice ratio (adjustable) */
  .slider_gold{
    aspect-ratio: 16 / 9;
  }
  /* For very short screens, use a slightly taller ratio */
  @supports not (aspect-ratio: 16 / 9){
    /* Fallback: ensure it doesn't collapse */
    .slider_gold{ padding-top: 56.25% !important; position: relative; }
    .slider_gold > *{ position: absolute; inset: 0; }
  }
}

/* =========================================================
   Luxor Mobile - slider_gold "centered small + boşluk" fix (v2)
   Goal: make the gold slider/banner truly responsive & edge-to-edge
   - removes container max-width/padding that shrinks the banner
   - ensures image covers available width without stretching
   ========================================================= */
@media (max-width: 991.98px){

  /* Make slider section fill the screen width */
  .slider_gold{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  /* If theme wraps the slider in a .container / .row that adds side padding,
     neutralize ONLY inside slider_gold */
  .slider_gold .container,
  .slider_gold .container-fluid,
  .slider_gold .row,
  .slider_gold .col,
  .slider_gold [class*="col-"]{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If slider items are constrained */
  .slider_gold .item,
  .slider_gold .slide,
  .slider_gold .slick-slide,
  .slider_gold .swiper-slide,
  .slider_gold .carousel-item{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Banner image should be responsive (no squish), fill width */
  .slider_gold img,
  .slider_gold .slick-slide img,
  .slider_gold .swiper-slide img,
  .slider_gold .carousel-item img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important; /* show full banner */
    background: #fff !important;
  }

  /* If banner is background-image based, show full without cropping */
  .slider_gold{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
  }

  /* Stabilize height so it doesn't become too tall or too short */
  .slider_gold{
    aspect-ratio: 16 / 7; /* banner-ish ratio */
  }
  @supports not (aspect-ratio: 16 / 7){
    .slider_gold{ position: relative; padding-top: 43.75% !important; }
    .slider_gold > *{ position: absolute; inset: 0; }
  }
}