/* =====================================================================
   Kod Kullan: kurye rotası ([fiş] + [hesap] -> yol -> [money]),
   bilet koçanlı kod alanı, hesap onayı (3D kafa), yan bilgi
   ===================================================================== */

.redeem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 30px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}
.machine-card { scroll-margin-top: 110px; }

/* --- Kurye rotası ------------------------------------------------------- */
.machine {
    --p: 0;
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr) auto;
    align-items: end;
    gap: 16px;
    padding: 20px 20px 14px;
    margin: 0 0 24px;
    background: radial-gradient(circle, var(--cream-3) 1.5px, transparent 2px) 0 0 / 18px 18px, var(--field);
    border: 2px solid var(--ink);
    border-radius: 22px;
}
.m-in { display: flex; align-items: flex-end; gap: 10px; }
.m-cell { display: grid; justify-items: center; gap: 6px; }
.m-label { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--ink-2); }
.m-plus { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--ink-3); margin-bottom: 30px; }
.m-slot { width: 62px; height: 62px; border-radius: 18px; background: var(--cream-2); transition: background-color .25s, transform .25s; }
.m-slot.big { width: 78px; height: 78px; border-radius: 50%; }
.m-slot > img { width: 38px; height: 38px; opacity: .35; filter: grayscale(1); transition: opacity .25s, filter .25s; }
.m-slot.big > img { width: 46px; height: 46px; }
.m-slot.on > img { opacity: 1; filter: none; }
#m-code.on { background: var(--berry-lt); }
#m-player.on { background: var(--mint-lt); }
#m-out.on { background: var(--lemon-lt); }
.m-slot .count { font-size: 14px; right: -10px; bottom: -6px; }
.m-q { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink-3); }
#m-player .face { --s: 5px; display: none; }
#m-player.on .face { display: inline-block; }
#m-player.on .m-q { display: none; }

.m-mid { position: relative; align-self: stretch; display: grid; align-items: end; padding-bottom: 33px; min-height: 92px; }
.m-arrow { display: block; width: 100%; height: 12px; overflow: visible; }
.m-arrow-bg { fill: var(--cream-3); stroke: var(--ink); stroke-width: .35; }
.m-arrow-fill { fill: var(--berry); transition: fill .3s; }
#m-clip-rect { transition: width .8s cubic-bezier(.3, .9, .3, 1); }
.machine.done .m-arrow-fill { fill: var(--mint); }
.machine.warn .m-arrow-fill { fill: var(--caramel); }
.machine.err .m-arrow-fill { fill: var(--red); }
/* Kurye yol boyunca ilerler */
.m-courier {
    position: absolute;
    bottom: 38px;
    left: calc(var(--p) * (100% - 56px));
    width: 56px;
    height: 56px;
    transition: left .8s cubic-bezier(.3, .9, .3, 1);
    filter: grayscale(.6);
    opacity: .6;
}
.machine.burning .m-courier, .machine.done .m-courier { filter: none; opacity: 1; }
.machine.burning .m-courier { animation: ride .5s ease-in-out infinite alternate; }
@keyframes ride { to { transform: translateY(-5px) rotate(-6deg); } }
.machine.done #m-out { animation: out-glow 1s ease-in-out 3; }
@keyframes out-glow { 50% { box-shadow: 0 0 0 9px var(--mint-lt); transform: scale(1.06); } }

/* --- Bilet koçanlı kod alanı ------------------------------------------ */
.ticket-input {
    position: relative;
    display: flex;
    background: var(--field);
    border: 2px solid var(--ink);
    border-radius: 14px;
    transition: box-shadow .12s, border-color .12s;
}
.ticket-input:focus-within { border-color: var(--berry); box-shadow: 0 0 0 4px var(--berry-lt); }
.ti-stub {
    display: grid;
    place-items: center;
    width: 56px;
    flex: none;
    background: var(--berry-lt);
    border-right: 2px dashed var(--ink);
    border-radius: 12px 0 0 12px;
}
.ti-stub img { image-rendering: pixelated; }
.ticket-input .input.code { border: 0; box-shadow: none; border-radius: 0 12px 12px 0; }
.ticket-input:has(.wrong) { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-lt); }

/* --- Hesap onayı: 3D kafa ------------------------------------------- */
.who { display: grid; justify-items: center; gap: 14px; text-align: center; }
.stage {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--field) 0 45%, var(--cream-2) 46%);
    border: var(--edge);
    box-shadow: var(--pop);
}
.who .tooltip, .who .alert { width: 100%; text-align: left; margin: 0; }
.drag-hint { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-top: -4px; }

/* Teslimattan sonra "Bizi değerlendir" öne çıksın */
#status-buttons.two { grid-template-columns: 3fr 2fr; }

/* --- Yan panel --------------------------------------------------------- */
.redeem-side { display: grid; gap: 22px; }
.redeem-side h2 { font-size: 23px; }
.side-how { background: var(--mint-lt); }
.side-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.side-steps li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.side-steps .slot { width: 46px; height: 46px; background: var(--field); }
.side-steps .slot > img { width: 28px; height: 28px; }
.side-cta { background: var(--berry-lt); }
.side-cta p { margin: -6px 0 16px; color: var(--ink-2); }
.side-cta .btn img { width: 20px; height: 20px; }

@media (max-width: 960px) {
    .redeem-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .machine { gap: 8px; padding: 14px 10px 10px; }
    .m-in { gap: 4px; }
    .m-plus { font-size: 20px; margin-bottom: 26px; }
    .m-slot { width: 48px; height: 48px; border-radius: 14px; }
    .m-slot > img { width: 30px; height: 30px; }
    .m-slot.big { width: 60px; height: 60px; }
    .m-slot.big > img { width: 36px; height: 36px; }
    #m-player .face { --s: 4px; }
    .m-courier { width: 44px; height: 44px; left: calc(var(--p) * (100% - 44px)); }
    .m-mid { min-height: 76px; padding-bottom: 28px; }
    .m-courier { bottom: 32px; }
    .stage { width: 160px; height: 160px; }
    #status-buttons.two { grid-template-columns: 1fr; }
}