/* =========================================================================
   Oyunları Keşfet (oyunlar.html)
   Hero "hand of cards", sticky filter/search bar, trading-card catalogue,
   slot-machine game picker, Connect photo wall, "next card" quote.
   Everything is scoped with the .oy- prefix (and .page-oyunlar for layout).
   ========================================================================= */

.oy-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* category palette: --c main, --c-deep shade, --c-hi light text tone, --c-ink text on --c */
.oy-c-parkur { --c: #d6111c; --c-deep: #5a0710; --c-hi: #ff6b72; --c-ink: #fff; }
.oy-c-destek { --c: #ffcd1f; --c-deep: #b9790a; --c-hi: #ffd84d; --c-ink: #0b1222; }
.oy-c-atolye { --c: #3aa0ff; --c-deep: #0b3a78; --c-hi: #82c4ff; --c-ink: #fff; }
.oy-c-ozel   { --c: #3fa34d; --c-deep: #0f4019; --c-hi: #74d683; --c-ink: #fff; }

/* JS-only controls stay out of the way without JS */
html:not(.js) .oy-bar, html:not(.js) [data-oy-pick] { display: none !important; }

/* keep content clear of the fixed side dock where it would sit on top of the container (761–1399px) */
@media (min-width: 761px) and (max-width: 1399px) {
  .page-oyunlar main .container { width: auto; margin-left: max(var(--gutter), calc(100vw - 82px - var(--container))); margin-right: 82px; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.oy-hero { padding-bottom: clamp(48px, 7vw, 92px); }
.oy-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.oy-hero h1 { margin-bottom: .28em; }
.oy-hero .lead { margin-bottom: 14px; }
.oy-hero-hand { margin: 0 0 30px; font-size: clamp(1.45rem, 2.2vw, 1.9rem); transform: rotate(-1.5deg); transform-origin: left center; }
.oy-pick-hero .oy-dice { transition: transform .5s var(--spring); }
.oy-pick-hero:hover .oy-dice { transform: rotate(-24deg) scale(1.1); }

/* hand of category cards (fanned from a common bottom point) */
.oy-hand { --spread: 96px; --w: 184px; --h: 262px; --n: 7.2rem; position: relative; height: 430px; }
.oy-hand-card {
  --x: calc((var(--i) - 1.5) * var(--spread));
  --r: calc((var(--i) - 1.5) * 9deg);
  --y: calc(var(--d) * 1px);
  position: absolute; left: 50%; bottom: 34px; z-index: calc(var(--i) + 1);
  width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 18px 16px; border-radius: 18px; color: var(--c-ink);
  background:
    repeating-linear-gradient(-56deg, rgba(255,255,255,.08) 0 12px, transparent 12px 26px),
    radial-gradient(120% 80% at 10% 0%, var(--c-hi), transparent 58%),
    linear-gradient(160deg, var(--c), var(--c-deep));
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 24px 46px rgba(0,0,0,.5);
  transform-origin: 50% 100%;
  transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--r));
  transition: transform .55s var(--spring), box-shadow .3s;
}
.oy-hand-card::before { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.42); pointer-events: none; }
.oy-c-destek.oy-hand-card::before { border-color: rgba(11,18,34,.35); }
.oy-hand-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, transparent 62%) 160% 0 / 250% 100% no-repeat; opacity: 0; transition: opacity .3s, background-position .8s var(--ease); pointer-events: none; }
.oy-hand-card:hover, .oy-hand-card:focus-visible { z-index: 10; color: var(--c-ink); transform: translateX(var(--x)) translateY(calc(var(--y) - 36px)) rotate(var(--r)) scale(1.05); box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 34px 60px rgba(0,0,0,.6); }
.oy-hand-card:hover::after, .oy-hand-card:focus-visible::after { opacity: 1; background-position: -60% 0; }
.oy-hand-card:focus-visible { outline-offset: 5px; border-radius: 18px; }
.oy-hand-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.oy-hand-idx { display: inline-grid; place-items: center; min-width: 38px; height: 32px; padding: 0 6px; border-radius: 9px; background: rgba(0,0,0,.24); font: 800 italic 1.15rem/1 var(--display); }
.oy-c-destek .oy-hand-idx { background: rgba(11,18,34,.14); }
.oy-hand-top svg { width: 30px; height: 30px; }
.oy-hand-n { position: relative; font: 800 italic var(--n)/.78 var(--display); letter-spacing: -.03em; text-shadow: 0 6px 0 rgba(0,0,0,.18); }
.oy-hand-label { position: relative; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.js .oy-hand-card { animation: oy-deal .95s var(--spring) backwards; animation-delay: calc(.2s + var(--i) * .1s); }
@keyframes oy-deal { from { opacity: 0; transform: translateX(0) translateY(170px) rotate(0deg) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .js .oy-hand-card { animation: none; } }

@media (max-width: 1399px) { .oy-hand { --spread: 80px; --w: 166px; --h: 238px; --n: 6.4rem; height: 396px; } }
@media (min-width: 1025px) and (max-width: 1240px) {
  .oy-hand { --spread: 62px; --w: 136px; --h: 196px; --n: 5.2rem; height: 330px; }
  .oy-hand-card { padding: 14px 14px 13px; }
  .oy-hand-label { font-size: 1.08rem; }
  .oy-hand-top svg { width: 24px; height: 24px; }
  .oy-hand-idx { min-width: 32px; height: 28px; font-size: 1rem; }
}
@media (max-width: 1024px) {
  .oy-hero-in { grid-template-columns: 1fr; }
  .oy-hand { --spread: 96px; --w: 172px; --h: 244px; --n: 6.4rem; height: 330px; margin-top: 8px; }
}
@media (max-width: 700px) { .oy-hand { --spread: 84px; --w: 156px; --h: 222px; --n: 5.8rem; height: 300px; } }
@media (max-width: 600px) {
  .oy-hand { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
  .oy-hand-card { --x: 0px; --y: 0px; --r: calc((var(--i) - 1.5) * 2deg); position: relative; left: auto; bottom: auto; margin: 0; width: auto; height: auto; aspect-ratio: 3 / 4; padding: 9px 8px 8px; border-radius: 13px; transform-origin: 50% 50%; }
  .oy-hand-card::before { inset: 4px; border-radius: 9px; border-width: 1px; }
  .oy-hand-card:hover, .oy-hand-card:focus-visible { transform: translateY(-5px) rotate(var(--r)); }
  .oy-hand-idx { min-width: 0; height: auto; padding: 2px 5px; border-radius: 6px; font-size: .78rem; }
  .oy-hand-top svg { width: 17px; height: 17px; }
  .oy-hand-n { font-size: clamp(2.3rem, 12vw, 3rem); text-shadow: 0 3px 0 rgba(0,0,0,.18); }
  .oy-hand-label { font-size: .78rem; letter-spacing: .06em; }
  .js .oy-hand-card { animation-name: oy-deal-sm; }
  @keyframes oy-deal-sm { from { opacity: 0; transform: translateY(40px) scale(.9); } }
}

/* =========================================================================
   STICKY FILTER BAR
   wide (≥1181px): chips | search | pick — compact (≤1180px): chips | 🔍 | 🎲,
   the search field swaps in over the chips while it is open.
   ========================================================================= */
.oy-katalog { position: relative; --oy-stick: 168px; }
.oy-sentinel { height: 1px; margin-bottom: -1px; }
.oy-bar { position: sticky; top: var(--header-h); z-index: 60; background: rgba(7,11,22,.84); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-block: 1px solid var(--line); transition: background .3s, box-shadow .3s; }
.oy-bar.is-stuck { background: rgba(7,11,22,.95); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.oy-bar-in { display: flex; align-items: center; gap: 12px; padding-block: 10px; }

.oy-chips { --fl: 0px; --fr: 0px; flex: 0 1 auto; display: flex; gap: 7px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 5px; margin: -5px; }
.oy-chips::-webkit-scrollbar { display: none; }
.oy-chips.is-overflow { --fr: 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.oy-chips.is-overflow.is-scrolled { --fl: 34px; }
.oy-chips.is-overflow.is-end { --fr: 0px; }
.oy-chip { --c: var(--chalk); --c-ink: var(--ink); flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid rgba(244,239,228,.18); background: rgba(255,255,255,.04); color: var(--chalk); font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--spring), opacity .25s; -webkit-tap-highlight-color: transparent; }
.oy-chip:not(.oy-chip--all)::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255,255,255,.06); transition: background .25s; }
.oy-chip:hover { border-color: rgba(244,239,228,.45); background: rgba(255,255,255,.08); }
.oy-chip:active { transform: scale(.96); }
.oy-chip:focus-visible { outline-offset: 2px; }
.oy-chip[aria-pressed="true"] { background: var(--c); color: var(--c-ink); border-color: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.oy-chip[aria-pressed="true"]::before { background: currentColor; box-shadow: none; }
.oy-chip.is-zero:not([aria-pressed="true"]) { opacity: .45; }
.oy-chip-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.4); color: var(--yellow); font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.oy-chip[aria-pressed="true"] .oy-chip-n { background: rgba(0,0,0,.2); color: inherit; }
.oy-chip-n.is-bump { animation: oy-bump .45s var(--spring); }
@keyframes oy-bump { 40% { transform: scale(1.35) rotate(-6deg); } }

.oy-tools { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.oy-search { flex: 1 1 170px; position: relative; display: flex; align-items: center; min-width: 0; }
@supports (container-type: inline-size) { .oy-search { container-type: inline-size; } @container (max-width: 230px) { .oy-kbd { display: none; } .oy-search input { padding-right: 44px; } } }
.oy-search-ico { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--chalk-dim); pointer-events: none; }
.oy-search input { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 0 50px 0 46px; border-radius: 999px; border: 1px solid rgba(244,239,228,.22); background: rgba(255,255,255,.06); color: #fff; font: 600 1rem/1.2 var(--body); -webkit-appearance: none; appearance: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.oy-search input::placeholder { color: rgba(244,239,228,.58); opacity: 1; }
.oy-search input::-webkit-search-cancel-button, .oy-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.oy-search input:hover { border-color: rgba(244,239,228,.4); }
.oy-search input:focus { outline: none; border-color: var(--yellow); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(255,205,31,.32); }
.oy-kbd { position: absolute; right: 14px; display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(244,239,228,.25); color: var(--chalk-dim); font: 700 .85rem/1 var(--body); pointer-events: none; transition: opacity .2s; }
.oy-search input:focus ~ .oy-kbd, .oy-search.has-value .oy-kbd { opacity: 0; }
@media (hover: none) { .oy-kbd { display: none; } }
.oy-search-clear { position: absolute; right: 2px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--chalk-dim); display: grid; place-items: center; cursor: pointer; }
.oy-search-clear svg { width: 18px; height: 18px; }
.oy-search-clear:hover { color: #fff; background: rgba(255,255,255,.08); }

.oy-search-toggle { position: relative; display: none; flex: none; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 16px; border: 1px solid rgba(244,239,228,.24); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .3s var(--spring); }
.oy-search-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(244,239,228,.5); }
.oy-search-toggle:active { transform: scale(.94); }
.oy-search-toggle svg { width: 22px; height: 22px; }
.oy-search-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }

.oy-pick { flex: none; min-height: 48px; padding: 0 20px 0 17px; font-size: 1.04rem; }
.oy-dice { flex: none; transition: transform .5s var(--spring); }
.oy-pick:hover .oy-dice { transform: rotate(-24deg) scale(1.1); }
[data-oy-pick].is-rolling .oy-dice { animation: oy-roll .55s linear infinite; }
@keyframes oy-roll { to { transform: rotate(360deg); } }

@media (max-width: 1399px) {
  .oy-pick { width: 48px; padding: 0; border-radius: 16px; }
  .oy-pick .oy-pick-label { display: none; }
}
@media (max-width: 1180px) {
  .oy-bar-in { gap: 10px; }
  .oy-chips { flex: 1 1 auto; }
  .oy-tools { flex: none; gap: 10px; }
  .oy-search { display: none; }
  .oy-search-toggle { display: grid; }
  .oy-bar.is-search-open .oy-chips, .oy-bar.is-search-open .oy-search-toggle { display: none; }
  .oy-bar.is-search-open .oy-tools { flex: 1 1 auto; }
  .oy-bar.is-search-open .oy-search { display: flex; animation: oy-search-in .4s var(--spring); }
  .oy-kbd { display: none; }
}
@keyframes oy-search-in { from { opacity: 0; transform: translateX(28px) scaleX(.92); } }
@media (max-width: 760px) {
  .oy-bar-in { gap: 8px; padding-block: 8px; }
  .oy-chip { font-size: .95rem; padding-left: 13px; }
  .oy-search input { min-height: 48px; }
}

/* =========================================================================
   CATEGORIES + CARDS
   Grid of 12: photo + "mid" cards span 4, the rest span 3, so every row is full.
   ≤980px: two columns; the lead photo card and the odd one out ("solo") run full width,
   lying on their side. While searching, every card gets the same size.
   ========================================================================= */
.oy-cats { padding-block: clamp(40px, 6vw, 76px) var(--section-y); }
.oy-cat { scroll-margin-top: var(--oy-stick); }
.oy-cat:not([hidden]) ~ .oy-cat { margin-top: clamp(60px, 8vw, 112px); }
.oy-cat-head { position: relative; margin-bottom: clamp(22px, 3vw, 36px); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.oy-cat-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 132px; height: 4px; border-radius: 4px; background: var(--c); }
.oy-cat-head .kicker { margin-bottom: 12px; color: var(--c-hi); }
.oy-cat-head .kicker::before { background: var(--c); color: var(--c-ink); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.oy-cat-head h2 { margin: 0; font-size: clamp(2.2rem, 4.8vw, 3.9rem); }

.oy-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.oy-cell { grid-column: span 3; display: flex; min-width: 0; container-type: inline-size; }
.oy-cell--big, .oy-cell--mid, .oy-grid--ozel .oy-cell { grid-column: span 4; }
@media (max-width: 980px) {
  .oy-cell, .oy-cell--big, .oy-cell--mid { grid-column: span 6; }
  .oy-cell--lead, .oy-cell--solo, .oy-grid--ozel .oy-cell { grid-column: span 12; }
}
@media (max-width: 600px) { .oy-cell--pair { grid-column: span 12; } }
.oy-katalog.is-query .oy-cell { grid-column: span 4; }
@media (max-width: 980px) { .oy-katalog.is-query .oy-cell { grid-column: span 6; } }

.oy-card {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --art-r: 19px;
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  border-radius: 20px; background: linear-gradient(168deg, #16284f 0%, #0c1631 72%);
  border: 1px solid rgba(244,239,228,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.34);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .6s var(--spring), box-shadow .35s, border-color .35s;
  scroll-margin-top: var(--oy-stick);
}
.oy-card.is-tilt { transition: transform .12s linear, box-shadow .35s, border-color .35s; }
.oy-card:focus { outline: none; }
.oy-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.oy-card::before { content: ""; position: absolute; inset: 6px; z-index: 2; border-radius: 15px; border: 1px solid rgba(244,239,228,.1); pointer-events: none; }
.oy-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  background:
    radial-gradient(380px circle at var(--gx, 50%) var(--gy, 20%), rgba(255,255,255,.2), transparent 42%),
    linear-gradient(115deg, transparent 22%, rgba(255,205,31,.16) 40%, rgba(58,160,255,.16) 54%, rgba(214,17,28,.14) 66%, transparent 82%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, var(--gx, 50%) var(--gy, 50%);
  mix-blend-mode: screen; transition: opacity .35s;
}
@media (hover: hover) {
  .oy-card:hover { --lift: -6px; border-color: rgba(224,169,59,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px rgba(0,0,0,.5); }
  .oy-card:hover::after { opacity: 1; }
}

/* art panel */
.oy-card-art { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border-radius: var(--art-r) var(--art-r) 0 0; color: var(--c-ink); background: var(--navy-2); }
.oy-grid--parkur .oy-card-art { aspect-ratio: 16 / 10; }
.oy-grid--ozel .oy-card-art { aspect-ratio: 16 / 9; }
.oy-card--photo .oy-card-art { aspect-ratio: 1419 / 1109; }
.oy-katalog.is-query .oy-card-art { aspect-ratio: 16 / 10; }
.oy-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .oy-card:hover .oy-card-art img { transform: scale(1.05); } }
.oy-card-art--draw {
  background:
    radial-gradient(circle at 50% 140%, transparent 0 33%, rgba(255,255,255,.17) 33.4% 34.4%, transparent 34.8%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(-56deg, rgba(255,255,255,.075) 0 10px, transparent 10px 22px),
    radial-gradient(110% 90% at 15% 0%, var(--c-hi), transparent 60%),
    linear-gradient(155deg, var(--c), var(--c-deep));
}
.oy-c-destek .oy-card-art--draw {
  background:
    radial-gradient(circle at 50% 140%, transparent 0 33%, rgba(11,18,34,.16) 33.4% 34.4%, transparent 34.8%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(11,18,34,.1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(-56deg, rgba(255,255,255,.16) 0 10px, transparent 10px 22px),
    linear-gradient(155deg, #ffd84d, #e09a12);
}
.oy-mark { position: absolute; z-index: 0; right: 30%; top: 54%; width: 64cqi; height: 64cqi; color: #fff; opacity: .14; transform: translate(50%, -50%) rotate(-14deg); transition: transform .9s var(--spring), opacity .4s; pointer-events: none; }
.oy-mark svg { width: 100%; height: 100%; }
.oy-c-destek .oy-mark { color: var(--ink); opacity: .1; }
@media (hover: hover) { .oy-card:hover .oy-mark { opacity: .2; transform: translate(50%, -50%) rotate(-4deg) scale(1.08); } }
/* sizes follow the card's own width (container units on .oy-cell) */
.oy-glyph { --g: clamp(40px, 19cqi, 62px); position: absolute; left: clamp(10px, 5cqi, 16px); bottom: clamp(9px, 4.6cqi, 14px); z-index: 1; display: grid; place-items: center; width: var(--g); height: var(--g); border-radius: 50%; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 8px 18px rgba(0,0,0,.2); transition: transform .5s var(--spring); }
.oy-c-destek .oy-glyph { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 2px rgba(11,18,34,.55); }
.oy-glyph svg { width: 52%; height: 52%; }
@media (hover: hover) { .oy-card:hover .oy-glyph { transform: rotate(-10deg) scale(1.08); } }
.oy-card-no { position: absolute; right: clamp(8px, 4cqi, 12px); bottom: -.1em; z-index: 1; font: 800 italic clamp(2.7rem, 25cqi, 5.6rem)/.8 var(--display); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.78); pointer-events: none; }
.oy-c-destek .oy-card-no { -webkit-text-stroke-color: rgba(11,18,34,.62); }
.oy-card--photo .oy-card-no { top: clamp(10px, 3.6cqi, 14px); left: clamp(10px, 3.6cqi, 14px); right: auto; bottom: auto; display: grid; place-items: center; min-width: 46px; height: 38px; padding: 0 8px; border-radius: 10px; background: var(--c); color: #fff; -webkit-text-stroke: 0; font-size: 1.5rem; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* body */
.oy-card-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(5px, 2.4cqi, 7px); padding: clamp(11px, 5cqi, 15px) clamp(12px, 6cqi, 18px) clamp(14px, 6.2cqi, 19px); }
.oy-card-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: clamp(.68rem, 3.8cqi, .8rem); letter-spacing: .18em; text-transform: uppercase; color: var(--c-hi); }
.oy-card-cat::before { content: ""; width: clamp(12px, 6cqi, 18px); height: 3px; border-radius: 3px; background: var(--c); }
.oy-card-name { margin: 0; font-size: clamp(1.14rem, 8.2cqi, 1.6rem); font-style: italic; line-height: 1; overflow-wrap: anywhere; hyphens: auto; }
.oy-card--photo .oy-card-name { font-size: clamp(1.5rem, 7.8cqi, 2.1rem); }
.oy-card-sub { padding: 3px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: clamp(.76rem, 4cqi, .82rem); font-weight: 700; line-height: 1.5; color: var(--chalk-dim); }
.oy-card-note { margin: 0; font-size: clamp(.84rem, 4.6cqi, .92rem); line-height: 1.45; color: var(--chalk-dim); }
.oy-hit { background: var(--yellow); color: var(--ink); border-radius: 4px; padding: 0 .04em; box-shadow: 0 0 0 2px var(--yellow); }

/* ask on WhatsApp */
.oy-card-ask { position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(7,11,22,.58); color: #fff; border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s, transform .3s var(--spring), background .2s; }
.oy-card-ask svg { width: 22px; height: 22px; }
.oy-card-ask:hover { background: #25d366; color: #062b14; transform: scale(1.08); }
@media (hover: hover) {
  .oy-card-ask { opacity: 0; transform: scale(.8); }
  .oy-card:hover .oy-card-ask, .oy-card-ask:focus-visible, .oy-card.is-picked .oy-card-ask { opacity: 1; transform: none; }
}

/* cards lying on their side (full-width cells in the two-column layout) */
@media (max-width: 980px) {
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card { flex-direction: row; }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card-art { flex: 0 0 41%; aspect-ratio: auto; min-height: 124px; border-radius: var(--art-r) 0 0 var(--art-r); }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card-body { justify-content: center; }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card-ask { right: auto; left: calc(41% - 52px); top: 8px; }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card-no { font-size: clamp(2.8rem, 12cqi, 4.6rem); }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-glyph { --g: clamp(42px, 11cqi, 58px); }
  .oy-katalog:not(.is-query) :is(.oy-cell--solo, .oy-grid--ozel .oy-cell) .oy-card-name { font-size: clamp(1.35rem, 5.4cqi, 1.9rem); }
}
@media (min-width: 601px) and (max-width: 980px) {
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card { flex-direction: row; }
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card-art { flex: 0 0 56%; border-radius: var(--art-r) 0 0 var(--art-r); }
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card-body { justify-content: center; padding: 24px 26px; gap: 10px; }
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card-ask { right: auto; left: calc(56% - 54px); }
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card-name { font-size: clamp(2rem, 6cqi, 2.9rem); }
  .oy-katalog:not(.is-query) .oy-cell--lead .oy-card-cat { font-size: .86rem; }
}

/* states: anchor target, shuffle flicker, picked */
.oy-card.is-target { animation: oy-target 2.2s var(--ease); }
@keyframes oy-target {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.34); }
  15%, 55% { box-shadow: 0 0 0 4px var(--yellow), 0 0 46px rgba(255,205,31,.5); }
  35%, 75% { box-shadow: 0 0 0 2px rgba(255,205,31,.45), 0 14px 34px rgba(0,0,0,.34); }
}
@media (prefers-reduced-motion: reduce) { .oy-card.is-target { box-shadow: 0 0 0 4px var(--yellow); } }
.oy-card.is-shuffle { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 0 36px rgba(255,205,31,.45); transition-duration: .06s; }
.oy-card.is-picked { --lift: -8px; border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 10px rgba(255,205,31,.16), 0 26px 64px rgba(255,205,31,.22); }
.oy-pick-badge { position: absolute; z-index: 6; top: -15px; left: 50%; padding: 6px 14px 5px; border-radius: 9px; background: var(--yellow); color: var(--ink); font: 800 italic 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.4); transform: translateX(-50%) rotate(-4deg); pointer-events: none; }
.oy-pick-badge.is-pop { animation: oy-sticker .6s var(--spring); }
@keyframes oy-sticker { from { transform: translateX(-50%) rotate(-24deg) scale(.2); opacity: 0; } }

/* filter pop-in */
.oy-cell.is-pop .oy-card { animation: oy-pop .5s var(--spring) backwards; animation-delay: calc(var(--k, 0) * 28ms); }
@keyframes oy-pop { from { opacity: 0; transform: perspective(900px) translateY(16px) scale(.94); } }

/* small screens: tighter radii */
@media (max-width: 760px) {
  .oy-card { --art-r: 15px; border-radius: 16px; }
  .oy-card::before { inset: 4px; border-radius: 12px; }
  .oy-card--photo .oy-card-art { aspect-ratio: 16 / 10; }
  .oy-card--photo .oy-card-no { font-size: 1.3rem; height: 34px; min-width: 40px; }
  .oy-card-ask { top: 6px; right: 6px; width: 44px; height: 44px; }
  .oy-card-ask svg { width: 20px; height: 20px; }
  .oy-pick-badge { font-size: .9rem; top: -13px; }
}

/* empty state */
.oy-empty { margin-top: 8px; padding: clamp(40px, 7vw, 76px) 22px; border: 2px dashed rgba(244,239,228,.2); border-radius: 26px; text-align: center; background: radial-gradient(600px 300px at 50% 0%, rgba(214,17,28,.14), transparent 70%); }
.oy-empty-score { margin: 0 0 10px; font: 800 italic clamp(3.6rem, 10vw, 6.4rem)/.9 var(--display); color: var(--yellow); letter-spacing: .04em; text-shadow: 0 0 30px rgba(255,205,31,.35); }
.oy-empty-score span { color: var(--red); margin: 0 .12em; }
.oy-empty-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.oy-empty p:not(.oy-empty-score) { max-width: 52ch; margin: 0 auto 22px; color: var(--chalk-dim); }
.oy-empty [data-oy-q] { color: #fff; font-weight: 700; }

/* =========================================================================
   SLOT MACHINE PICKER
   ========================================================================= */
.oy-slot {
  --row: 54px;
  position: fixed; z-index: 120; left: 50%; bottom: 24px;
  width: min(440px, calc(100vw - 24px)); padding: 0 16px 16px;
  border-radius: 26px; color: #fff;
  background: radial-gradient(400px 200px at 50% 0%, rgba(255,205,31,.12), transparent 70%), linear-gradient(170deg, #1b3263 0%, #0b1530 100%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px var(--red), 0 0 0 8px rgba(224,169,59,.55), 0 34px 80px rgba(0,0,0,.65);
  transform: translateX(-50%);
}
.oy-slot:focus { outline: none; }
.oy-slot.is-enter { animation: oy-slot-in .55s var(--spring); }
@keyframes oy-slot-in { from { opacity: 0; transform: translateX(-50%) translateY(46px) scale(.9); } }
.oy-slot-lights { height: 14px; margin: 0 -16px 2px; border-radius: 22px 22px 0 0; background: radial-gradient(circle, var(--yellow) 0 2.6px, transparent 3.2px) 0 50% / 18px 14px repeat-x, rgba(0,0,0,.25); }
.oy-slot[aria-busy="true"] .oy-slot-lights { animation: oy-lights .35s steps(2) infinite; }
@keyframes oy-lights { to { background-position: 9px 50%, 0 0; } }
.oy-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.oy-slot-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 800 italic 1.35rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }
.oy-slot-title svg { width: 24px; height: 24px; }
.oy-slot[aria-busy="true"] .oy-slot-title svg { animation: oy-roll .55s linear infinite; }
.oy-slot-close { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--chalk-dim); cursor: pointer; }
.oy-slot-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.oy-slot-close svg { width: 20px; height: 20px; }
.oy-slot-window { position: relative; height: calc(var(--row) * 3); overflow: hidden; transition: height .45s var(--ease), opacity .3s; border-radius: 14px; background: linear-gradient(180deg, #e7e0cf 0%, #fbf7ee 30%, #fbf7ee 70%, #e7e0cf 100%); color: var(--ink); box-shadow: inset 0 0 0 3px rgba(11,18,34,.85), inset 0 14px 18px -8px rgba(0,0,0,.45), inset 0 -14px 18px -8px rgba(0,0,0,.45); }
.oy-slot-window::before { content: ""; position: absolute; left: 0; right: 0; top: var(--row); height: var(--row); z-index: 2; border-block: 3px solid var(--red); background: rgba(255,205,31,.18); pointer-events: none; }
.oy-slot-window::after { content: ""; position: absolute; top: calc(var(--row) * 1.5 - 9px); left: -2px; right: -2px; height: 18px; z-index: 3; pointer-events: none; background: linear-gradient(45deg, transparent 50%, var(--red) 50%) 0 0 / 12px 18px no-repeat, linear-gradient(-135deg, transparent 50%, var(--red) 50%) 100% 0 / 12px 18px no-repeat; }
.oy-slot-reel { list-style: none; margin: 0; padding: 0; will-change: transform; }
.oy-reel-row { display: flex; align-items: center; gap: 10px; height: var(--row); padding: 0 18px 0 22px; white-space: nowrap; }
.oy-reel-no { flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--c); color: var(--c-ink); font: 800 italic .95rem/1 var(--display); }
.oy-reel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 800 italic 1.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.oy-slot.is-landed .oy-slot-window { animation: oy-thunk .4s var(--spring); }
@keyframes oy-thunk { 30% { transform: translateY(3px) scale(.99); } }
.oy-slot-result { min-height: 2.9em; margin: 12px 2px 12px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--chalk-dim); }
.oy-slot-result strong { display: block; margin-top: 2px; font: 800 italic 1.65rem/1.05 var(--display); text-transform: uppercase; color: #fff; }
.oy-slot-cat { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--c); color: var(--c-ink); font: 700 .8rem/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.oy-slot-wait { font-family: var(--hand); font-size: 1.7rem; color: var(--gold-2); }
.oy-slot-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; visibility: hidden; }
.oy-slot.is-landed .oy-slot-actions { visibility: visible; animation: oy-rise .4s var(--spring); }
@keyframes oy-rise { from { opacity: 0; transform: translateY(8px); } }
.oy-slot-actions .btn { min-height: 46px; padding: 0 20px; font-size: 1.04rem; }
.oy-slot-actions .btn svg { width: 18px; height: 18px; }
.oy-slot-ask { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #062b14; box-shadow: 0 8px 22px rgba(37,211,102,.3); transition: transform .3s var(--spring); }
.oy-slot-ask:hover { color: #062b14; transform: scale(1.08) rotate(-6deg); }
.oy-slot-ask svg { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .oy-slot { --row: 46px; bottom: calc(78px + env(safe-area-inset-bottom)); padding: 0 12px 12px; border-radius: 22px; }
  .oy-slot-lights { margin-inline: -12px; height: 12px; }
  .oy-slot-title { font-size: 1.15rem; }
  .oy-reel-name { font-size: 1.2rem; }
  .oy-reel-row { padding-left: 18px; }
  .oy-slot.is-done .oy-slot-window { height: 0; opacity: 0; }
  .oy-slot-result { margin: 8px 0 10px; min-height: 0; }
  .oy-slot-result strong { font-size: 1.4rem; }
  .oy-slot-actions .btn { padding: 0 16px; font-size: .98rem; }
}

/* =========================================================================
   CONNECT SERİSİ
   ========================================================================= */
.oy-connect-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 76px); align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
@media (max-width: 900px) { .oy-connect-head { grid-template-columns: 1fr; } }
.oy-connect-head .lead { color: var(--chalk-dim); }
.oy-connect-links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.oy-connect-links a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(224,169,59,.45); background: rgba(224,169,59,.08); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase; transition: background .2s, border-color .2s, transform .3s var(--spring); }
.oy-connect-links a svg { width: 16px; height: 16px; color: var(--gold-2); transform: rotate(-90deg); transition: transform .3s var(--spring), color .2s; }
.oy-connect-links a:hover { background: var(--red); border-color: transparent; color: #fff; transform: translateY(-2px); }
.oy-connect-links a:hover svg { color: #fff; transform: rotate(-90deg) translateX(3px); }

/* tactics chalkboard */
.oy-board { position: relative; padding: clamp(24px, 3.4vw, 38px); border-radius: 18px; border: 9px solid #7c5128; transform: rotate(1.2deg);
  background: radial-gradient(70% 55% at 25% 15%, rgba(255,255,255,.07), transparent 70%), radial-gradient(45% 40% at 85% 85%, rgba(255,255,255,.05), transparent 70%), #0f1f3d;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08), 0 28px 60px rgba(0,0,0,.5); }
.oy-board::after { content: ""; position: absolute; left: 16%; bottom: -16px; width: 58px; height: 9px; border-radius: 4px; background: var(--chalk); box-shadow: 74px 1px 0 var(--yellow), 132px -1px 0 #ff8a8f; transform: rotate(-2deg); }
.oy-board-tag { position: absolute; top: -18px; right: 22px; margin: 0; padding: 4px 12px; border-radius: 6px; background: var(--yellow); color: var(--ink); font: 700 1.25rem/1 var(--hand); transform: rotate(3deg); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.oy-eq { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 2px; font: 700 clamp(1.55rem, 2.4vw, 2.05rem)/1.15 var(--hand); color: var(--chalk); }
.oy-eq li { display: inline-flex; align-items: center; gap: 8px; }
.oy-eq li svg { flex: none; width: 24px; height: 24px; color: var(--gold-2); }
.oy-eq li + li::before { content: "+"; content: "+" / ""; margin: 0 8px 0 6px; color: var(--yellow); font-size: 1.15em; }
.oy-eq-sum { margin: 18px 0 0; padding-top: 14px; border-top: 2px dashed rgba(244,239,228,.28); font: 800 italic clamp(2.6rem, 5.4vw, 4.1rem)/1 var(--display); text-transform: uppercase; color: var(--yellow); text-shadow: 0 0 26px rgba(255,205,31,.3); }
.oy-eq-eq { color: var(--chalk); margin-right: 8px; }

/* justified photo wall (no cropping: flex-grow follows each photo's aspect ratio) */
.oy-wall { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.oy-wall-row { display: flex; gap: clamp(12px, 1.4vw, 18px); }
.oy-shot { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.oy-shot-frame { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--navy-2); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.oy-shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform .9s var(--ease); }
@media (hover: hover) { .oy-shot:not(.oy-shot--text):hover img { transform: scale(1.04); } }
.oy-shot figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }
.oy-shot figcaption::before { content: ""; flex: none; width: 16px; height: 3px; border-radius: 3px; background: var(--red); }
.oy-wall-hint { display: none; }
@media (max-width: 760px) {
  .oy-wall { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .oy-wall::-webkit-scrollbar { display: none; }
  .oy-wall-row { display: contents; }
  .oy-shot { flex: 0 0 auto; width: min(calc(210px * var(--ar)), 84vw); scroll-snap-align: start; }
  .oy-shot img { height: 210px; aspect-ratio: auto; object-position: 62% 50%; }
  .oy-shot--text img { object-position: 50% 50%; }
  .oy-wall-hint { display: block; margin: 6px 0 0; text-align: right; font: 700 1.5rem/1 var(--hand); color: var(--gold-2); }
  .oy-wall-hint span { display: inline-block; animation: oy-nudge 1.4s ease-in-out infinite; }
  @keyframes oy-nudge { 50% { transform: translateX(6px); } }
}

/* =========================================================================
   NEXT CARD QUOTE + CTA
   ========================================================================= */
.oy-next-in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
@media (max-width: 820px) { .oy-next-in { grid-template-columns: 1fr; } }
.oy-next-quote { margin: 0; }
.oy-next-quote blockquote { margin: 0; }
.oy-next-quote p { margin: 0; font: 800 italic clamp(2.2rem, 5.2vw, 4.5rem)/.98 var(--display); text-transform: uppercase; color: var(--navy); }
.oy-next-quote mark { color: inherit; padding: 0 .06em; background: linear-gradient(transparent 52%, var(--yellow) 52% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oy-next-deck { position: relative; justify-self: center; width: min(250px, 64vw); aspect-ratio: 5 / 7; }
.oy-next-deck::before, .oy-next-deck::after { content: ""; position: absolute; inset: 0; border-radius: 22px; box-shadow: 0 16px 34px rgba(13,26,54,.2); }
.oy-next-deck::before { background: linear-gradient(160deg, var(--red), var(--red-2)); transform: rotate(-9deg) translateX(-16px); }
.oy-next-deck::after { background: linear-gradient(160deg, var(--navy-3), var(--navy)); transform: rotate(-3deg) translateX(-6px); }
.oy-next-card { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: 22px; border: 3px dashed rgba(13,26,54,.4); background: repeating-linear-gradient(-45deg, rgba(13,26,54,.035) 0 12px, transparent 12px 24px), #fff; box-shadow: 0 30px 60px rgba(13,26,54,.25); transform: rotate(6deg); transition: transform .6s var(--spring); }
.oy-next-deck:hover .oy-next-card { transform: rotate(0deg) translateY(-10px); }
.oy-next-no { position: absolute; top: 16px; left: 18px; font: 800 italic 1.7rem/1 var(--display); color: var(--navy); }
.oy-next-q { font: 800 italic clamp(7rem, 16vw, 10rem)/1 var(--display); color: var(--red); animation: oy-wobble 3.4s ease-in-out infinite; }
@keyframes oy-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.04); } }
.oy-next-label { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font: 700 1.8rem/1 var(--hand); color: var(--navy); }
@media (max-width: 820px) {
  .oy-next .chalk-bg { display: none; }
  .oy-next-deck { width: min(176px, 48vw); margin-top: 8px; }
  .oy-next-q { font-size: 6rem; }
  .oy-next-no { font-size: 1.3rem; top: 12px; left: 14px; }
  .oy-next-label { font-size: 1.4rem; bottom: 12px; }
}

.oy-cta-wrap { padding-top: clamp(56px, 8vw, 96px); }
.oy-cta-wrap .cta .btn svg { width: 22px; height: 22px; }
/* stack copy over buttons while the dock narrows the container, like the other pages' CTA bands */
@media (max-width: 1180px) { .oy-cta-wrap .cta { grid-template-columns: minmax(0, 1fr); } }