/* =========================================================
   MARKET
   Tahmin Ligi'nden kazanılan TG ile alınan ödüller.
   Kart dili diğer sayfalarla ortak; vurgu rengi altın.
   ========================================================= */

/* ---- başlık ---- */
.mk-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
    padding: 18px 20px;
    border-radius: var(--r);
    background: var(--panel);
    border: 1px solid var(--line);
}

.mk-head__t { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 1.6px; }
.mk-head__s {
    margin: 5px 0 0;
    max-width: 60ch;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.6;
}
.mk-head__s b { color: var(--gold-2); font-weight: 700; }

/* bakiye rozeti */
.mk-bakiye {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding: 10px 18px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .07));
    border: 1px solid rgba(var(--accent-rgb), .45);
    text-decoration: none;
    transition: border-color .15s, filter .15s;
}
.mk-bakiye:hover { border-color: var(--gold); filter: brightness(1.08); }
.mk-bakiye__n {
    color: var(--gold-2);
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.mk-bakiye__b { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; }

.mk-giris {
    margin-left: auto;
    padding: 10px 20px;
    border-radius: 99px;
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: #0a1526;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-decoration: none;
}

/* ---- uyarılar ---- */
.mk-uyari {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.6;
}
.mk-uyari--hata { background: rgba(224, 36, 46, .12); border: 1px solid rgba(224, 36, 46, .4); color: #ff8e95; }
.mk-uyari--ok   { background: rgba(94, 213, 141, .1);  border: 1px solid rgba(94, 213, 141, .35); color: #8fe0ac; }
.mk-uyari small { display: block; margin-top: 6px; color: var(--text-3); font-size: 11.5px; }

.mk-kod {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    vertical-align: middle;
}
.mk-kod code {
    padding: 5px 12px;
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .35);
    border: 1px dashed rgba(94, 213, 141, .5);
    color: #d7f5e3;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13.5px;
    letter-spacing: .5px;
    user-select: all;
}
.mk-kod__kop {
    padding: 5px 11px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color .14s, border-color .14s;
}
.mk-kod__kop:hover { color: var(--text); border-color: var(--text-3); }

/* ---- boş vitrin ---- */
.mk-bos {
    padding: 46px 24px;
    border-radius: var(--r);
    background: var(--panel);
    border: 1px solid var(--line);
    text-align: center;
}
.mk-bos b { display: block; font-size: 16px; margin-bottom: 8px; }
.mk-bos p { margin: 0 auto 18px; max-width: 44ch; color: var(--text-3); font-size: 13px; line-height: 1.7; }
.mk-bos__cta {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 99px;
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: #0a1526;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-decoration: none;
}

/* =========================================================
   ÜRÜN KARTI
   Bunlar birer ödül; kart da öyle dursun. Ödünç alınan dil:
   koleksiyon/ganimet kartı — altın ışık havuzu, üstten geçen
   ışık huzmesi, madalyon fiyat. Sitenin lacivert/altın paleti
   ve çapraz dokusu korunur.

   Durum sınıfları (market.php'de veriliyor):
     .is-alinabilir  şu an gerçekten alınabilir → altın vurgu
     .is-kapali      tükendi / süresi dolmuş / henüz açılmamış
   ========================================================= */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.mk-urun {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(23, 39, 65, .92), rgba(11, 21, 38, .96));
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1),
                border-color .22s, box-shadow .22s;
}

/* --- üstten geçen ışık huzmesi (hover) --- */
.mk-urun::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 42%;
    height: 220%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: rotate(18deg) translateX(-150%);
    transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.mk-urun:hover::before { transform: rotate(18deg) translateX(430%); }

/* --- iç kenar: üstte cam parlaması, hover'da altın hat --- */
.mk-urun::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
                inset 0 0 0 1px rgba(var(--accent-rgb), 0);
    transition: box-shadow .22s;
}

.mk-urun:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* alınabilir ürün: altın kenar + sıcak dış ışık */
.mk-urun.is-alinabilir { border-color: rgba(var(--accent-rgb), .22); }
.mk-urun.is-alinabilir:hover {
    border-color: rgba(var(--accent-rgb), .45);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 34px rgba(var(--accent-rgb), .12);
}
.mk-urun.is-alinabilir:hover::after {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                inset 0 0 0 1px rgba(var(--accent-rgb), .4);
}

/* ---- görsel kuyusu ---- */
.mk-urun__gorsel {
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    background: linear-gradient(165deg, #1c3050 0%, #0e1b32 55%, #0a1424 100%);
    overflow: hidden;
}

/* altın ışık havuzu + sitenin çapraz dokusu (görselin ardında) */
.mk-urun__gorsel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(62% 56% at 50% 40%, rgba(var(--accent-rgb), .2), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 9px);
    transition: opacity .25s;
}

/* alt vinyet — kart gövdesine yumuşak geçiş (her şeyin üstünde) */
.mk-urun__gorsel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 -34px 46px -26px rgba(6, 12, 25, .9);
}

.mk-urun__gorsel img {
    /* Mutlak konum şart: aspect-ratio'lu kutuda yüzde yükseklik
       çözümlenmiyor, görsel kendi doğal oranına düşüp kuyudan taşıyor
       ve alt-üst kırpılıyordu (object-fit: contain etkisiz kalıyordu). */
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5));
    transition: transform .32s cubic-bezier(.2, .7, .3, 1), filter .32s;
}
.mk-urun:hover .mk-urun__gorsel img { transform: scale(1.05); }

/* görseli olmayan ürün: baş harfler madalyon içinde — kaza değil,
   tasarım gibi dursun */
.mk-urun__ph {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), .3);
    background: radial-gradient(circle at 50% 32%, rgba(var(--accent-rgb), .16), transparent 72%);
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .045), inset 0 1px 0 rgba(255, 255, 255, .07);
    color: var(--gold-2);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}
.mk-urun:hover .mk-urun__ph { transform: scale(1.05); }

/* ---- durum rozeti ---- */
.mk-rozet {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 3;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
}
.mk-rozet--yok {
    background: rgba(224, 36, 46, .22);
    border: 1px solid rgba(224, 36, 46, .55);
    color: #ffa2a8;
}
.mk-rozet--az {
    background: rgba(224, 168, 56, .2);
    border: 1px solid rgba(224, 168, 56, .5);
    color: var(--accent-2);
    animation: mkNabiz 2.4s ease-in-out infinite;
}
@keyframes mkNabiz {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 0 0 0 rgba(224, 168, 56, .3); }
    50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 0 0 5px rgba(224, 168, 56, 0); }
}

/* ---- gövde ---- */
.mk-urun__govde { flex: 1; padding: 15px 16px 12px; }

.mk-urun__ad {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.1px;
}
.mk-urun__ac {
    margin: 8px 0 0;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.6;
}

.mk-urun__tarih,
.mk-urun__limit {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--text-3);
    font-size: 11px;
}
.mk-urun__tarih b { color: var(--gold-2); font-weight: 700; }

/* küçük altın nokta — bilgi satırlarının işareti */
.mk-urun__tarih::before,
.mk-urun__limit::before {
    content: '';
    width: 4px;
    height: 4px;
    flex: none;
    margin-top: 6px;          /* metin iki satıra taşsa da ilk satırla hizalı */
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .55);
}

/* ---- alt şerit ---- */
.mk-urun__alt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px 15px;
    flex-wrap: wrap;          /* çok haneli fiyat düğmeyi taşırmasın */
}

/* düz çizgi yerine ortada yoğunlaşan altın hat */
.mk-urun__alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .3) 22%,
                                rgba(var(--accent-rgb), .3) 78%, transparent);
}

/* ---- fiyat madalyonu ---- */
.mk-fiyat {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.mk-fiyat b {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #f4f8ff, var(--gold) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mk-fiyat small {
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .3);
    color: var(--gold);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Satın alma düğmesi bir form içinde duruyor; formun kendisi de
   şeritte düğme gibi davranmalı ki hizalama tutarlı olsun. */
.mk-urun__alt form { flex: none; display: flex; }

/* ---- satın al ---- */
.mk-al {
    position: relative;
    flex: none;
    padding: 11px 20px;
    border-radius: 99px;
    background: linear-gradient(180deg, #f4f8ff, var(--gold) 58%, var(--accent));
    color: var(--on-accent);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .26),
                inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: filter .16s, box-shadow .16s, transform .08s;
}
.mk-al:hover {
    filter: brightness(1.06);
    box-shadow: 0 9px 22px rgba(var(--accent-rgb), .36),
                inset 0 1px 0 rgba(255, 255, 255, .6);
}
.mk-al:active { transform: translateY(1px); }

.mk-al--pasif {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line-2);
    color: var(--text-3);
    box-shadow: none;
    cursor: not-allowed;
}
.mk-al--pasif:hover { filter: none; box-shadow: none; }
a.mk-al--pasif { cursor: pointer; }
a.mk-al--pasif:hover { color: var(--text-2); border-color: var(--text-3); }

/* ---- kapalı ürün ----
   Kartın tamamını şeffaflaştırmak metni okunmaz yapıyordu; onun
   yerine yalnız görsel rengini yitirir, metin okunur kalır. */
.mk-urun.is-kapali { border-color: rgba(255, 255, 255, .05); }
.mk-urun.is-kapali:hover { transform: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.mk-urun.is-kapali::before { display: none; }
/* Tamamen griye çevirmek ürünü tanınmaz yapıyordu; rengin bir kısmı
   kalsın, yalnız "şu an alınamaz" hissi versin. */
.mk-urun.is-kapali .mk-urun__gorsel img { filter: grayscale(.8) brightness(.72); }
.mk-urun.is-kapali .mk-urun__gorsel::before { opacity: .22; }
.mk-urun.is-kapali .mk-urun__ph { color: var(--text-3); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.mk-urun.is-kapali .mk-urun__ad { color: var(--text-2); }
.mk-urun.is-kapali .mk-fiyat b {
    background: linear-gradient(180deg, #93a4bd, #64758f);
    -webkit-background-clip: text;
    background-clip: text;
}
.mk-urun.is-kapali .mk-fiyat small {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-2);
    color: var(--text-3);
}
.mk-urun.is-kapali .mk-urun__alt::before {
    background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* ---- dar ekran ---- */
@media (max-width: 620px) {
    .mk-head { padding: 14px 16px; }
    .mk-head__t { font-size: 17px; }
    .mk-bakiye,
    .mk-giris { margin-left: 0; }

    .mk-grid { grid-template-columns: 1fr 1fr; gap: 11px; }

    /* dokunmatikte hover yok: huzme ve büyüme gereksiz yük */
    .mk-urun::before { display: none; }
    .mk-urun:hover { transform: none; }
    .mk-urun:hover .mk-urun__gorsel img,
    .mk-urun:hover .mk-urun__ph { transform: none; }

    .mk-urun__gorsel { aspect-ratio: 5 / 4; }
    .mk-urun__gorsel img { padding: 10px; }
    .mk-urun__ph { width: 60px; height: 60px; font-size: 21px; box-shadow: none; }

    .mk-urun__govde { padding: 11px 12px 9px; }
    .mk-urun__ad { font-size: 13px; }
    .mk-urun__ac { display: none; }
    .mk-urun__tarih,
    .mk-urun__limit { font-size: 10px; margin-top: 7px; }

    .mk-urun__alt { flex-direction: column; align-items: stretch; gap: 9px; padding: 11px 12px 13px; }
    .mk-fiyat { justify-content: center; }
    .mk-fiyat b { font-size: 19px; }

    /* dar ekranda düğme şeridi doldurur — form da onunla birlikte */
    .mk-urun__alt form { flex: 1; }
    .mk-al { flex: 1; text-align: center; padding: 10px 14px; }

    .mk-kod { margin-left: 0; margin-top: 8px; display: flex; }
    .mk-kod code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* hareketi kısıtlayan kullanıcıya huzme ve büyüme gösterilmez */
@media (prefers-reduced-motion: reduce) {
    .mk-urun::before { display: none; }
    .mk-urun,
    .mk-urun__gorsel img,
    .mk-urun__ph { transition: none; }
    .mk-urun:hover { transform: none; }
    .mk-urun:hover .mk-urun__gorsel img,
    .mk-urun:hover .mk-urun__ph { transform: none; }
    .mk-rozet--az { animation: none; }
}

/* ---- profil eksik şeridi ---- */
.mk-eksik {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: var(--r);
    background: rgba(224, 168, 56, .1);
    border: 1px solid rgba(224, 168, 56, .38);
}
.mk-eksik b { display: block; color: var(--accent-2); font-size: 13px; }
.mk-eksik p { margin: 4px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.55; }

.mk-eksik__git {
    margin-left: auto;
    flex: none;
    padding: 10px 20px;
    border-radius: 99px;
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: #0a1526;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-decoration: none;
}
.mk-eksik__git:hover { filter: brightness(1.07); }

@media (max-width: 620px) {
    .mk-eksik__git { margin-left: 0; width: 100%; text-align: center; }
}