/* ═══════════════════════════════════════════════════════════════════════════
   Jackpot şeridi — ana sayfada oyun ızgarasının hemen üstünde.
   Yalnızca index.php yükler ($pageCss, includes/header.php).

   Tasarım hedefi: az yer kaplasın ama canlı dursun. Satır yüksekliği masaüstünde
   ~56px, telefonda kartlar 2'şerli sarıyor. Tüm süslemeler kabın içinde kalıyor
   (overflow: hidden) — sayfada yatay kaydırma açmaz.
   ═══════════════════════════════════════════════════════════════════════════ */

.jp-band {
    --jp-red:      #c81e3a;
    --jp-red-dark: #7f1027;
    --jp-cell:     #d31f3f;
    --jp-cell-2:   #a3132e;
    --jp-gold:     #fbbf24;

    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 0 0 12px;
    margin: 0 0 26px;
    background: linear-gradient(180deg, #4a0714 0%, #2b0510 60%, #1b040b 100%);
    border: 1px solid rgba(251,191,36,.22);
    box-shadow: 0 18px 46px rgba(0,0,0,.5);
}

/* Arkada yavaşça dönen ışık — kabın içinde kalır. */
.jp-band-glow {
    position: absolute; inset: -60%; pointer-events: none; z-index: 0;
    background: conic-gradient(from 0deg, transparent, rgba(251,191,36,.13), transparent 34%);
    animation: jpConic 14s linear infinite;
}
@keyframes jpConic { to { transform: rotate(360deg); } }

/* ── Başlık ── */
.jp-head {
    position: relative; z-index: 2; overflow: hidden;
    padding: 13px 18px 14px; text-align: center;
    background: linear-gradient(180deg, var(--jp-red), var(--jp-red-dark));
    border-bottom: 2px solid rgba(0,0,0,.28);
}
.jp-title {
    position: relative; z-index: 2; margin: 0; line-height: 1.05;
    font-size: clamp(1.05rem, 3.4vw, 2.35rem); font-weight: 900;
    letter-spacing: -.5px; text-transform: uppercase; color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,.32), 0 6px 22px rgba(0,0,0,.45);
}
.jp-title-soft { font-weight: 800; opacity: .95; }
.jp-title-hard {
    background: linear-gradient(100deg, #fff 0%, #fff8dc 26%, var(--jp-gold) 44%, #fff 60%, var(--jp-gold) 78%, #fff 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: jpShine 5s linear infinite;
}
@keyframes jpShine { to { background-position: 260% 0; } }

/* Başlığın iki yanındaki altın madeni paralar — dönüyor. */
.jp-coin {
    position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; z-index: 1;
    border-radius: 50%; opacity: .55;
    background: radial-gradient(circle at 34% 30%, #fff3c4, var(--jp-gold) 42%, #a16207 100%);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.3), 0 0 22px rgba(251,191,36,.5);
    animation: jpCoinSpin 3.6s linear infinite;
}
.jp-coin-l { left: 2.5%; }
.jp-coin-r { right: 2.5%; animation-delay: -1.8s; }
@keyframes jpCoinSpin {
    0%, 100% { transform: rotateY(0deg)   scale(1); }
    50%      { transform: rotateY(180deg) scale(.9); }
}

/* ── Satırlar ── */
.jp-rows { position: relative; z-index: 2; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 9px; }
.jp-row {
    display: grid; grid-template-columns: 112px 1fr; gap: 9px; align-items: stretch;
    opacity: 0; transform: translateY(14px);
    animation: jpRowIn .55s cubic-bezier(.2,.9,.25,1) forwards;
}
.jp-row:nth-child(1) { animation-delay: .05s; }
.jp-row:nth-child(2) { animation-delay: .13s; }
.jp-row:nth-child(3) { animation-delay: .21s; }
.jp-row:nth-child(4) { animation-delay: .29s; }
.jp-row:nth-child(5) { animation-delay: .37s; }
@keyframes jpRowIn { to { opacity: 1; transform: none; } }

/* Marka rozeti (sol taraftaki logo kutusu) */
.jp-brand {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 8px 6px; border-radius: 10px; text-align: center; line-height: 1;
    background: linear-gradient(160deg, #17040c, #300611);
    border: 1px solid rgba(251,191,36,.3);
    box-shadow: inset 0 0 18px rgba(0,0,0,.55);
}
.jp-brand-main {
    font-size: .82rem; font-weight: 900; letter-spacing: .3px; color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.jp-brand-sub {
    font-size: .58rem; font-weight: 900; letter-spacing: 1.6px;
    padding: 2px 7px; border-radius: 20px; color: #2b0510;
    background: linear-gradient(135deg, #fde68a, var(--jp-gold));
}

/* Dört hücre */
.jp-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.jp-cell {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 9px; min-width: 0;
    padding: 7px 11px; border-radius: 10px;
    background: linear-gradient(145deg, var(--jp-cell), var(--jp-cell-2));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 4px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .22s, box-shadow .22s;
}
.jp-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.22); }

/* Hücrenin üzerinden geçen ışık süpürmesi — sırayla, hepsi aynı anda değil. */
.jp-cell::after {
    content: ''; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    animation: jpSweep 6s ease-in-out infinite;
}
.jp-cell:nth-child(2)::after { animation-delay: .5s; }
.jp-cell:nth-child(3)::after { animation-delay: 1s; }
.jp-cell:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes jpSweep { 0%, 70% { left: -140%; } 92%, 100% { left: 190%; } }

.jp-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--jp-ic, #fff);
    background: radial-gradient(circle at 40% 32%, rgba(255,255,255,.28), rgba(0,0,0,.42));
    border: 1px solid rgba(255,255,255,.22);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.jp-icon b { font-size: 1.4rem; line-height: 1; font-weight: 400; }

.jp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jp-label {
    font-size: .58rem; font-weight: 900; letter-spacing: .9px; text-transform: uppercase;
    color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jp-amount {
    font-size: clamp(.78rem, 1.15vw, 1.02rem); font-weight: 900; color: #fff;
    font-variant-numeric: tabular-nums; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    transition: color .18s, text-shadow .18s;
}
/* Rakam her değiştiğinde kısa bir altın parlama — sayacın canlı olduğunu gösterir. */
.jp-amount.jp-tick { color: #fff7d6; text-shadow: 0 0 12px rgba(251,191,36,.9); }

/* Tavana çarpıp başa dönen (yani "vurulan") jackpot: hücre bir kez altın patlar. */
.jp-cell.jp-hit { animation: jpHit .9s ease-out; }
@keyframes jpHit {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.85), inset 0 0 0 rgba(251,191,36,0); }
    45%  { box-shadow: 0 0 0 10px rgba(251,191,36,0), inset 0 0 26px rgba(251,191,36,.75); }
    100% { box-shadow: 0 4px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16); }
}

.jp-foot {
    position: relative; z-index: 2; text-align: center; margin-top: 11px;
    font-size: .72rem; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255,255,255,.62);
}
.jp-foot::first-letter { color: var(--jp-gold); }

/* ═══ Duyarlı ═══ */
@media (max-width: 1100px) {
    .jp-row { grid-template-columns: 96px 1fr; }
    .jp-icon { width: 30px; height: 30px; font-size: 1.1rem; }
    .jp-cell { padding: 6px 9px; gap: 7px; }
}

@media (max-width: 820px) {
    /* Dört hücre yan yana sığmıyor: 2×2'ye iniyor, marka rozeti tam genişlikte üstte. */
    .jp-row { grid-template-columns: 1fr; gap: 7px; }
    .jp-brand { flex-direction: row; gap: 8px; padding: 6px 10px; }
    .jp-brand-main { font-size: .78rem; }
    .jp-cells { grid-template-columns: repeat(2, 1fr); gap: 7px; }

    /* Beş satır alt alta dizilince şerit ~790px'e çıkıyor ve oyunları ekranın çok
       aşağısına itiyordu. Telefonda satırlar YATAY kaydırmalı bir şeride dönüşüyor:
       her marka bir kart, tek satır yüksekliği. Kaydırma kabın içinde kalıyor,
       sayfada yatay kaydırma açmıyor. */
    .jp-rows {
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .jp-rows::-webkit-scrollbar { display: none; }
    .jp-row {
        flex: 0 0 86%; min-width: 0; scroll-snap-align: center;
        /* Kaydırmalı kipte satırların sırayla belirmesi kaymayı bozuyordu. */
        opacity: 1; transform: none; animation: none;
    }

    /* Sağ kenarda solma — daha fazla kart olduğunu belli eder. */
    .jp-band::after {
        content: ''; position: absolute; right: 0; bottom: 38px; width: 34px; height: 128px;
        z-index: 3; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(27,4,11,.9));
    }

    .jp-dots { display: flex; }
}

/* Kaydırma noktaları — yalnızca telefonda, JS ile üretiliyor (assets/jackpot.js). */
.jp-dots {
    display: none; position: relative; z-index: 2;
    justify-content: center; align-items: center; gap: 6px; margin-top: 9px;
}
.jp-dot {
    width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.28); transition: .25s;
}
.jp-dot.active { width: 18px; border-radius: 20px; background: var(--jp-gold); }

@media (max-width: 480px) {
    .jp-band { margin-bottom: 18px; border-radius: var(--radius-md); }
    .jp-head { padding: 10px 12px 11px; }
    .jp-coin { width: 30px; height: 30px; margin-top: -15px; opacity: .4; }
    .jp-rows { padding: 9px 9px 0; gap: 7px; }
    .jp-cell { padding: 6px 8px; gap: 6px; }
    .jp-icon { width: 26px; height: 26px; font-size: .98rem; border-radius: 7px; }
    .jp-icon b { font-size: 1.1rem; }
    .jp-label { font-size: .52rem; letter-spacing: .5px; }
    .jp-amount { font-size: .74rem; }
    .jp-foot { font-size: .62rem; letter-spacing: 1px; }
}

/* Hareket azaltma tercihi: süslemeler durur, rakamlar okunur kalır.
   Sayaç JS tarafında da yavaşlatılıyor (assets/jackpot.js). */
@media (prefers-reduced-motion: reduce) {
    .jp-band-glow, .jp-coin, .jp-cell::after, .jp-title-hard { animation: none; }
    .jp-title-hard { -webkit-text-fill-color: #fff; color: #fff; }
    .jp-row { opacity: 1; transform: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REKOR KAZANÇ KARTLARI — "En Yüksek Slot Kazançları" vitrini
   Jackpot şeridinin dibinde, jp-foot yazısının hemen altında durur (index.php).

   Diziliş yelpaze: kartlar birbirinin üstüne biner, İLK kart en öndedir ve
   sonrakiler onun arkasından çıkar (--z). Üstüne gelince kart öne fırlar.
   Şerit görüş alanına girince kartlar soldan sağa TEKER TEKER uçarak gelir;
   gecikme --i ile sıraya bağlanmıştır (sınıfı assets/jackpot.js ekler).
   ═══════════════════════════════════════════════════════════════════════════ */

.tw-wrap {
    position: relative; z-index: 2;
    margin: 10px 0 2px;
    padding: 0 6px;
}

.tw-track {
    display: flex; align-items: flex-start;
    list-style: none; margin: 0;
    /* Alt/üst boşluk: kart üstüne gelince yukarı kalkıyor, kırpılmasın. */
    padding: 16px 22px 20px;
    /* Tek sırada sığdıkları için kaydırma yok; dar ekranda medya kuralı auto'ya çeviriyor. */
    overflow: hidden;
    scroll-behavior: smooth; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tw-track::-webkit-scrollbar { display: none; }
.tw-track.tw-dragging { scroll-behavior: auto; cursor: grabbing; }

/* Kartlar TEK SIRADA: esneyerek şeridin genişliğine bölüşürler, yatay kaydırma yok.
   Negatif kenar boşluğu (yelpaze binmesi) geri kazanıldığı için kart genişliği
   (şerit + 8 × 30px) / 9 olur — dar ekranlarda aşağıdaki medya kuralları sabit
   genişliğe ve kaydırmaya döner. */
.tw-item {
    position: relative; z-index: var(--z, 1);
    flex: 1 1 0; min-width: 0;
    margin-left: -30px;          /* yelpaze binmesi */
    transition: transform .3s cubic-bezier(.2,.8,.25,1);
}
.tw-item:first-child { margin-left: 0; }
.tw-item:hover { z-index: 60; }

/* ── Kart gövdesi ── */
.tw-card {
    display: block; position: relative;
    border-radius: 13px; overflow: hidden; text-decoration: none;
    background: linear-gradient(180deg, #1a2c5a 0%, #16234a 55%, #101a38 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);
    transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s, border-color .3s;
}
.tw-item:hover .tw-card {
    transform: translateY(-12px) scale(1.045);
    border-color: rgba(251,191,36,.55);
    box-shadow: 0 26px 54px rgba(0,0,0,.62), 0 0 0 1px rgba(251,191,36,.3);
}

/* ── Üstteki kırmızı kurdele ── */
.tw-ribbon {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    position: relative; overflow: hidden;
    padding: 5px 6px;
    background: linear-gradient(180deg, #e11d3c, #a5102a);
    border-bottom: 1px solid rgba(0,0,0,.35);
    color: #fff; font-weight: 900;
    /* Kartlar tek sırada bölüştüğü için genişlik ekrana göre değişiyor; yazı da
       ölçekleniyor, yoksa dar kartta kurdele metni kırpılırdı. Üst sınır 144px'lik
       kartta "TÜRKİYE VE DÜNYA REKORU"nun tam sığdığı ölçüye göre seçildi. */
    font-size: clamp(.32rem, .46vw, .43rem);
    letter-spacing: .1px; text-transform: uppercase; white-space: nowrap;
}
.tw-ribbon i { font-size: 1.35em; color: #fff; flex-shrink: 0; }
.tw-ribbon b { overflow: hidden; text-overflow: ellipsis; }
/* Kurdelenin üstünden geçen ışık. */
.tw-ribbon::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 46px;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    animation: twSweep 3.4s ease-in-out infinite;
}
@keyframes twSweep { 0% { left: -60px; } 55%, 100% { left: 115%; } }

/* ── Kapak görseli + sıra rozeti ── */
.tw-shot {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 3 / 4; background: #0c1226;
}
.tw-shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.2,.8,.25,1);
}
.tw-item:hover .tw-shot img { transform: scale(1.09); }
.tw-shot-bos {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: rgba(255,255,255,.16);
}
/* Görselin altını karartıp rozetin okunmasını garanti eder. */
.tw-shot::after {
    content: ''; position: absolute; inset: auto 0 0; height: 42%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(16,26,56,.92));
}
.tw-rank {
    position: absolute; right: 0; bottom: 10px; z-index: 2;
    min-width: 26px; padding: 2px 7px;
    background: linear-gradient(180deg, #e11d3c, #a5102a);
    border-radius: 5px 0 0 5px;
    color: #fff; font-size: .74rem; font-weight: 900; text-align: center;
    box-shadow: -2px 3px 10px rgba(0,0,0,.5);
}

/* ── Kazanan bilgisi ── */
.tw-detail { display: block; padding: 9px 10px 11px; text-align: center; }
.tw-user {
    display: block; color: #fff; font-size: .78rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-game {
    display: block; margin: 6px 0 7px; padding: 4px 6px;
    background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.35); border-radius: 6px;
    color: #fcd34d; font-size: .63rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-amount {
    display: block; font-size: .96rem; font-weight: 900; letter-spacing: -.2px;
    background: linear-gradient(100deg, #fff 0%, #fff8dc 26%, var(--jp-gold) 44%, #fff 60%, var(--jp-gold) 78%, #fff 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: jpShine 5s linear infinite;
}

/* ── "TIKLA KAZANCI İZLE" düğmesi ── */
.tw-watch {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 7px; padding: 7px 6px;
    border: 0; border-radius: 9px; cursor: pointer;
    background: linear-gradient(180deg, #e11d3c, #9d0f28);
    box-shadow: 0 6px 16px rgba(157,15,40,.45);
    color: #fff; font-family: inherit; font-size: .58rem; font-weight: 900;
    line-height: 1.15; letter-spacing: .4px; text-transform: uppercase;
    transition: filter .2s, transform .2s, box-shadow .2s;
}
.tw-watch:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(157,15,40,.55); }
.tw-watch:active { transform: translateY(0); }
.tw-watch-ic {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 21px; height: 21px; border-radius: 5px;
    background: rgba(0,0,0,.22); font-size: .95rem;
}
.tw-watch-tx { text-align: left; }

/* ── Sıralı giriş: kartlar teker teker uçarak gelir ──
   Sınıflar JS ile ekleniyor (şerit görüş alanına girince), böylece kullanıcı
   bölüme gelmeden animasyon boşa akmaz. JS çalışmazsa .tw-hazir hiç eklenmez
   ve kartlar olduğu gibi görünür — animasyon süs, içerik ona bağlı değil. */
.tw-wrap.tw-hazir .tw-item {
    opacity: 0;
    transform: translateX(46px) scale(.9);
}
.tw-wrap.tw-hazir.tw-in .tw-item {
    animation: twIn .66s cubic-bezier(.2,.9,.28,1.25) forwards;
    animation-delay: calc(var(--i) * 90ms);
}
/* Kart yukarıdan savrularak düşer, hafifçe aşar ve yerine oturur. */
@keyframes twIn {
    0%   { opacity: 0; transform: translateX(64px) translateY(-20px) rotate(7deg) scale(.84); }
    55%  { opacity: 1; transform: translateX(-7px) translateY(5px) rotate(-2deg) scale(1.05); }
    78%  { transform: translateX(3px) translateY(-3px) rotate(.7deg) scale(.985); }
    100% { opacity: 1; transform: none; }
}

/* ── Sürekli hareket ──────────────────────────────────────────────────────
   Kartlar durduğu yerde hafifçe süzülür; gecikme sıraya bağlı olduğu için sıra
   boyunca dalga gibi ilerler. Animasyon .tw-card üzerinde: üstüne gelindiğinde
   kapatılıyor, yoksa animasyonun transform'u hover yükselmesini ezerdi. */
.tw-card {
    animation: twFloat 4.6s ease-in-out infinite;
    /* Giriş uçuşu bitmeden başlamasın. */
    animation-delay: calc(var(--i) * 90ms + 760ms);
}
.tw-item:hover .tw-card { animation: none; }
@keyframes twFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Kapak görselinin üstünden düzenli aralıklarla geçen ışık çizgisi. */
.tw-shot::before {
    content: ''; position: absolute; inset: -30% -60%; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
    transform: translateX(-120%);
    animation: twGlint 5.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 420ms);
}
@keyframes twGlint {
    0%, 72% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

/* Sıra rozeti nabız gibi parlar. */
.tw-rank {
    animation: twRank 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 180ms);
}
@keyframes twRank {
    0%, 100% { box-shadow: -2px 3px 10px rgba(0,0,0,.5); }
    50%      { box-shadow: -2px 3px 16px rgba(225,29,60,.9), 0 0 0 1px rgba(255,255,255,.28); }
}

/* ── Video katmanı ── */
.tw-modal {
    position: fixed; inset: 0; z-index: 99998; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(4,6,14,.86); backdrop-filter: blur(4px);
    animation: twFade .25s ease both;
}
@keyframes twFade { from { opacity: 0; } }
.tw-modal-box {
    position: relative; width: min(880px, 100%);
    background: #0d1226; border: 1px solid rgba(251,191,36,.3); border-radius: 14px;
    overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.tw-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: linear-gradient(90deg, #1a2c5a, #101a38);
    color: #fff; font-size: .85rem; font-weight: 800;
}
.tw-modal-close {
    border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
    width: 28px; height: 28px; border-radius: 7px; font-size: 1.1rem; line-height: 1;
}
.tw-modal-close:hover { background: #e11d3c; }

/* Kayıt sahnesi: çerçeve açılana kadar durum yazısı görünür, açılınca yumuşakça belirir. */
.tw-modal-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #070a16; }
.tw-modal-stage iframe {
    display: block; width: 100%; height: 100%; border: 0;
    opacity: 0; transition: opacity .35s;
}
.tw-modal-stage iframe.hazir { opacity: 1; }
.tw-modal-durum {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    color: var(--text-dim, #8b93a7); font-size: .9rem; font-weight: 700; text-align: center; padding: 20px;
}
.tw-modal-durum i { font-size: 2.1rem; color: var(--jp-gold); }
.tw-modal-retry {
    border: 1px solid rgba(251,191,36,.5); background: transparent; color: var(--jp-gold);
    padding: 8px 18px; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: .82rem; font-weight: 800;
}
.tw-modal-retry:hover { background: var(--jp-gold); color: #3b1206; }

/* ═══ Duyarlı ═══
   Tek sıra yalnızca masaüstünde: telefonda 9 kartı yan yana sıkıştırmak her birini
   ~40 piksele düşürürdü. Dar ekranda sabit genişliğe ve yatay kaydırmaya dönülür. */
@media (max-width: 1100px) {
    .tw-track { overflow-x: auto; overflow-y: hidden; }
    .tw-item { flex: 0 0 auto; width: 158px; margin-left: -26px; }
}
@media (max-width: 480px) {
    .tw-wrap { padding: 0; margin-top: 6px; }
    .tw-track { padding: 12px 12px 16px; }
    .tw-item { width: 138px; margin-left: -20px; }
    /* 138px'lik kartta kurdele metni tam sığsın: harf aralığı sıfırlanır, boşluklar daralır. */
    .tw-ribbon { font-size: .35rem; letter-spacing: 0; padding: 4px 3px; gap: 3px; }
    .tw-user { font-size: .68rem; }
    .tw-game { font-size: .55rem; }
    .tw-amount { font-size: .8rem; }
    .tw-watch { font-size: .5rem; padding: 6px 4px; }
    .tw-watch-ic { width: 18px; height: 18px; font-size: .8rem; }
}

/* Hareket azaltma: uçuş, süzülme, ışık ve büyüme durur — kartlar olduğu yerde durur. */
@media (prefers-reduced-motion: reduce) {
    .tw-wrap.tw-hazir .tw-item,
    .tw-wrap.tw-hazir.tw-in .tw-item { opacity: 1; transform: none; animation: none; }
    .tw-card, .tw-shot::before, .tw-rank { animation: none; }
    .tw-card { transform: none; }
    .tw-shot::before { display: none; }
    .tw-ribbon::after, .tw-amount { animation: none; }
    .tw-amount { -webkit-text-fill-color: var(--jp-gold); color: var(--jp-gold); }
    .tw-item:hover .tw-card { transform: none; }
    .tw-item:hover .tw-shot img { transform: none; }
}

/* Başlık görseli — jackpot_banner ayarı doluysa yazının yerine geçer (index.php).
   Yüklenemezse onerror yazıyı geri getirir, bu yüzden burada gizleme/fallback yok. */
.jp-banner {
    position: relative; z-index: 2;
    display: block; margin: 0 auto;
    max-width: 100%; height: auto;
}

/* Banner varken başlığın iki yanındaki paralar gizlenir: görselin arkasında kalıyorlar. */
.jp-head-banner .jp-coin { display: none; }
/* Görsel şeridin tam genişliğini kullansın — yatay iç boşluk banner'da gereksiz. */
.jp-head-banner { padding-left: 0; padding-right: 0; }

/* Kart artık bağlantı değil, tıklanabilir kutu: imleç ve odak halkası elle veriliyor. */
.tw-card[role="button"] { cursor: pointer; }
.tw-card[role="button"]:focus-visible {
    outline: 2px solid var(--jp-gold);
    outline-offset: 2px;
}