/* Sayfa araç takımı: sayfa başı, araç çubuğu, rütbe seçici, dilim, kahraman seçici, tablo, grafikler, alt menü */

/* ---------------------------------------------------------------- sayfa başı (görselli bant) */
.sb { position: relative; overflow: hidden; border-bottom: 1px solid var(--cizgi); }
.sb-zemin { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
html.hareket .sb-zemin { animation: dgZemin 1.8s cubic-bezier(.2, .7, .2, 1) backwards, kenburns 34s ease-in-out 1.8s infinite alternate; }
@keyframes dgZemin { from { opacity: 0; transform: scale(1.1); } }
.sb::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 7, 7, .96) 0%, rgba(7, 7, 7, .82) 42%, rgba(7, 7, 7, .45) 75%, rgba(7, 7, 7, .7)),
    linear-gradient(0deg, var(--zemin) 0%, transparent 45%), linear-gradient(180deg, rgba(7, 7, 7, .5), transparent 30%); }
.sb-ic { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 52px 0 34px; }
.sb-metin { display: grid; gap: 14px; justify-items: start; max-width: 720px; }
.sb-metin h1 { font-size: clamp(34px, 4.6vw, 62px); }
.sb-metin p { margin: 0; color: var(--krem-2); font-size: 17px; }
html.hareket .sb-metin > * { animation: belir .7s cubic-bezier(.2, .7, .2, 1) backwards; }
html.hareket .sb-metin > :nth-child(2) { animation-delay: .07s; }
html.hareket .sb-metin > :nth-child(3) { animation-delay: .14s; }
.sb-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(7, 7, 7, .6); border: 1px solid var(--cizgi-2);
  font: 600 13px/1 var(--f-arayuz); color: var(--krem-2); backdrop-filter: blur(4px); white-space: nowrap; }
.cip svg { width: 15px; height: 15px; color: var(--turuncu-2); }
.cip b { color: var(--krem); }

/* ---------------------------------------------------------------- araç çubuğu (filtreler) */
.arac-cubugu { position: sticky; top: 68px; z-index: 20; margin: 0 0 24px; padding: 12px 0; background: rgba(7, 7, 7, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.arac-cubugu-ic { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arac-cubugu .bosluk { flex: 1; }
.arac-not { font: 500 13px/1.3 var(--f-arayuz); color: var(--krem-3); }

.dilim { display: inline-flex; align-items: stretch; padding: 4px; gap: 2px; border-radius: 9px; background: rgba(247, 233, 213, .05); border: 1px solid var(--cizgi); }
/* metin dikeyde ortada: grid satırı esnediğinde yazı üstte kalıyordu (10. tur) */
.dilim button { display: grid; align-content: center; justify-items: center; gap: 3px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 6px; background: none; color: var(--krem-3); font: 600 13.5px/1 var(--f-arayuz); text-align: center; white-space: nowrap; transition: color .15s, background .2s; }
.dilim button small { font: 500 11px/1 var(--f-arayuz); opacity: .8; }
.dilim button:hover { color: var(--krem); }
.dilim button[aria-checked="true"] { background: var(--krem); color: var(--murekkep); }

/* rütbe seçici */
.rutbe-sec { position: relative; }
.rutbe-dug, .k-secici-dug { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 8px; border-radius: 9px; border: 1px solid var(--cizgi-2); background: rgba(247, 233, 213, .05); color: var(--krem); text-align: left; transition: border-color .15s, background .15s; }
.rutbe-dug:hover, .k-secici-dug:hover, .rutbe-dug[aria-expanded="true"], .k-secici-dug[aria-expanded="true"] { border-color: var(--krem-3); background: rgba(247, 233, 213, .08); }
.rutbe-dug > span:nth-child(2), .k-secici-dug > span:nth-child(2) { display: grid; gap: 3px; }
.rutbe-dug small, .k-secici-dug small { font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; color: var(--krem-3); }
.rutbe-dug b, .k-secici-dug b { font: 600 14px/1.1 var(--f-arayuz); white-space: nowrap; }
.rutbe-dug > svg, .k-secici-dug > svg { width: 16px; height: 16px; color: var(--krem-3); }
.rutbe-ikili { display: flex; align-items: center; }
.rutbe-ikili img { width: 34px; height: 30px; object-fit: contain; }
.rutbe-ikili img + img { margin-left: -10px; }
.rutbe-ikili.tum { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(247, 233, 213, .07); }
.rutbe-ikili.tum svg { width: 18px; height: 18px; color: var(--turuncu-2); }
.rutbe-pop, .k-secici-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(560px, calc(100vw - 32px)); padding: 16px; border-radius: 12px; background: #13100d; border: 1px solid var(--cizgi-2); box-shadow: 0 26px 60px rgba(0, 0, 0, .65); }
.rutbe-pop[hidden], .k-secici-pop[hidden] { display: none; }
html.hareket .rutbe-pop:not([hidden]), html.hareket .k-secici-pop:not([hidden]) { animation: buyuAc .2s cubic-bezier(.2, .8, .2, 1); }
.rutbe-pop-bas { display: grid; gap: 4px; margin-bottom: 12px; }
.rutbe-pop-bas b { font: 700 16px/1 var(--f-baslik); text-transform: uppercase; }
.rutbe-pop-bas small { color: var(--krem-3); font-size: 12.5px; }
.rutbe-hazir { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rutbe-hazir button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: none; color: var(--krem-2); font: 600 12.5px/1 var(--f-arayuz); }
.rutbe-hazir button:hover { color: var(--krem); border-color: var(--krem-3); }
.rutbe-hazir button.secili { background: var(--krem); color: var(--murekkep); border-color: var(--krem); }
.rutbe-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rutbe-izgara button { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 8px; border: 1px solid transparent; background: rgba(247, 233, 213, .03); color: var(--krem-3); font: 600 11px/1.1 var(--f-arayuz); transition: background .15s, border-color .15s, color .15s; }
.rutbe-izgara img { width: 46px; height: 38px; object-fit: contain; transition: transform .2s; }
.rutbe-izgara button:hover { color: var(--krem); background: rgba(247, 233, 213, .07); }
.rutbe-izgara button:hover img { transform: scale(1.08); }
.rutbe-izgara button.aralikta { color: var(--krem); background: color-mix(in srgb, var(--rr) 16%, transparent); border-color: color-mix(in srgb, var(--rr) 55%, transparent); }
.rutbe-izgara button.bas { box-shadow: 0 0 0 2px var(--turuncu); }
.rutbe-rozet { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--f-arayuz); color: var(--krem-2); white-space: nowrap; }
.rutbe-rozet img { width: 28px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.rutbe-rozet.buyuk img { width: 64px; height: 54px; }
.rutbe-rozet.buyuk span { font: 700 16px/1 var(--f-baslik); text-transform: uppercase; color: var(--rr); }

/* kahraman seçici */
.k-secici { position: relative; }
.k-secici-dug img, .k-bos { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; object-position: 50% 12%; }
.k-bos { display: grid; place-items: center; background: rgba(247, 233, 213, .07); color: var(--turuncu-2); }
.k-bos svg { width: 18px; height: 18px; }
.k-secici-pop { width: min(640px, calc(100vw - 32px)); display: grid; gap: 10px; }
.k-secici-pop .girdi { height: 40px; }
.k-secici-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.k-secici-liste button { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--krem-2); font: 600 11.5px/1.1 var(--f-arayuz); text-align: center; }
.k-secici-liste button[hidden] { display: none; }
.k-secici-liste img, .k-secici-liste .k-bos { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; object-position: 50% 12%; }
.k-secici-liste button:hover { background: rgba(247, 233, 213, .06); color: var(--krem); }
.k-secici-liste button.secili { border-color: var(--turuncu); background: rgba(221, 102, 56, .1); color: var(--krem); }

/* arama kutusu (araç çubuğunda) */
.kl-ara { position: relative; display: flex; align-items: center; width: min(320px, 100%); }
.kl-ara svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--krem-3); pointer-events: none; }
.kl-ara .girdi { height: 46px; padding-left: 38px; }

/* ---------------------------------------------------------------- tablo */
.tablo-kap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--cizgi); background: linear-gradient(180deg, var(--kart-2), var(--kart)); }
.tablo { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--f-arayuz); font-variant-numeric: tabular-nums; }
.tablo th { position: sticky; top: 0; z-index: 1; padding: 0; background: #1a1612; border-bottom: 1px solid var(--cizgi-2); text-align: left; white-space: nowrap;
  font: 600 11.5px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.tablo th > button, .tablo th:not(:has(button)) { display: flex; align-items: center; gap: 6px; width: 100%; height: 44px; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.tablo th:not(:has(button)) { display: table-cell; vertical-align: middle; }
.tablo th.sag > button { justify-content: flex-end; }
.tablo th > button:hover { color: var(--krem); }
.tablo th > button i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .25; }
.tablo th > button.artan i { border-top: 0; border-bottom: 5px solid var(--turuncu-2); opacity: 1; }
.tablo th > button.azalan i { border-top-color: var(--turuncu-2); opacity: 1; }
.tablo th > button.artan, .tablo th > button.azalan { color: var(--krem); }
.tablo td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; white-space: nowrap; }
.tablo td.sag { text-align: right; }
.tablo tbody tr { transition: background .12s; }
.tablo tbody tr:hover { background: rgba(247, 233, 213, .04); }
.tablo tbody tr:last-child td { border-bottom: 0; }
html.hareket .tablo tbody tr { animation: hafifBelir .35s ease-out backwards; animation-delay: calc(var(--i, 0) * 14ms); }
.t-ad { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--krem); }
.t-ad img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); }
.t-ad small { display: block; margin-top: 2px; font: 500 12px/1 var(--f-arayuz); color: var(--krem-3); }
.t-ad > span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.t-cubuk { display: inline-grid; grid-template-columns: 48px 70px; gap: 8px; align-items: center; }
.t-cubuk span { height: 6px; border-radius: 3px; background: rgba(247, 233, 213, .08); overflow: hidden; }
.t-cubuk span i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--yesil)); transform-origin: left; }
html.hareket .t-cubuk span i { animation: uzan .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 14ms); }
.fark { font: 700 12.5px/1 var(--f-arayuz); white-space: nowrap; }
.fark.arti { color: var(--yesil); } .fark.eksi { color: var(--kirmizi); } .fark.notr, .fark.yok { color: var(--krem-3); }

/* ---------------------------------------------------------------- grafikler */
.grafik { position: relative; }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-izgara { stroke: rgba(247, 233, 213, .07); }
.g-orta { stroke: rgba(247, 233, 213, .22); stroke-dasharray: 4 5; }
.g-eksen { fill: var(--krem-3); font: 600 11px var(--f-arayuz); }
.g-eksen-ad { fill: var(--krem-3); font: 600 11.5px var(--f-arayuz); letter-spacing: .08em; text-transform: uppercase; }
.g-imlec { stroke: rgba(247, 233, 213, .35); stroke-dasharray: 3 4; }
html.hareket .grafik .g-cizgi { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz 1.2s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .15s); }
@keyframes ciz { to { stroke-dashoffset: 0; } }
html.hareket .grafik .g-nokta { animation: belir .4s ease-out backwards; animation-delay: 1s; }
.g-lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font: 600 12.5px/1 var(--f-arayuz); color: var(--krem-2); }
.g-lejant i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.g-kutu { position: absolute; top: 8px; z-index: 3; display: grid; gap: 5px; min-width: 150px; padding: 10px 12px; border-radius: 8px; background: #110e0b; border: 1px solid var(--cizgi-2); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); pointer-events: none; font: 500 12.5px/1.2 var(--f-arayuz); color: var(--krem-2); }
.g-kutu[hidden] { display: none; }
.g-kutu b { font: 700 13px/1 var(--f-arayuz); color: var(--krem); }
.g-kutu i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.g-kutu em { font-style: normal; font-weight: 700; color: var(--krem); }
.g-simge { cursor: pointer; outline: none; transition: transform .2s; }
.g-simge-zemin { stroke: rgba(0, 0, 0, .5); stroke-width: 1.5; transition: stroke .15s; }
.g-simge:hover .g-simge-zemin, .g-simge:focus .g-simge-zemin { stroke: var(--krem); stroke-width: 2.5; }
html.hareket .dagilim .g-simge { animation: hafifBelir .5s ease-out backwards; animation-delay: calc(var(--i, 0) * 12ms); }

/* ---------------------------------------------------------------- yapışkan alt menü */
.alt-menu { position: sticky; top: 68px; z-index: 20; background: rgba(9, 8, 7, .985); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
@media (max-width: 640px) { .alt-menu a.alt-menu-kim { max-width: 150px; } .alt-menu-kim b { font-size: 14px; } .alt-menu-kim img { width: 24px; height: 24px; } }
.alt-menu-ic { display: flex; align-items: center; gap: 0; }
.alt-menu-bag { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.alt-menu-bag::-webkit-scrollbar { display: none; }
.alt-menu-isaret { height: 1px; margin-bottom: -1px; }
/* solda kimlik, her zaman: "[yüz] APOLLO |" (yalnız yapışınca çıkması "bazen var bazen yok" gibi görünüyordu) */
.alt-menu a.alt-menu-kim { flex: none; display: inline-flex; align-items: center; gap: 9px; max-width: 280px; padding: 0 6px 0 3px; overflow: hidden; color: var(--krem); }
.alt-menu a.alt-menu-kim::after { display: none; }
.alt-menu-kim img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kr, var(--turuncu)) 70%, transparent); }
.alt-menu-kim b { overflow: hidden; text-overflow: ellipsis; font: 700 16px/1 var(--f-baslik); text-transform: uppercase; white-space: nowrap; }
.alt-menu-kim > i { width: 2px; height: 22px; margin-left: 6px; background: var(--cizgi-2); }
.alt-menu-kim:hover b { color: var(--kr, var(--turuncu-2)); }
.alt-menu a { position: relative; flex: none; display: inline-flex; align-items: center; height: 50px; padding: 0 14px; font: 600 14px/1 var(--f-arayuz); color: var(--krem-3); transition: color .15s; }
.alt-menu a:hover { color: var(--krem); }
.alt-menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--turuncu); transform: scaleX(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.alt-menu a.secili { color: var(--krem); }
.alt-menu a.secili::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- ortak kart parçaları */
.kart-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kart-bas h3 { font-size: 19px; }
.kart-bas small { font: 500 12.5px/1.3 var(--f-arayuz); color: var(--krem-3); }
.icerik-kart { padding: 20px; }
.bos-durum { display: grid; justify-items: center; gap: 10px; padding: 34px 16px; text-align: center; color: var(--krem-3); }
.bos-durum svg { width: 28px; height: 28px; }
.bos-durum p { margin: 0; max-width: 420px; }
.bilgi-notu { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: rgba(247, 233, 213, .04); font-size: 13px; line-height: 1.45; color: var(--krem-3); }
.bilgi-notu svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--krem-3); }
.yukleme-satiri { display: flex; align-items: center; gap: 10px; padding: 18px 0; color: var(--krem-3); font: 500 14px/1 var(--f-arayuz); }

/* yatay oranlı çubuk listeleri (hasar kaynakları, iyileştirme; kahraman ve maç sayfaları) */
.kh-hasar-tur { display: flex; height: 38px; margin-bottom: 16px; border-radius: 8px; overflow: hidden; }
.kh-hasar-tur span { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 8px; background: var(--c); color: var(--murekkep); font: 700 12.5px/1 var(--f-arayuz); white-space: nowrap; overflow: hidden; }
.kh-hasar-tur span b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
html.hareket .belir.gorundu .kh-hasar-tur span { animation: uzan .9s cubic-bezier(.2, .8, .2, 1) backwards; transform-origin: left; }
.kh-hasar-satir { display: grid; grid-template-columns: 36px 150px minmax(0, 1fr) 50px 76px; gap: 10px; align-items: center; padding: 5px 0; }
.kh-hasar-ikon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, #15120f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); }
.kh-hasar-ikon img { width: 68%; height: 68%; object-fit: contain; }
.kh-hasar-ikon svg { width: 18px; height: 18px; }
.kh-hasar-satir b { display: grid; gap: 2px; overflow: hidden; font: 600 13.5px/1.15 var(--f-arayuz); white-space: nowrap; text-overflow: ellipsis; }
.kh-hasar-satir b small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); }
.kh-hasar-cubuk { height: 8px; border-radius: 4px; background: rgba(247, 233, 213, .07); overflow: hidden; }
.kh-hasar-cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--c); transform-origin: left; }
html.hareket .gorundu .kh-hasar-cubuk i { animation: uzan .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 50ms); }
.kh-hasar-satir em { font: 700 14px/1 var(--f-arayuz); font-style: normal; text-align: right; }
.kh-hasar-satir > small { font: 500 12px/1 var(--f-arayuz); color: var(--krem-3); text-align: right; }

@media (max-width: 760px) {
  .sb-ic { padding: 40px 0 26px; }
  .arac-cubugu { top: 68px; }
  .dilim button { padding: 6px 10px; font-size: 12.5px; }
  .rutbe-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rutbe-pop, .k-secici-pop { left: auto; right: auto; position: fixed; top: 140px; left: 16px; width: calc(100vw - 32px); }
}

/* dar ekranlarda taşma önlemleri */
.kart-bas > * { min-width: 0; }
.kart-bas small { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .dilim { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .dilim::-webkit-scrollbar { display: none; }
  .dilim button { flex: none; }
}

/* ---------------------------------------------------------------- oyundaki eşya kartı (DT.oyunKart) */
.oyun-kart { --ok-g: 76px; --ok-renk: #f0a24c; --ok-yazi: #1d1712; position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: var(--ok-g); height: calc(var(--ok-g) * 1.48); padding: calc(var(--ok-g) * .045) calc(var(--ok-g) * .045) 0; border-radius: 3px;
  background: var(--ok-arka) center / cover no-repeat, #6b5a45; box-shadow: 2px 2px 10px rgba(0, 0, 0, .5); color: var(--ok-yazi);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4), box-shadow .18s, filter .2s; }
.oyun-kart.y-silah { --ok-renk: #f3a94f; } .oyun-kart.y-dayaniklilik { --ok-renk: #93d36b; } .oyun-kart.y-ruh { --ok-renk: #c39ff3; }
.oyun-kart.y-silah.k1 { --ok-arka: url("oyun/dukkan/kart-silah-1.webp"); } .oyun-kart.y-silah.k2 { --ok-arka: url("oyun/dukkan/kart-silah-2.webp"); }
.oyun-kart.y-silah.k3 { --ok-arka: url("oyun/dukkan/kart-silah-3.webp"); } .oyun-kart.y-silah.k4 { --ok-arka: url("oyun/dukkan/kart-silah-4.webp"); --ok-yazi: #e4c5a1; }
.oyun-kart.y-dayaniklilik.k1 { --ok-arka: url("oyun/dukkan/kart-dayaniklilik-1.webp"); } .oyun-kart.y-dayaniklilik.k2 { --ok-arka: url("oyun/dukkan/kart-dayaniklilik-2.webp"); }
.oyun-kart.y-dayaniklilik.k3 { --ok-arka: url("oyun/dukkan/kart-dayaniklilik-3.webp"); --ok-yazi: #10140b; } .oyun-kart.y-dayaniklilik.k4 { --ok-arka: url("oyun/dukkan/kart-dayaniklilik-4.webp"); --ok-yazi: #c2e7cd; }
.oyun-kart.y-ruh.k1 { --ok-arka: url("oyun/dukkan/kart-ruh-1.webp"); } .oyun-kart.y-ruh.k2 { --ok-arka: url("oyun/dukkan/kart-ruh-2.webp"); }
.oyun-kart.y-ruh.k3 { --ok-arka: url("oyun/dukkan/kart-ruh-3.webp"); --ok-yazi: #120f1c; } .oyun-kart.y-ruh.k4 { --ok-arka: url("oyun/dukkan/kart-ruh-4.webp"); --ok-yazi: #e3d4f2; }
.ok-resim { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; box-shadow: 1px 1px 4px rgba(0, 0, 0, .35); background: rgba(0, 0, 0, .2); }
.ok-resim img { width: 100%; height: 100%; object-fit: cover; }
.oyun-kart.aktif { border-radius: 50% 50% 3px 3px / 30% 30% 3px 3px; }
.oyun-kart.aktif .ok-resim { border-radius: 50% 50% 2px 2px / 50% 50% 2px 2px; }
.ok-ad { display: grid; place-items: center; padding: 1px 1px 3px; text-align: center; overflow: hidden; font: 700 calc(var(--ok-g) * .158)/1.02 var(--f-arayuz); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.ok-ad.orta { font-size: calc(var(--ok-g) * .142); }
.ok-ad.uzun { font-size: calc(var(--ok-g) * .124); }
.ok-kademe { position: absolute; top: 0; right: 0; width: calc(var(--ok-g) * .34); aspect-ratio: 1; clip-path: polygon(0 0, 100% 0, 100% 100%); border-top-right-radius: 3px;
  background: var(--ok-renk); color: #1d1712; font: 800 calc(var(--ok-g) * .12)/1 var(--f-arayuz); font-style: normal; text-align: right; padding: 3px 3px 0 0; }
.ok-guclendir { position: absolute; left: 2px; right: 2px; top: calc(var(--ok-g) * .66); display: flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 0;
  font: 800 calc(var(--ok-g) * .1)/1 var(--f-baslik); text-transform: uppercase; letter-spacing: .03em; color: #fff; background: #241c33; transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.ok-guclendir img { width: calc(var(--ok-g) * .14); height: calc(var(--ok-g) * .14); }
.ok-not { position: absolute; left: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
a.oyun-kart:hover, a.oyun-kart:focus-visible { z-index: 2; transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 22px rgba(0, 0, 0, .55), 0 0 0 2px var(--ok-renk); }
html.hareket .oyun-kart.belirsin { animation: pat .42s cubic-bezier(.2, .8, .2, 1.3) backwards; animation-delay: calc(var(--i, 0) * 16ms); }

/* sıkça sorulan sorular */
.sss { display: grid; gap: 10px; }
.sss-oge { padding: 0; }
.sss-oge summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 16px/1.35 var(--f-arayuz); color: var(--krem); }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after { content: "+"; flex: none; font: 400 22px/1 var(--f-arayuz); color: var(--krem-3); transition: transform .2s; }
.sss-oge[open] summary::after { transform: rotate(45deg); }
.sss-cevap { padding: 0 20px 18px; color: var(--krem-2); line-height: 1.65; max-width: 80ch; }
.sss-cevap a { color: var(--krem); text-decoration: underline; text-underline-offset: 2px; }