/* ===========================================================================
   CS SKIN LISTE - UST MENU (Plan fa92825b, 05.11.2026, handoff K1-K12)
   Sayfa: PlayerMarket/Views/revolution/pages/skin/list-new.blade.php (yalniz bu sayfa; diger blade'lerdeki
   .skinNav kopyalarina dokunulmadi, B13). Paneller ortak parca: skin/content/_ust-menu-paneller.blade.php.
   Masaustu (.skumKap): 56px kart serit (sekme <button>), hover 150ms / tiklama ile acilan panel (K2), seciliye
   2px nane alt cizgi + "Grup · Silah" etiketi + 26px x (K4), panel sutun sayisi ogeye gore (K3, js), tasma
   varsa 72px solma + 32px ok (K5). Mobil (.skumMobil): hero altinda 40px grup cipleri + alttan acilan sayfa (K1).
   Davranis: js/pages/skin-ust-menu.js. Renkler handoff README (koyu + acik), token disi sabit yok (K9).
   =========================================================================== */
.skumKap, .skumMobil {
    --skumZemin: #181820; --skumKart: #20212B; --skumIc: #272834; --skumIc2: #1C1D26; --skumGorsel: #272834;
    --skumKenar: #333444; --skumCizgi: #2A2B38; --skumGuclu: #4E4F5C;
    --skumT0: #EDEEF2; --skumT1: #C8C9D8; --skumT2: #ABACB5; --skumT3: #8B8C99;
    --skumNane: #80F1B1; --skumNaneUstu: #0A2416; --skumNaneZemin: rgba(128,241,177,.10); --skumNaneKenar: rgba(128,241,177,.45);
    --skumKapGolge: none; --skumGolge: 0 18px 40px rgba(0,0,0,.5); --skumOkGolge: 0 2px 8px rgba(0,0,0,.2); --skumPerde: rgba(12,12,16,.72);
    font-family: inherit;
}
body.light .skumKap, body.light .skumMobil {
    --skumZemin: #FAF9F5; --skumKart: #FFFFFF; --skumIc: #F5F4EE; --skumIc2: #FAF9F5; --skumGorsel: #F0EEE6;
    --skumKenar: #E3E1D9; --skumCizgi: #E8E6DF; --skumGuclu: #C7C5BC;
    --skumT0: #1F1E1D; --skumT1: #3D3C38; --skumT2: #6B6A65; --skumT3: #5F5E58;
    --skumNane: #137E4C; --skumNaneUstu: #FFFFFF; --skumNaneZemin: rgba(19,126,76,.08); --skumNaneKenar: rgba(19,126,76,.40);
    --skumKapGolge: 0 1px 2px rgba(31,30,29,.05); --skumGolge: 0 18px 40px rgba(31,30,29,.14); --skumOkGolge: 0 2px 8px rgba(31,30,29,.12); --skumPerde: rgba(31,30,29,.24);
}
.skumKap *, .skumMobil *, .skumPerde * { box-sizing: border-box; }
.skumKap button, .skumMobil button, .skumPerde button { font-family: inherit; }
.skumKap a, .skumMobil a, .skumPerde a { text-decoration: none; }
.skumKap button:focus-visible, .skumKap a:focus-visible, .skumMobil button:focus-visible, .skumPerde button:focus-visible, .skumPerde a:focus-visible { outline: 2px solid var(--skumNane); outline-offset: 2px; }

/* ---- Masaustu serit (K10, K5) ---------------------------------------------------- */
.skumKap { position: relative; z-index: 20; margin-bottom: 16px; }
.skumSerit { position: relative; height: 56px; border-radius: 14px; background: var(--skumKart); border: 1px solid var(--skumKenar); box-shadow: var(--skumKapGolge); }
.skumListe { margin: 0; padding: 0 4px; list-style: none; height: 100%; display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.skumListe::-webkit-scrollbar { display: none; }
.skumOge { flex: none; position: relative; display: flex; align-items: stretch; }
/* Sekme: <button>, 54px, 14.5/600 ikincil; acikken ic zemin + birincil metin */
.skumSekme {
    height: 54px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--skumT1); white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent; transition: background-color .15s ease, color .15s ease;
}
.skumSekme:hover { color: var(--skumT0); }
.skumSekme[aria-expanded="true"] { background: var(--skumIc); color: var(--skumT0); }
.skumOk { display: flex; color: var(--skumT3); transition: transform .2s ease, color .15s ease; }
.skumSekme[aria-expanded="true"] .skumOk { color: var(--skumNane); transform: rotate(180deg); }
/* K4: secili sekme 2px nane alt cizgi + 800 + "Grup · Silah"; sagda 26px yuvarlak x (sekmenin kardesi) */
.skumOge.secili .skumSekme { padding-right: 44px; font-weight: 800; color: var(--skumT0); box-shadow: inset 0 -2px 0 var(--skumNane); }
.skumKaldir {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--skumGuclu); background: var(--skumKart); color: var(--skumT1); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.skumKaldir:hover { border-color: var(--skumNaneKenar); color: var(--skumT0); }
/* K5: tasan kenarda solma + ok (js .gorunur) */
.skumKenar { display: none; position: absolute; top: 1px; bottom: 1px; width: 72px; align-items: center; z-index: 3; pointer-events: none; }
.skumKenar.gorunur { display: flex; }
.skumKenar.sol { left: 1px; border-radius: 14px 0 0 14px; background: linear-gradient(90deg, var(--skumKart) 55%, transparent); justify-content: flex-start; padding-left: 8px; }
.skumKenar.sag { right: 1px; border-radius: 0 14px 14px 0; background: linear-gradient(270deg, var(--skumKart) 55%, transparent); justify-content: flex-end; padding-right: 8px; }
.skumKenarOk { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--skumGuclu); background: var(--skumKart); color: var(--skumT0); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--skumOkGolge); padding: 0; }
.skumKenarOk:hover { border-color: var(--skumNaneKenar); }

/* ---- Panel (K3, K7, K12) ---------------------------------------------------------- */
.skumPanel {
    position: absolute; top: calc(100% + 6px); left: -1px; width: calc(100% + 2px); z-index: 30;
    display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px;
    background: var(--skumKart); border: 1px solid var(--skumGuclu); box-shadow: var(--skumGolge);
}
.skumPanel[hidden] { display: none; }
.skumPanel.acik { animation: skumIn .14s ease-out; }
@keyframes skumIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.skumPanelBas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 10px; border-bottom: 1px solid var(--skumCizgi); }
.skumPanelAd { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.skumPanelAd b { font-size: 14px; font-weight: 800; color: var(--skumT0); white-space: nowrap; }
.skumPanelAd span { font-size: 12px; font-weight: 700; color: var(--skumT3); white-space: nowrap; }
.skumKap a.skumTumu, .skumPerde a.skumTumu { flex: none; min-height: 28px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--skumNane); white-space: nowrap; }
.skumKap a.skumTumu:hover, .skumPerde a.skumTumu:hover { color: var(--skumNane); text-decoration: underline; text-underline-offset: 3px; }
.skumKap a.skumTumu.secili, .skumPerde a.skumTumu.secili { padding: 0 10px; background: var(--skumNaneZemin); border: 1px solid var(--skumNaneKenar); text-decoration: none; }
.skumTumu svg { flex: none; }
.skumIzgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
/* K6: silah karti = gercek baglanti; 72x54 gorsel (contain), ad 2 satir, secili nane kenar + 18px tik */
.skumKap a.skumKart, .skumPerde a.skumKart {
    position: relative; min-width: 0; height: 56px; display: flex; align-items: center; gap: 10px; padding-right: 10px;
    border-radius: 12px; background: var(--skumIc2); border: 1px solid var(--skumKenar); color: var(--skumT1); overflow: hidden; transition: border-color .15s ease;
}
.skumKap a.skumKart:hover, .skumPerde a.skumKart:hover { border-color: var(--skumNaneKenar); color: var(--skumT1); }
.skumKap a.skumKart.secili, .skumPerde a.skumKart.secili { border-color: var(--skumNane); color: var(--skumT0); padding-right: 32px; }
.skumKartGorsel { flex: none; width: 72px; height: 54px; background: var(--skumGorsel); display: flex; align-items: center; justify-content: center; }
.skumKartGorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.skumKartAd { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skumKartIsaret { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--skumNane); color: var(--skumNaneUstu); align-items: center; justify-content: center; }
.skumKart.secili .skumKartIsaret { display: flex; }
/* Tiklaninca sagda doner simge, ardindan tam sayfa */
.skumKart.yukleniyor { padding-right: 32px; }
.skumKart.yukleniyor .skumKartIsaret { display: none; }
.skumKart.yukleniyor::after { content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--skumNane); border-right-color: transparent; animation: skumDon .7s linear infinite; }
@keyframes skumDon { to { transform: rotate(360deg); } }

/* ---- Mobil: grup cipleri + alttan acilan sayfa (K1) -------------------------------- */
.skumMobil { position: relative; margin: 0 calc(var(--bs-gutter-x, 1rem) * -.5) 12px; }
.skumCipler { margin: 0; padding: 0 calc(var(--bs-gutter-x, 1rem) * .5); list-style: none; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.skumCipler::-webkit-scrollbar { display: none; }
.skumCipOge { flex: none; display: flex; align-items: center; }
.skumCip { height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--skumKenar); background: var(--skumKart); color: var(--skumT1); font-size: 13.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.skumCip .skumOk { color: var(--skumT3); }
.skumCipOge.secili { gap: 2px; height: 40px; padding: 0 2px 0 14px; border-radius: 999px; background: var(--skumNane); }
.skumCipOge.secili .skumCip { height: 40px; padding: 0; border: 0; background: transparent; color: var(--skumNaneUstu); font-weight: 800; }
.skumCipKaldir { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--skumNaneUstu); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.skumCipSolma { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(270deg, var(--skumZemin), transparent); }
.skumCipSolma.gorunur { display: block; }
/* Mobilde paneller DOM'da gizli durur; js secilen paneli sayfaya tasir */
.skumMobil .skumPanel { display: none; }
.skumPerde { position: fixed; inset: 0; z-index: 1050; background: var(--skumPerde); display: flex; align-items: flex-end; }
.skumPerde[hidden] { display: none; }
.skumSayfa { width: 100%; max-height: 82%; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; background: var(--skumKart); border: 1px solid var(--skumGuclu); border-bottom: 0; animation: skumYukari .2s ease-out; }
@keyframes skumYukari { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.skumTutamac { display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--skumGuclu); margin: 10px auto 4px; flex: none; }
.skumSayfaUst { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 6px 10px 16px; border-bottom: 1px solid var(--skumCizgi); }
.skumSayfaUst .skumPanelBas { flex: 1; min-width: 0; padding: 0; border: 0; }
.skumSayfaUst .skumPanelAd b { font-size: 16px; }
.skumSayfaUst a.skumTumu { min-height: 40px; }
.skumSayfaKapat { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--skumT2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.skumSayfaGovde { overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 16px; scrollbar-width: thin; scrollbar-color: var(--skumGuclu) transparent; }
.skumSayfaGovde .skumPanel { display: flex; position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; animation: none; }
.skumSayfaGovde .skumPanel .skumPanelBas { display: none; }
.skumSayfaGovde .skumIzgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skumPerde a.skumKart { height: auto; min-height: 64px; }
.skumPerde .skumKartAd { -webkit-line-clamp: 3; }
@media (prefers-reduced-motion: reduce) {
    .skumPanel.acik, .skumSayfa { animation: none; }
    .skumOk, .skumSekme, .skumKart { transition: none; }
}