/*
 * "Tükeniyor" ve "Tükendi" görünümü — müşteri sitesinin Bilet Al sayfası (gösteri kartı), seans seçimi ve kategori seçimi
 * (ob_etkinlik_takvimi.php, inc/biletsatinalma_wizard.php). Kural tek yerde: Event::kategoriDurumlari() / tukeniyorMu()
 * (inc/models.php). Tasarım 15.10.2026'da onaylandı (rapor kalem 154).
 *
 * Etiket sitenin "Bilet Al" düğmesiyle aynı turuncu geçişi taşır. Hiçbir öğeyi kaydırmaz (kullanıcı: "kaymalara dikkat et"):
 *  - gösteri kartında afişin sol üstünde, kategori kartında kartın üst kenarında konumu mutlaktır, yer kaplamaz;
 *  - seans kartında yeşil "Satışta" etiketinin YERİNE geçer ve ondan dardır (iki etiket telefonda yan yana sığmıyordu);
 *  - tükenen kategorinin düğmesi "Koltuk Seç" yazısını görünmez taşır, bu yüzden genişliği o düğmeyle aynıdır.
 * 360, 375, 390, 412, 430, 768, 1024 ve 1280 px'te ölçüldü: kart boyları, ad, fiyat, saat ve düğmelerin yeri etiketli ve
 * etiketsiz hâlde aynı.
 */

/* Ortak etiket: beyaz daire içinde alev + yazı, hafif parlama (hareketi azalt ayarında parlamaz) */
.tk-rozet {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px 4px 4px; border-radius: 999px;
    background: linear-gradient(135deg, #ff9d21 0%, #f2621f 55%, #e02f2f 100%);
    color: #fff; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11px; letter-spacing: 0.7px;
    line-height: 1; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 6px 14px rgba(224, 47, 47, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: tk-nabiz 2.4s ease-in-out infinite;
    pointer-events: none;
}
.tk-rozet .tk-ikon {
    width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #f2621f; font-size: 11px;
}
@keyframes tk-nabiz {
    0%, 100% { box-shadow: 0 6px 14px rgba(224, 47, 47, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
    50% { box-shadow: 0 6px 22px rgba(255, 138, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}

/* 1. Bilet Al sayfası — gösteri kartı: afişin sol üstü (biten gösterinin "İlginiz için Teşekkürler" etiketiyle aynı yer) */
.pw-event-card-img .tk-rozet { position: absolute; top: 10px; left: 10px; z-index: 6; }
@media (max-width: 575px) {
    .pw-event-card-img .tk-rozet { padding: 3px 10px 3px 3px; gap: 5px; font-size: 10px; letter-spacing: 0.4px; }
    .pw-event-card-img .tk-rozet .tk-ikon { width: 18px; height: 18px; font-size: 10px; }
}

/* 2. Seans seçimi — "Satışta" etiketinin yerine, aynı yükseklikte ve ondan dar (simgesiz) */
.pw-seans-badge.is-hot {
    background: linear-gradient(135deg, #ff9d21 0%, #f2621f 55%, #e02f2f 100%);
    color: #fff; border: 1px solid transparent; padding: 5px 11px; letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(224, 47, 47, 0.3);
    animation: tk-nabiz 2.4s ease-in-out infinite;
}

/* 3. Kategori seçimi — Tükeniyor: kartın üst kenarına oturan etiket ve turuncu çerçeve */
.pw-cat-card.tk-var { position: relative; border-color: #fdba74; }
.pw-cat-card.tk-var .tk-rozet {
    position: absolute; top: 0; left: 22px; transform: translateY(-55%);
    padding: 3px 11px 3px 3px; font-size: 10.5px;
}
.pw-cat-card.tk-var .tk-rozet .tk-ikon { width: 18px; height: 18px; font-size: 10px; }
@media (min-width: 992px) {
    .pw-cat-card.tk-var .tk-rozet { left: 27px; }
}

/* 3. Kategori seçimi — Tükendi: soluk ad ve fiyat, gri düğme, tıklanmaz */
.pw-cat-card.tk-bitti,
.pw-cat-card.tk-bitti:hover {
    cursor: not-allowed; background: #f8fafc; border-color: #e2e8f0; box-shadow: none; transform: none;
}
.pw-cat-card.tk-bitti .pw-cat-name,
.pw-cat-card.tk-bitti .pw-cat-price { filter: grayscale(1); opacity: 0.45; }
.pw-cat-btn.tk-bitti-btn,
.pw-cat-card:hover .pw-cat-btn.tk-bitti-btn { background: #718096; color: #fff; cursor: not-allowed; }
.pw-cat-btn.tk-bitti-btn { display: inline-grid; align-items: center; justify-items: center; }
.pw-cat-btn.tk-bitti-btn > span { grid-area: 1 / 1; white-space: nowrap; }
.pw-cat-btn.tk-bitti-btn .tk-olcu { visibility: hidden; }
.pw-cat-btn.tk-bitti-btn .tk-yazi { display: inline-flex; align-items: center; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
    .tk-rozet, .pw-seans-badge.is-hot { animation: none; }
}