/* Kart Türleri için Ortak CSS */

/* CSS Değişkenleri - Admin ayarlarından kontrol edilecek */
:root {
    --card-radius: 0px; /* Kart köşe yarıçapı - varsayılan 0 */
    --image-radius: 0px; /* Görsel köşe yarıçapı - varsayılan 0 */
    --card-padding: 8px; /* Kart içi boşluk - varsayılan 8px */
    --image-padding: 8px; /* Görsel içi boşluk - varsayılan 8px */
    --grid-gap: 10px; /* Grid boşluk - varsayılan 10px */
    
    /* Tam Ekran Kart Özel Değişkenleri */
    --fullscreen-card-bg: var(--card-bg); /* Tam ekran kart arkaplan rengi */
    --fullscreen-card-radius: var(--card-radius); /* Tam ekran kart köşe yarıçapı */
    --fullscreen-card-border: none; /* Tam ekran kart çerçevesi */
    --fullscreen-card-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Tam ekran kart gölgesi */
    --fullscreen-card-padding: 8px; /* Tam ekran kart genel padding */
    --fullscreen-card-image-padding: 0px; /* Tam ekran kart görsel padding */
    
    /* Leaderboard Kart Özel Değişkenleri */
    --leaderboard-card-bg: var(--card-bg); /* Leaderboard kart arkaplan rengi */
    --leaderboard-card-radius: var(--card-radius); /* Leaderboard kart köşe yarıçapı */
    --leaderboard-card-border: none; /* Leaderboard kart çerçevesi */
    --leaderboard-card-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Leaderboard kart gölgesi */
    --leaderboard-card-padding: 8px; /* Leaderboard kart genel padding */
    --leaderboard-card-image-padding: 0px; /* Leaderboard kart görsel padding */
    
    /* Büyük Sponsor Kart Özel Değişkenleri */
    --sponsor-card-bg: var(--card-bg); /* Büyük sponsor kart arkaplan rengi */
    --sponsor-card-radius: var(--card-radius); /* Büyük sponsor kart köşe yarıçapı */
    --sponsor-card-border: none; /* Büyük sponsor kart çerçevesi */
    --sponsor-card-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Büyük sponsor kart gölgesi */
    --sponsor-card-padding: 0px; /* Büyük sponsor kart genel padding */
    --sponsor-card-image-padding: 0px; /* Büyük sponsor kart görsel padding */
}

/* Genel kart ve görsel ayarları */
.grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--grid-gap, 10px) !important;
    margin-top: 18px;
    /* Türetilen değişkenler */
    --col: calc((100% - 11 * var(--grid-gap, 10px)) / 12);
    --bigw: calc(6 * var(--col) + 5 * var(--grid-gap, 10px));
    --card-h: calc(var(--bigw) * 2 / 3); /* 3:2 oran için (4:3 oran) */
    --card-16-9-h: calc(var(--bigw) * 9 / 16); /* 16:9 oran için */

    /* Fallback değerler - CSS hesaplaması başarısız olursa */
    min-height: 1px; /* Grid'in render olmasını sağla */
}

/* Kart yüksekliği için fallback değerler */
:root {
    --fallback-card-h: 200px; /* Varsayılan kart yüksekliği */
    --equal-card-h: var(--card-h, var(--fallback-card-h));
}
.icon-tile, .sponsor-tile {
    border-radius: var(--card-radius) !important;
    padding: var(--card-padding) !important;
    box-sizing: border-box !important;
}

/* Dış kapsayıcı padding yüksekliği etkilemesin */
.item { padding: 0 !important; }

.tile-img, .sponsor-tile .tile-img {
    border-radius: var(--image-radius) !important;
    padding: var(--image-padding) !important;
    box-sizing: border-box !important;
}

/* Küçük kart görseli: kesilmesin, alanı içinde sığdır */
.item.small .icon-tile .tile-img,
.item.small .tile-img {
    /* Küçük kartta görsel alanını sabit 1:1 kare yap */
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    align-self: center !important;
    justify-self: center !important;
}

/* Metin alanı boşluğu da admin'den kontrol edilsin */
.tile-name, .item .tile-name, .icon-tile .tile-name {
    padding: var(--text-padding, var(--card-padding)) !important;
    box-sizing: border-box !important;
}

/* Büyük Kart Kare (1:1 oran, metin üstte, görsel altta) */
.item.small .icon-tile {
    height: var(--equal-card-h, var(--card-h)) !important;
    display: grid !important;
    /* Görsel kare alan + başlık alanı - 1fr kullanarak eşit yükseklik sağla */
    grid-template-rows: 1fr var(--title-small) !important;
    gap: 4px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
}

/* Küçük kart görsel alanını 1:1 kare olarak sabitlemek için sarmalayıcı oluştur */
.item.small .icon-tile .tile-img {
    border-radius: var(--image-radius) !important;
}
.item.small .icon-tile {
    grid-auto-rows: min-content !important;
}
.item.small .tile-img {
    place-self: center !important;
}

/* Yüksekliği kesin kilitle - küçük ve büyük kart için (sponsor hariç) */
.grid .item.small .icon-tile,
.grid .item.big:not(.sponsor) .icon-tile {
    height: var(--equal-card-h, var(--card-h)) !important;
    min-height: var(--equal-card-h, var(--card-h)) !important;
    max-height: var(--equal-card-h, var(--card-h)) !important;
}

/* Yükseklik eşitlemeden sonra köşe yuvarlaklığını da zorla uygula (sponsor hariç) */
.grid .item.small .icon-tile,
.grid .item.big:not(.sponsor) .icon-tile {
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
}

.item.big .icon-tile {
    height: var(--equal-card-h, var(--card-h)) !important;
    display: grid !important;
    grid-template-rows: var(--title-big) 1fr !important;
    gap: 4px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
}
.item.big-square .icon-tile {
    height: var(--card-square-h) !important; /* 1:1 oran için kare yükseklik */
    display: grid !important;
    grid-template-rows: var(--title-big) 1fr !important;
    gap: 4px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important; /* CSS değişkeni */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.item.big-square .tile-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 0px !important;
    color: var(--text) !important;
}

.item.big-square .tile-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--image-radius) !important; /* CSS değişkeni */
    padding: var(--image-padding) !important;
    object-fit: cover !important;
}

/* Metin gizli olduğunda alanı kaldır */
.item.big-square .icon-tile.no-text .tile-name {
    display: none !important;
}

.item.big-square .icon-tile.no-text .tile-img {
    margin-top: 0 !important;
}

/* Büyük kart kare: metin gizlendiğinde sadece görsel (tam alan) */
.item.big-square .icon-tile.no-text { 
    grid-template-rows: 1fr !important; /* Sadece görsel için alan */
}

/* Büyük Sponsor Kartları: 16:9 oran (metin gizli) */
.item.sponsor.big .icon-tile {
    height: var(--card-16-9-h) !important; /* 16:9 oran */
    padding: var(--sponsor-card-padding, 0px) !important;
    background: var(--sponsor-card-bg, var(--card-bg)) !important;
    border-radius: var(--sponsor-card-radius, var(--card-radius)) !important;
    border: var(--sponsor-card-border, none) !important;
    box-shadow: var(--sponsor-card-shadow, 0 4px 12px rgba(0,0,0,0.15)) !important;
    display: grid !important;
    grid-template-rows: var(--title-big) 1fr !important;
    gap: 4px !important;
}

/* Büyük Sponsor Kartları + Metin Göster: 4:3 oran */
.item.sponsor.big .icon-tile:not(.no-text) {
    height: var(--card-h) !important; /* 4:3 oran */
}

.item.sponsor.big .tile-img {
    padding: var(--sponsor-card-image-padding, 0px) !important;
    object-fit: cover !important;
    aspect-ratio: 16/9 !important; /* Görsel kırpma her durumda 16:9 */
}

/* Küçük sponsor kartları: sabit ayarlar */
.item.sponsor:not(.big) .icon-tile { padding: 0 !important; }
.item.sponsor:not(.big) .tile-img { padding: 0 !important; }

/* Büyük Kart İkon (3:2 oran, özel arkaplan, metin sol, ikon sağ üst) */
.item.big-icon .icon-tile {
    height: var(--card-h) !important; /* 3:2 oranla uyumlu sabit yükseklik */
    display: grid !important;
    grid-template-columns: 1fr 80px !important;
    grid-template-rows: 1fr !important;
    gap: 16px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg-color) !important;
    border-radius: var(--card-radius) !important; /* CSS değişkeni */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.item.big-icon .tile-name {
    grid-column: 1 !important; /* Sol sütun */
    grid-row: 1 !important; /* Tek satır */
    margin: 0 !important;
    font-weight: 700 !important;
    text-align: left !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    align-self: start !important; /* Üstten başla */
    /* Metin tek satırda kalsın */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    word-wrap: normal;
    max-width: 100%;
    /* Font boyutu JavaScript tarafından ayarlanacak */
}

/* Varsayılan font boyutu - JavaScript çalışmazsa fallback */
.item.big-icon .tile-name {
    font-size: 18px !important;
}

/* JavaScript tarafından ayarlanan font boyutu için */
.item.big-icon .tile-name.auto-resize {
    font-size: inherit !important;
}

.item.big-icon .tile-img {
    grid-column: 2 !important; /* Sağ sütun */
    grid-row: 1 !important; /* Tek satır */
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--image-radius) !important; /* CSS değişkeni */
    object-fit: cover !important;
    display: block !important;
    background: rgba(255,255,255,0.15) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    align-self: start !important; /* Üstten başla */
    justify-self: center !important; /* Yatay ortala */
}

/* Uzun Kart (61:10 oran, tam genişlik, sol kare görsel, sağ metin) */
.item.long {
    grid-column: span 12 !important; /* Tam genişlik */
}

.item.long .icon-tile {
    aspect-ratio: 61 / 10 !important; /* 61:10 oranında dinamik yükseklik */
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Sol: otomatik görsel, Sağ: metin */
    grid-template-rows: 1fr !important; /* Tek satır */
    gap: 16px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg) !important; /* Normal kart arkaplanı */
    overflow: hidden !important; /* Görselin kart dışına taşmasını engelle */
    border-radius: var(--card-radius) !important; /* CSS değişkeni */
}

.item.long .tile-img {
    grid-column: 1 !important; /* Sol sütun */
    grid-row: 1 !important; /* Tek satır */
    height: 40% !important; /* Kartın yüksekliğinin %40'ı */
    aspect-ratio: 1 / 1 !important; /* Kare oran - genişlik yüksekliğe eşit olacak */
    object-fit: cover !important;
    display: block !important;
    align-self: center !important; /* Dikey ortala */
    justify-self: start !important; /* Sola hizala */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--image-radius) !important; /* CSS değişkeni */
}

.item.long .tile-name {
    grid-column: 2 !important; /* Sağ sütun */
    grid-row: 1 !important; /* Tek satır */
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: left !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.4 !important;
    color: var(--text) !important; /* Normal metin rengi */
    align-self: center !important; /* Dikey ortala */
    /* Metin sınırlamalarını kaldır */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    /* Metni doğal şekilde akacak şekilde ayarla */
    word-wrap: break-word !important;
    hyphens: auto !important;
}

/* Home counter cards - tekrarlanan kurallar kaldırıldı */

/* Sponsor cards - home.php specific */
.sponsors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.sponsor-card {
    background: transparent;
    padding: 0;
}

.sponsor-card:hover {
    transform: translateY(-2px);
}

.sponsor-tile {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
}

.sponsor-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sponsor-card .name {
    display: none;
}

.sponsor-card .sponsor-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Home counter city card */
.home-counter-city-card {
    margin: 6px 0 12px;
    width: 100%;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    text-align: center;
}

/* Home counter cards grid */
.home-counter-cards {
    margin: 8px 0 12px;
    width: 100%;
}

.home-counter-cards .hc-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.home-counter-cards .hc-card {
    grid-column: span 3;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--counter-h, clamp(48px, 12vw, 80px)) !important;
    border-radius: var(--card-radius) !important;
}

.home-counter-cards .hc-count {
    font-weight: 800;
    font-size: clamp(16px, 5vw, 22px);
    line-height: 1;
    color: var(--text);
}

.home-counter-cards .hc-unit {
    margin-top: 4px;
    font-size: 11px;
    opacity: .8;
    color: var(--text);
}

.home-counter-cards .hc-done {
    grid-column: 1 / -1;
    text-align: center;
}

.home-counter-cards .hc-done-text {
    font-weight: 800;
    color: var(--text);
}

@media (max-width: 600px) {
    .home-counter-cards .hc-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .sponsors {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Browse.php'den taşınan CSS'ler */

/* Genel kart stilleri */
.item {
    background: transparent;
    padding: 0;
    text-align: center;
    transition: transform .15s;
}

.item:hover {
    transform: translateY(-2px);
}

.item.small {
    grid-column: span 3;
}

.item.big {
    grid-column: span 6;
}

.item.big-square {
    grid-column: span 6;
}

.item.big-icon {
    grid-column: span 6;
}

.item.long {
    grid-column: span 12;
}

.item.html {
    grid-column: span 12 !important; /* Tam genişlik */
    position: relative !important;
    overflow: visible !important;
    contain: none !important;
}

/* Icon tile genel stilleri */
.icon-tile {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--card-bg);
    overflow: hidden;
}

/* Tile image genel stilleri */
.tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
}

/* Tekrarlanan tile-img kuralları birleştirildi - genel .tile-img kuralları kullanılıyor */

/* Tile name genel stilleri */
.tile-name {
    color: var(--text);
    line-height: 1.2;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Büyük kart isimleri için ortak kurallar */
.item.big .tile-name,
.item.big-square .tile-name {
    margin: 0;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    word-wrap: normal;
    max-width: 100%;
    /* Font boyutu JavaScript tarafından ayarlanacak */
}

/* Font boyutları */
.item.big .tile-name,
.item.big-square .tile-name {
    font-size: 16px;
}

/* Grid row pozisyonları */
.item.small .tile-img {
    grid-row: 1;
}

.item.small .tile-name {
    grid-row: 2;
}

.item.big .tile-name {
    grid-row: 1;
}

.item.big .tile-img {
    grid-row: 2;
}

.item.big-square .tile-name {
    grid-row: 1;
}

.item.big-square .tile-img {
    grid-row: 2;
}

.item a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Tam Ekran Kart (1:1 oran, tam genişlik, isim gösterme opsiyonu) */
.item.fullscreen {
    grid-column: span 12 !important; /* Tam genişlik */
}

.item.fullscreen .icon-tile {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* 1:1 kare oran */
    display: grid !important;
    grid-template-rows: auto 1fr !important; /* Başlık + görsel */
    gap: 8px !important;
    padding: var(--fullscreen-card-padding, 8px) !important;
    background: var(--fullscreen-card-bg, var(--card-bg)) !important;
    border-radius: var(--fullscreen-card-radius, var(--card-radius)) !important;
    border: var(--fullscreen-card-border, none) !important;
    box-shadow: var(--fullscreen-card-shadow, 0 4px 12px rgba(0,0,0,0.15)) !important;
    overflow: hidden !important;
}

.item.fullscreen .tile-name {
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.3 !important;
    color: var(--text) !important;
    /* Metin sınırlamalarını kaldır */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.item.fullscreen .tile-img {
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--image-radius) !important;
    object-fit: cover !important; /* Görseli 1:1 oranında kırp */
    display: block !important;
    padding: var(--fullscreen-card-image-padding, 0px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Tam ekran kart: metin gizli olduğunda */
.item.fullscreen .icon-tile.no-text .tile-name {
    display: none !important;
}

.item.fullscreen .icon-tile.no-text {
    grid-template-rows: 1fr !important; /* Sadece görsel için alan */
}

.item.fullscreen .icon-tile.no-text .tile-img {
    grid-row: 1 !important;
}

/* Responsive grid */
@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Yeni Uzun Kart 1 (61:10 oran, tam genişlik, sol görsel, sağ metin) */
.item.long1 {
    grid-column: span 12 !important; /* Tam genişlik */
}

.item.long1 .icon-tile {
    aspect-ratio: 61 / 10 !important; /* 61:10 oranında dinamik yükseklik */
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: var(--card-padding) !important;
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
}

.item.long1 .tile-img {
    flex-shrink: 0 !important;
    width: auto !important;
    height: 80% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: var(--image-radius) !important;
    display: block !important;
}

.item.long1 .tile-name {
    flex: 1 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: left !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.4 !important;
    color: var(--text) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
}

/* Leaderboard Kart (728:90 oran, tam genişlik, isim gösterme opsiyonu) */
.item.leaderboard {
    grid-column: span 12 !important; /* Tam genişlik */
}

.item.leaderboard .icon-tile {
    width: 100% !important;
    aspect-ratio: 728 / 90 !important; /* 728:90 oran */
    display: grid !important;
    grid-template-rows: auto 1fr !important; /* Başlık + görsel */
    gap: 8px !important;
    padding: var(--leaderboard-card-padding, 8px) !important;
    background: var(--leaderboard-card-bg, var(--card-bg)) !important;
    border-radius: var(--leaderboard-card-radius, var(--card-radius)) !important;
    border: var(--leaderboard-card-border, none) !important;
    box-shadow: var(--leaderboard-card-shadow, 0 4px 12px rgba(0,0,0,0.15)) !important;
    overflow: hidden !important;
}

.item.leaderboard .tile-name {
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.3 !important;
    color: var(--text) !important;
    /* Metin sınırlamalarını kaldır */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.item.leaderboard .tile-img {
    grid-row: 2 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--image-radius) !important;
    object-fit: cover !important; /* Görseli 728:90 oranında kırp */
    display: block !important;
    padding: var(--leaderboard-card-image-padding, 0px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Leaderboard kart: metin gizli olduğunda */
.item.leaderboard .icon-tile.no-text .tile-name {
    display: none !important;
}

.item.leaderboard .icon-tile.no-text {
    grid-template-rows: 1fr !important; /* Sadece görsel için alan */
}

.item.leaderboard .icon-tile.no-text .tile-img {
    grid-row: 1 !important;
}

/* HTML Kart özel stilleri */
.item.html .icon-tile {
    width: 100% !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important; /* Başlık sabit, HTML içerik esnek */
    gap: 8px !important;
    padding: var(--card-padding, 8px) !important;
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    border: var(--card-border, none) !important;
    box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.15)) !important;
    overflow: hidden !important;
    /* Kesin 1:1 kare oran için */
    aspect-ratio: 1 / 1 !important;
    height: var(--bigw) !important;
    max-height: var(--bigw) !important;
}

.item.html .tile-name {
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.3 !important;
    color: var(--text) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    word-wrap: break-word !important;
}

.item.html .html-content {
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important; /* İçeriğe göre dinamik yükseklik */
    min-height: calc(var(--bigw) - 60px) !important; /* Minimum yükseklik 1:1 orana yakın */
    border-radius: var(--image-radius) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #fff !important;
}

.item.html .html-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* HTML kart: metin gizli olduğunda */
.item.html .icon-tile.no-text .tile-name {
    display: none !important;
}

.item.html .icon-tile.no-text {
    grid-template-rows: auto !important; /* Sadece HTML içerik için dinamik alan */
}

.item.html .icon-tile.no-text .html-content {
    grid-row: 1 !important;
}



/* HTML Kart iframe stilleri */
.item.html .html-content iframe {
    width: 100% !important;
    border: none !important;
    border-radius: 4px !important;
    /* Minimum yükseklik kartın genişliğine eşit (1:1 oran) */
    min-height: calc(var(--bigw) - 80px) !important;
    flex: 1 !important;
}

/* HTML Kart isim gizleme durumunda */
.item.html .icon-tile.no-text {
    /* Sadece HTML içerik için tam alan */
    grid-template-rows: 1fr !important;
    min-height: var(--bigw) !important;
}

.item.html .icon-tile.no-text .html-content iframe {
    /* İsim gizli olduğunda iframe tam alanı kaplasın */
    min-height: calc(var(--bigw) - 16px) !important;
}

/* Mobil görünüm için HTML Kart */
@media (max-width: 600px) {
    .item.html {
        grid-column: span 12 !important; /* Mobilde de tam genişlik */
    }
}

/* Admin Sort Sayfası İçin Özel Stiller */

/* Leaderboard kart stilleri */
.item.leaderboard .leaderboard-content {
    padding: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
}

.item.leaderboard .leaderboard-preview {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Admin Sort özel stiller */
.admin-sort .item { cursor: move; }
.admin-sort .sortable-ghost { opacity: 0.5; }
.admin-sort .item.leaderboard { grid-column: span 6; }
.admin-sort .item.html { grid-column: span 6; }