/* =====================================================================
   Vitrin (market): deal şeridi, kategori kapsülleri, donut kartları,
   Kendi kutunu yap, kasa penceresi, sipariş sonucu
   ===================================================================== */

.market-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.market-head .page-head { margin-bottom: 0; }
.coins-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 360px; padding: 12px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); }
.coins-row .label { width: 100%; margin: 0 0 4px; color: var(--ink-2); font-size: 14px; }

/* --- Günün Deal'i şeridi ------------------------------------------------ */
.deal-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    padding: 12px 18px 12px 12px;
    background: repeating-linear-gradient(-45deg, var(--lemon-lt) 0 18px, var(--stripe-2) 18px 36px);
    border: var(--edge);
    border-radius: var(--r-lg);
    box-shadow: var(--pop);
}
.ds-art { width: 76px; height: 76px; display: grid; place-items: center; background: var(--lemon); border: 2px solid var(--ink); border-radius: 50%; }
.ds-art svg, .ds-art img { width: 70px; height: 70px; }
.ds-text { display: grid; gap: 2px; min-width: 0; }
.ds-label { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--berry-dk); }
.ds-text b { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.ds-price { display: grid; justify-items: end; }
.ds-price b { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--berry-dk); }
.ds-price s { color: var(--ink-3); font-weight: 700; }
.ds-clock { display: grid; justify-items: center; gap: 2px; }
.ds-clock span { font-size: 12px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .4px; }
.ds-clock b { padding: 4px 10px; font-family: var(--mono); font-size: 18px; color: var(--on-ink); background: var(--ink); border-radius: 10px; }

/* --- Kategoriler ve sıralama ------------------------------------------ */
.market-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 9px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background-color .12s;
}
.cat img { width: 24px; height: 24px; }
.cat:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.cat[aria-pressed="true"] { color: var(--ink); background: var(--berry); box-shadow: 0 3px 0 var(--ink); }
.cat .n { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; font-size: 12px; color: var(--text); background: var(--field); border: 2px solid var(--ink); border-radius: 999px; }
.sort { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.sort .input { width: auto; font-size: 15px; padding: 8px 40px 8px 14px; border-radius: 999px; }

/* --- Ürün kartları --------------------------------------------------------- */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; }
.product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 18px;
    background: var(--paper);
    border: var(--edge);
    border-radius: var(--r-lg);
    box-shadow: var(--pop);
    transition: transform .18s, box-shadow .18s;
}
.product:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--pop-lg); }
.product.soldout { opacity: .62; }
.product.on-deal { background: var(--lemon-lt); }
/* Rozet + "Kutunda" dar kartta sigmazsa alt satira iner (kart disina tasmasin) */
.p-flags { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; pointer-events: none; }
.p-flags .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.p-flags .p-incart { margin-left: auto; }
.p-art {
    display: grid;
    place-items: center;
    height: 172px;
    margin-bottom: 4px;
    --plate: 80px;
    /* Tabak donutun tam arkasinda (donut golgesiyle birlikte kutunun %47'sinde) */
    background: radial-gradient(circle var(--plate) at 50% 47%, color-mix(in srgb, var(--glaze) var(--plate-amt), var(--plate-mix)) 0 calc(var(--plate) - 1px), transparent var(--plate));
}
.p-art .donut { width: 150px; height: 150px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), translate .3s ease-out; }
.product:hover .p-art .donut { transform: rotate(-12deg) scale(1.06); }
.p-art.item { background: radial-gradient(circle var(--plate) at 50% 52%, var(--cream-2) 0 calc(var(--plate) - 1px), transparent var(--plate)); }
.p-art .item-icon { width: 96px; height: 96px; filter: drop-shadow(4px 5px 0 rgba(6, 10, 40, .18)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), translate .3s ease-out; }
.product:hover .p-art .item-icon { transform: translateY(-6px) rotate(6deg); }
.p-kind { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--berry-dk); }
.p-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.15; overflow-wrap: anywhere; }
/* Cok uzun, bosluksuz ad ya da aciklama karti genisletip sayfayi yana tasirmasin */
.products > .product { min-width: 0; }
.p-desc, .co-line { overflow-wrap: anywhere; }
.p-desc { margin: 0; font-size: 14px; color: var(--ink-2); flex: 1; }
.p-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.p-price b { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.p-price s { color: var(--ink-3); font-weight: 700; font-size: 15px; }
.p-per { flex-basis: 100%; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.p-stock { font-size: 13px; font-weight: 800; color: var(--berry-dk); }
.p-actions { display: grid; gap: 8px; }
.products .empty { grid-column: 1 / -1; }

/* --- Kendi kutunu yap ------------------------------------------------- */
.builder {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    margin-top: 44px;
    padding: 30px 34px;
    background: linear-gradient(135deg, var(--lilac-lt), var(--paper) 60%);
    border: var(--edge);
    border-radius: 34px;
    box-shadow: var(--pop-lg);
}
.b-art { position: relative; display: grid; place-items: center; }
.b-art img { width: 240px; height: 240px; animation: hop 3.2s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-10px) rotate(-4deg); } }
.b-big {
    position: absolute;
    right: 6px;
    top: 14px;
    padding: 6px 14px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 30px;
    color: var(--ink);
    background: var(--lemon);
    border: var(--edge);
    border-radius: 999px;
    transform: rotate(8deg);
}
.b-main h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; }
.b-main .eyebrow { margin-bottom: 12px; }
.b-main .eyebrow .dot { background: var(--lilac); }
.b-lead { margin: 0 0 18px; }
.b-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.b-stepper { display: inline-flex; align-items: center; gap: 8px; }
.b-stepper .btn { width: 44px; padding: 0; font-size: 22px; }
.b-stepper .input { width: 110px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 26px; padding: 6px 8px; -moz-appearance: textfield; }
.b-stepper .input::-webkit-outer-spin-button, .b-stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.b-unit { font-family: var(--display); font-weight: 700; font-size: 24px; margin-left: -4px; }
.b-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.b-range {
    --fill: 0%;
    width: 100%;
    height: 14px;
    margin: 6px 0 18px;
    appearance: none;
    background: linear-gradient(90deg, var(--lilac) 0 var(--fill), var(--field) var(--fill));
    border: 2px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
}
.b-range::-webkit-slider-thumb { appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--berry); border: var(--edge); box-shadow: 0 3px 0 var(--ink); }
.b-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--berry); border: var(--edge); box-shadow: 0 3px 0 var(--ink); }
.b-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.b-tier { display: grid; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--field); border: 2px dashed var(--ink-3); border-radius: 14px; transition: all .15s; }
.b-tier b { font-family: var(--display); font-size: 14px; color: var(--text); }
.b-tier.on b { color: var(--ink); }
.b-tier.on { background: var(--lilac); border: 2px solid var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.b-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 16px; border-top: 2px dashed var(--ink-3); }
.b-sum { display: grid; }
.b-sum b { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--berry-dk); }
.b-sum span { font-weight: 700; color: var(--ink-2); }

/* --- Kasa penceresi -------------------------------------------------- */
.checkout { width: min(600px, 100%); margin: auto; }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.co-head h2 { margin: 0; }
.co-lines { display: grid; gap: 8px; padding: 12px 14px; background: var(--field); border: 2px solid var(--ink); border-radius: var(--r); margin-bottom: 16px; }
.co-line { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 15px; }
.co-line .slot { width: 40px; height: 40px; border-radius: 12px; }
.co-line b { font-family: var(--display); font-weight: 600; }
.co-line .q { color: var(--ink-2); font-weight: 700; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; margin-top: 2px; border-top: 2px dashed var(--cream-3); font-family: var(--display); font-weight: 600; color: var(--ink-2); }
.co-total b { font-family: var(--display); font-size: 26px; color: var(--text); }
.co-total small { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--ink-2); margin-left: 8px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    text-align: left;
    font: inherit;
    color: var(--text);
    background: var(--field);
    border: 2px solid var(--ink-3);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.mode-opt:hover { border-color: var(--ink); }
.mode-opt[aria-checked="true"] { border-color: var(--ink); background: var(--berry-lt); box-shadow: 0 3px 0 var(--ink); }
.mode-opt .slot { width: 44px; height: 44px; }
.mode-opt b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.mode-opt span span { font-size: 13px; color: var(--ink-2); }

.player-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.player-row .input-wrap .input { padding-right: 96px; }
.player-ok { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 800; color: var(--money); }
.player-ok .face { --s: 3px; }

.coin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.coin-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--field);
    color: var(--text);
    border: 2px solid var(--ink-3);
    border-radius: var(--r);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.coin-opt:hover { border-color: var(--ink); }
.coin-opt[aria-checked="true"] { border-color: var(--ink); background: var(--berry-lt); box-shadow: 0 3px 0 var(--ink); }
.coin-opt .c-name { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; }
.coin-opt .c-net { font-size: 13px; color: var(--ink-2); }

.paybox { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.qr { width: 180px; padding: 10px; background: #fff; border: var(--edge); border-radius: var(--r); box-shadow: var(--pop); }
.qr svg { display: block; width: 100%; height: auto; }
.copy-field { margin-bottom: 12px; }
.copy-field .label { margin-bottom: 4px; }
.copy-line { display: flex; align-items: stretch; background: var(--field); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.copy-line .val { flex: 1; min-width: 0; padding: 10px 12px; font-family: var(--mono); font-weight: 700; font-size: 15px; line-height: 1.35; word-break: break-all; color: var(--text); }
.copy-line .val.big { font-size: 21px; }
.copy-line .btn { min-height: 0; border-width: 0 0 0 2px; border-radius: 0; box-shadow: none; background: var(--cream-2); }
.copy-line .btn:hover { transform: none; background: var(--berry-lt); }
.timer { font-family: var(--mono); font-weight: 700; color: var(--text); }
.pay-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 16px 0; background: var(--field); border: 2px solid var(--ink); border-radius: 14px; font-weight: 700; }
.pay-status .spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 5px solid var(--berry); border-top-color: transparent; animation: spin 1s linear infinite; }
.pay-status.ok .spin { border-color: var(--mint); border-top-color: transparent; }
.pay-status .t-right { margin-left: auto; font-size: 14px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.dev-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; border: 2px dashed var(--caramel); border-radius: 14px; background: var(--caramel-lt); margin-bottom: 14px; }
.dev-tools .label { width: 100%; margin: 0; color: var(--caramel-dk); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }

/* Sipariş sonucu */
.res { padding: 14px 0 6px; border-top: 2px dashed var(--cream-3); }
.res:first-of-type { border-top: 0; }
.res-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.res-title img { width: 26px; height: 26px; image-rendering: pixelated; }
.rd-chip { margin-left: auto; }
.codes { display: grid; gap: 8px; margin-bottom: 14px; }
.code-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--field); border: 2px dashed var(--ink); border-radius: 14px; }
.code-row code { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; letter-spacing: 1.5px; color: var(--text); overflow-wrap: anywhere; }
.code-row .amt { font-family: var(--display); font-weight: 700; color: var(--money); }
.res-items { display: grid; gap: 8px; margin-bottom: 10px; }
.res-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--field); border: 2px solid var(--ink); border-radius: 14px; }
.res-item .slot { width: 40px; height: 40px; border-radius: 12px; }

@media (max-width: 960px) {
    .deal-strip { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ds-clock { grid-column: 2; justify-items: start; }
    .deal-strip > .btn { grid-column: 3; grid-row: 2; }
    .builder { grid-template-columns: 1fr; justify-items: center; padding: 24px 18px; gap: 14px; }
    .b-art img { width: 190px; height: 190px; }
    .b-main { width: 100%; }
}
@media (max-width: 860px) {
    .cats { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; width: 100%; }
    .cats::-webkit-scrollbar { display: none; }
    .cat { flex: none; }
    .coins-row { max-width: none; }
}
@media (max-width: 640px) {
    .deal-strip { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; }
    .ds-price { grid-column: 2; justify-items: start; }
    .ds-clock { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto auto; align-items: center; gap: 8px; }
    .deal-strip > .btn { grid-column: 1 / -1; grid-row: auto; }
    .modes { grid-template-columns: 1fr; }
    .paybox { grid-template-columns: 1fr; justify-items: center; }
    .paybox > div:last-child { width: 100%; }
    .coin-grid { grid-template-columns: 1fr; }
    .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .product { padding: 12px 12px 14px; }
    .p-art { height: 128px; --plate: 60px; }
    .p-art .donut { width: 112px; height: 112px; }
    .p-art .item-icon { width: 72px; height: 72px; }
    .p-name { font-size: 19px; }
    .p-price b { font-size: 24px; }
    .p-desc { display: none; }
    .b-total .btn { width: 100%; }
}
@media (max-width: 340px) {
    .products { grid-template-columns: minmax(0, 1fr); }
}

/* Ödeme onayı metni (şartlar / iade) */
.pay-agree { margin: 4px 0 14px; font-size: 13px; color: var(--ink-2); }
.pay-agree a { color: var(--text); font-weight: 800; }

/* --- Kupon / yayıncı kodu ------------------------------------------------ */
.coupon-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.coupon-input { font-family: var(--mono); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.coupon-input::placeholder { letter-spacing: 1px; }
.coupon-ok { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; background: var(--mint-lt); border: 2px dashed var(--mint-dk); border-radius: 14px; font-weight: 700; }
.coupon-ok .btn { margin-left: auto; }
/* Kod etiketi: bilet koçanı gibi, kenarı çentikli */
.coupon-tag {
    display: inline-block;
    padding: 4px 12px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: var(--ink);
    background: radial-gradient(circle at 0 50%, transparent 6px, var(--lemon) 6.5px) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent 6px, var(--lemon) 6.5px) right / 51% 100% no-repeat;
}
.coupon-tag.sm { padding: 1px 9px; font-size: 12px; letter-spacing: 1px; }
.co-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.co-sub + .co-total { margin-top: 0; }
.co-discount { color: var(--money); }
.co-discount > span:first-child { display: inline-flex; align-items: center; gap: 8px; }

/* Kapali coinler: gorunur ama secilemez ("Kullanilmiyor") */
.coins-row .coin-off { opacity: .38; filter: grayscale(1); }
.coin-opt.off { position: relative; cursor: not-allowed; opacity: .55; filter: grayscale(.9); box-shadow: none; }
.coin-opt.off:hover { border-color: var(--ink-3); }
.coin-opt .c-off {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text);
    background: var(--cream-2);
    border: 1.5px solid var(--ink-3);
    border-radius: 999px;
}