/* Mağaza ve oyun sayfası. */

.page-head-art { overflow: hidden; }
.page-head-statue { display: none; }
.store-controls { display: grid; gap: var(--s-4); }
.store-count { margin-top: var(--s-4); }
.page > .store-results { margin-top: var(--s-4); }
.game-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

/* ---------- Oyun sayfası ---------- */
.product { display: grid; gap: var(--s-5); }
.product-layout { display: grid; gap: var(--s-6); align-items: start; }
.product-content { display: grid; gap: var(--s-7); min-width: 0; }
.product-section { display: grid; gap: var(--s-4); }
.product-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.product-purchase { gap: var(--s-4); }
.product-trial { display: grid; gap: var(--s-3); padding-block: var(--s-4); border-block: 1px solid var(--line); }
.product-price { font: 700 var(--t-number) var(--font); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.checkout { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.checkout-form { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.checkout-reviews { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); justify-items: start; }
.checkout-review { display: grid; gap: var(--s-1); }

.gallery { display: grid; gap: var(--s-3); }
.game-card-cover, .gallery-main { contain: paint; }
.gallery-main { width: 100%; min-height: 0; padding: 0; border: 0; border-radius: var(--r-2); background: var(--surface); aspect-ratio: 16 / 9; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; animation: fade-in .24s var(--ease-out); transition: transform 1.4s var(--ease-out); }
.gallery-main:hover img { transform: scale(1.03); }
.gallery-thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); }
.gallery-thumb { flex: none; width: 104px; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: var(--r-1); background: var(--surface); aspect-ratio: 16 / 10; opacity: .6; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover, .gallery-thumb[aria-pressed="true"] { opacity: 1; }
.gallery-thumb[aria-pressed="true"] { border-color: var(--accent); }
.gallery-trailer { width: 100%; aspect-ratio: 16 / 9; }
.feature-list { list-style: none; padding: 0; gap: 0; }
.feature-list li { display: flex; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line); color: var(--text-2); }
.feature-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: var(--r-full); background: var(--accent); }

/* ---------- Kapak ve sayfa geçişleri (<= 400 ms) ---------- */
.has-motion .page { animation-duration: .28s; }
.motion-soft .page { animation-name: fade-in; animation-duration: .18s; }
.is-transition-cover .page, .is-transition-soft .page, .is-transition-vein .page,
.is-transition-cover .gallery-main img, .is-transition-soft .gallery-main img { animation: none; }

.has-motion .product-title { animation: product-meta-in .22s var(--ease-out) .09s both; }
.has-motion .product-price, .has-motion .product-price.is-fresh { animation: product-meta-in .24s var(--ease-out) .14s both; }
.motion-soft .product-title { animation: fade-in .18s var(--ease-out) .06s both; }
.motion-soft .product-price, .motion-soft .product-price.is-fresh { animation: fade-in .2s var(--ease-out) .1s both; }

::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .28s; animation-timing-function: var(--ease-out); }
.is-transition-soft::view-transition-group(*) { animation-name: fade-in; animation-duration: .18s; }
.is-transition-soft::view-transition-old(*), .is-transition-soft::view-transition-new(*) { animation-duration: .18s; animation-timing-function: var(--ease-out); }

.is-transition-vein::view-transition-old(root) { animation: vein-wipe-out .28s var(--ease-out) both; }
.is-transition-vein::view-transition-new(root) { animation: vein-wipe-in .32s var(--ease-out) both; }
.is-transition-vein::after { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; background: url(../img/veins.svg) center / cover no-repeat; opacity: 0; animation: vein-flash .32s var(--ease-out) both; }

@keyframes product-meta-in { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }
@keyframes vein-wipe-out { from { opacity: 1; clip-path: inset(0 0 0 0); } to { opacity: 0; clip-path: inset(0 0 0 100%); } }
@keyframes vein-wipe-in { from { opacity: .25; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes vein-flash { 0% { opacity: 0; transform: scale(1.02); } 45% { opacity: .55; } 100% { opacity: 0; transform: scale(1); } }

@media (min-width: 900px) {
  .store-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .page-head-art { min-height: 220px; padding-right: 200px; }
  .page-head-statue { position: absolute; right: var(--s-6); top: 0; display: block; height: 150%; opacity: .9; -webkit-mask: linear-gradient(#000 55%, transparent 96%); mask: linear-gradient(#000 55%, transparent 96%); animation: statue-in 1.6s var(--ease-out) both; }
  .product-layout { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
  .product-purchase { position: sticky; top: calc(var(--bar) + var(--s-5)); }
}

/* Bakiyeyle satın alma */
.balance-buy { display: grid; gap: var(--s-3); }
.balance-line { font-weight: 650; font-variant-numeric: tabular-nums; }
.confirm-dialog[open] { display: grid; gap: var(--s-4); }
.product-faq details { padding-block: var(--s-2); }