/* Özel mobil responsive stilleri */

/* Normal ekranlarda görüntü */
.category-img {
    max-width: 100%;
    height: auto;
}

/* Mobil cihazlar için daha küçük görüntü */
@media only screen and (max-width: 767px) {
    .category-img {
        max-width: 70%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

/* Çok küçük mobil cihazlar için daha da küçük görüntü */
@media only screen and (max-width: 480px) {
    .category-img {
        max-width: 60%;
    }
}

/* =========================================================
   Ülke Kartları — Gölgeli Modern Kart Tasarımı
   ========================================================= */

/* Masaüstünde 4 sütun */
.products__list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}

/* Kart: gölge + yuvarlak köşe */
.products__list__countries {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.07),
        0 4px 12px rgba(0, 0, 0, 0.07) !important;
    padding: 18px 16px !important;
    min-width: 0 !important;
    min-height: 72px;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
    background-color: #fff !important;
}

/* Hover: kart yukarı kalkar, gölge derinleşir */
.products__list a:hover .products__list__countries {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.13),
        0 2px 8px rgba(0, 0, 0, 0.09) !important;
    transform: translateY(-3px);
    border-color: rgba(230, 31, 147, 0.28) !important;
    background-color: #fff !important;
}

/* Hover'da arka plan subdued renk kaldırıldı, beyaz kalır */
.products__list a:hover .products__list__countries,
.products__list__countries:hover {
    background: #fff !important;
}

/* Bayrak görselinin ince gölgesi */
.products__list__countries__name img {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
    border-radius: 5px !important;
    object-fit: cover;
}

/* İsim bloğu: flex shrink izni + taşma engeli */
.products__list__countries__name {
    gap: 14px !important;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

/* Bilgi bloğu: taşma engeli */
.products__list__countries__info {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* İsim + badge satırı: tek satır, badge sabit sağda */
.country-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* Ülke adı: 1 satır, taşarsa ... */
.country-name-text {
    font-size: 0.85em !important;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
    color: var(--content-primary);
}

/* 5G badge: küçülmez, her zaman görünür */
.badge-5g {
    flex-shrink: 0;
    border: 1px solid #007aff;
    padding: 1px 5px;
    color: #007aff;
    font-weight: 700;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Fiyat satırı */
.country-price-row {
    font-size: 12px;
    color: var(--content-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.country-price-row .product-price-list {
    color: #16a34a !important;
    font-weight: 700;
}

/* Ok ikonu: asla küçülmesin, sağda sabit dursun */
.products__list__countries > i.icon-bkng-right-arrow {
    flex-shrink: 0;
}

/* Container arka planı şeffaf, kartlar beyaz durur */
.products__list {
    background-color: transparent !important;
}

/* =========================================================
   Popüler eSIM Bölümü — Arka Plan Gradyanı
   Kartların arkasında hafif pembe↔mavi gradient section
   ========================================================= */
.homepage #tab-esim-country-home {
    background: linear-gradient(145deg, #e9f1fa 0%, #eff6ff 40%, #eaf7ff 100%);
    border-radius: 20px;
    padding: 28px 24px 32px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 24px rgba(103, 159, 248, 0.1);
}

/* "Tüm Destinasyonları Gör" butonu üstünde biraz boşluk */
.homepage #tab-esim-country-home > .btn {
    margin-top: 8px;
}

/* Orta ekran (992–1199px): 3 sütun */
@media (min-width: 992px) and (max-width: 1199px) {
    .products__list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet (640–991px): 2 sütun */
@media (min-width: 640px) and (max-width: 991px) {
    .products__list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .homepage #tab-esim-country-home {
        padding: 20px 16px 24px !important;
    }

    .products__list__countries {
        padding: 14px 12px !important;
    }

    .products__list__countries__name {
        gap: 10px !important;
    }
}

/* Mobil (< 640px): 1 sütun + kompakt görünüm */
@media (max-width: 639px) {
    .products__list {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 8px !important;
    }

    /* Section dışına taşmayı önle */
    .homepage #tab-esim-country-home {
        border-radius: 12px;
        padding: 16px 12px 20px !important;
    }

    /* Kart padding mobilde daha sıkı */
    .products__list__countries {
        padding: 12px 12px !important;
        min-height: 60px;
    }

    /* Bayrak biraz küçülsün */
    .products__list__countries__name img {
        width: 36px !important;
        height: 26px !important;
    }

    /* Bayrak ile metin arası boşluk azalt */
    .products__list__countries__name {
        gap: 10px !important;
    }

    /* Ülke adı font biraz küçük */
    .country-name-text {
        font-size: 0.82em !important;
    }

    /* Fiyat küçük kalabilir */
    .country-price-row {
        font-size: 11px !important;
    }
}