/**
 * Genel Image Sprite CSS Classes
 * URL: https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp
 * 
 * Bu CSS dosyası sprite image içindeki tüm resimler için genel class'ları içerir.
 * Her bir resim için ayrı class oluşturup position ve size değerlerini ayarlayabilirsiniz.
 */

/* ==================== GENEL SPRITE AYARLARI ==================== */

/* Base sprite container */
.all-images-sprite {
    background-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp');
    background-repeat: no-repeat;
    display: inline-block;
    /* Varsayılan boyutlar - sprite içindeki resme göre ayarlayın */
    width: var(--sprite-width, 32px);
    height: var(--sprite-height, 32px);
    /* Pozisyonlar HTML'den ayarlanabilir - negatif değere çevir */
    background-position: calc(var(--sprite-x, 0) * -1px) calc(var(--sprite-y, 0) * -1px);
}

/* Sprite image için genel class */
.all-images-sprite-image {
    background-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp');
    background-repeat: no-repeat;
    display: inline-block;
}

/* ==================== KULLANICI TARAFINDAN OLUŞTURULAN SPRITE CLASS'LARI ==================== */

/* Sprite Image CSS Classes - Otomatik Oluşturuldu */
/* URL: https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp */

/* 1. quartz-casino-button - Pozisyon: (5, 5), Boyut: 116x42px */
.all-images-sprite-quartz-casino-button-bg {
    --sprite-x: 5;
    --sprite-y: 5;
    --sprite-width: 116px;
    --sprite-height: 42px;
    border-radius: 4px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    font-size: 14px;
    color: #fff;
}

.all-images-sprite-quartz-casino-button-bg .all-images-sprite-text,
.all-images-sprite-quartz-sport-button-bg .all-images-sprite-text {
    background: linear-gradient(200.56deg, rgb(196, 147, 55) 16.387%, rgb(237, 205, 120) 36.565%, rgb(167, 96, 43) 59.537%, rgb(187, 145, 56) 84.879%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* 2. quartz-slot-casino-bg - Pozisyon: (17, 60), Boyut: 162x185px */
.all-images-sprite-quartz-slot-casino-bg {
    --sprite-x: 17;
    --sprite-y: 60;
    --sprite-width: 162px;
    --sprite-height: 185px;
}

/* 3. sport-bets-bg - Pozisyon: (357, 67), Boyut: 151x158px */
.all-images-sprite-quartz-sport-bets-bg {
    --sprite-x: 357;
    --sprite-y: 67;
    --sprite-width: 151px;
    --sprite-height: 158px;
}

/* 4. live-game-bg - Pozisyon: (178, 90), Boyut: 165x148px */
.all-images-sprite-quartz-live-game-bg {
    --sprite-x: 178;
    --sprite-y: 90;
    --sprite-width: 165px;
    --sprite-height: 148px;
}

/* 5. live-tv - Pozisyon: (509, 84), Boyut: 146x139px */
.all-images-sprite-quartz-live-tv {
    --sprite-x: 509;
    --sprite-y: 84;
    --sprite-width: 146px;
    --sprite-height: 139px;
}

/* 6. sport-button-bg - Pozisyon: (124, 5), Boyut: 116x42px */
.all-images-sprite-quartz-sport-button-bg {
    --sprite-x: 124;
    --sprite-y: 5;
    --sprite-width: 116px;
    --sprite-height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
}



/* ==================== EK ÖZELLİKLER ==================== */

/* Sprite'ı maskeleme için */
.all-images-sprite--mask {
    -webkit-mask-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp');
    mask-image: url('https://vendor-provider.fra1.cdn.digitaloceanspaces.com/ebetlab/q4Zg23T8HtKTm07QbTDF3dFpBpLniqTG/statics/aaOSHbdtclY0uzW7cvl4nDqpQoXUvRTX5yDeaOsL.webp');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

/* Sprite'ı filtrelemek için */
.all-images-sprite--grayscale {
    filter: grayscale(100%);
}

.all-images-sprite--grayscale:hover {
    filter: grayscale(0%);
}

/* ==================== NOTLAR ==================== */
/*
 * KULLANIM:
 * 
 * 1. Temel kullanım (Class ile):
 *    <span class="all-images-sprite all-images-sprite--icon-1"></span>
 * 
 * 2. HTML'den pozisyon ayarlama (Inline style ile):
 *    <span class="all-images-sprite" style="--sprite-x: 100; --sprite-y: 50; --sprite-width: 40px; --sprite-height: 40px;"></span>
 * 
 * 3. Data attribute ile (JavaScript ile dinamik):
 *    <span class="all-images-sprite" data-sprite-x="100" data-sprite-y="50" data-sprite-width="40" data-sprite-height="40"></span>
 * 
 * 4. Farklı boyutlarla:
 *    <span class="all-images-sprite all-images-sprite--icon-1 all-images-sprite--large"></span>
 * 
 * 5. Container içinde:
 *    <div class="all-images-container">
 *        <span class="all-images-sprite" style="--sprite-x: 0; --sprite-y: 0; --sprite-width: 32px; --sprite-height: 32px;"></span>
 *    </div>
 * 
 * SPRITE POZİSYON AYARLAMA (HTML'den):
 * 
 * Yöntem 1 - Inline Style (En kolay):
 * <span class="all-images-sprite" style="--sprite-x: 100; --sprite-y: 50; --sprite-width: 40px; --sprite-height: 40px;"></span>
 * 
 * Yöntem 2 - Data Attribute (JavaScript ile):
 * <span class="all-images-sprite" data-sprite-x="100" data-sprite-y="50" data-sprite-width="40" data-sprite-height="40"></span>
 * 
 * Yöntem 3 - CSS Class (Statik):
 * .all-images-sprite--my-icon {
 *     --sprite-x: 100;
 *     --sprite-y: 50;
 *     --sprite-width: 40px;
 *     --sprite-height: 40px;
 * }
 * 
 * NOT: --sprite-x ve --sprite-y değerleri pixel cinsinden olmalı (sadece sayı, px yazmayın)
 *      CSS otomatik olarak negatif değere çevirir
 */