:root{
  --bg-color:#261b1b;
  --bg-light:#3b2626;
  --card-bg:rgba(59, 38, 38, 0.85);
  --text-color:#F5F3F7;
  --text-muted:#b8a1a1;
  --accent-color:#dd4e4e;
  --accent-hover:#bf3e3e;
  --border-color:rgba(255, 180, 180, 0.1);
  --footer-bg:#12101A;
  --green-accent:#4CAF50;
  --yellow-accent:#FFC700;
  --red-accent:#F44336;
  --orange-accent:#FF9100;
  --discord-blue:#5865F2;
}
body{
  background-color:var(--bg-color);
  color:var(--text-color);
  font-family:Manrope,Inter,system-ui,sans-serif
}
a{color:var(--accent-color);text-decoration:none}


.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.page-hero{padding:40px 0 10px;text-align:center}
.page-hero h1{margin:0 0 .5rem;font-weight:800;font-size:2.5rem;color:#fff}
.page-hero .subtitle{color:var(--text-muted);max-width:700px;margin:0 auto}


.items-display{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:22px;
  padding:20px 0 40px;
}
.item-card{
  background:var(--bg-light);
  border:1px solid var(--border-color);
  border-radius:12px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s, background-color .25s;
  cursor:pointer;
  text-align:center;
}
.item-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  border-color:var(--accent-color);
}
.item-image{
  width:100%;
  height:150px;
  object-fit:contain;
  background:rgba(0,0,0,.2);
  padding:12px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.item-info{
  background:rgba(0,0,0,.18);
  padding:14px 12px;
  border-top:1px solid var(--border-color);
}
.item-name{
  margin:0;
  font-weight:700;
  color:#fff;
  letter-spacing:.2px;
}


.skinchanger-section{padding:48px 0}


#skin-search-box{
  width:100%;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--bg-color);
  color:#fff;
  padding:12px 14px;
  margin-bottom:14px;
}
#skin-search-box:focus{outline:0;border-color:var(--accent-color)}


.result-bar{
  display:flex;align-items:center;justify-content:flex-end;
  color:var(--text-muted);font-size:.9rem;margin:-6px 0 10px;
}


.model-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
  overflow:auto;
  padding-right:6px;
}
.model-grid::-webkit-scrollbar{width:8px}
.model-grid::-webkit-scrollbar-track{background:var(--bg-color);border-radius:4px}
.model-grid::-webkit-scrollbar-thumb{background:var(--bg-light);border-radius:4px}
.model-grid::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}

.model-item{
  background:var(--bg-light);
  border:1px solid transparent;
  border-radius:10px;
  padding:10px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  transition:transform .2s, background-color .2s, border-color .2s;
  cursor:pointer;
}
.model-item:hover{
  transform:scale(1.04);
  background:var(--accent-color);
  border-color:var(--accent-hover);
}
.model-image{width:100%;height:100px;object-fit:contain;margin-bottom:8px}
.model-name{font-size:.9rem;color:#fff}


.copy-notification{
  position:fixed; right:20px; bottom:20px;
  
  display:inline-flex; align-items:center; gap:10px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35)), var(--bg-light);
  color:var(--text-color);
  padding:12px 16px 14px 16px;
  border:1px solid var(--border-color);
  border-left:4px solid var(--accent-color);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  pointer-events:none;
  z-index:2100;
}
.copy-notification.show{
  opacity:1; visibility:visible; transform:translateY(0);
}
.copy-notification::before{
  content:"✔";
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  background:var(--accent-color); color:#fff; border-radius:50%;
  font-weight:800; font-size:.9rem;
  box-shadow:0 0 0 3px rgba(221, 78, 78, 0.2);
}
.copy-notification::after{
  content:"";
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--accent-color);
  transform-origin:left;
}
.copy-notification.show::after{
  animation:toast-life 2.5s linear forwards;
}
@keyframes toast-life{
  from{width:100%}
  to{width:0}
}
.skinchanger-modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,14,.55);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:2000;
}
.skinchanger-modal.is-open{
  opacity:1; pointer-events:auto;
}
.skinchanger-modal .modal-content{
  width:min(920px, 92vw);
  max-height:min(80vh, 820px);
  overflow:auto;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  transform:translateY(6px) scale(.98);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.98;
  padding:16px;
}
.skinchanger-modal.is-open .modal-content{
  transform:translateY(0) scale(1);
  opacity:1;
}

.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.close-modal{
  background:transparent; color:#fff; border:0; font-size:1.6rem; line-height:1;
  cursor:pointer; padding:6px 8px; border-radius:8px;
}
.close-modal:hover{ background:rgba(255,255,255,.06) }
body.modal-open{ overflow:hidden }
#skin-search-box{ margin-top:6px }
.result-bar{ margin:4px 0 12px }
.no-results{
  display:none; align-items:center; justify-content:center;
  color:var(--text-muted);
  background:rgba(0,0,0,.1);
  border:1px dashed var(--border-color);
  border-radius:10px;
  padding:18px; grid-column:1/-1;
}
.is-hidden{display:none!important}
.category-filter{
  position:sticky; top:0; z-index:5;
  display:flex; gap:8px; align-items:center;
  padding:10px; margin:16px 0 18px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:12px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  --fade:16px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.category-filter.is-at-start{
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
.category-filter.is-at-end{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
}
.category-filter.is-at-start.is-at-end{
  -webkit-mask-image:none; mask-image:none;
}
.filter-btn{ --cat-color: var(--accent-color); }
.filter-btn[data-group="all"]{ --cat-color: var(--accent-color); }
.filter-btn[data-group="knives"]{ --cat-color: var(--red-accent); }
.filter-btn[data-group="pistols"]{ --cat-color: var(--orange-accent); }
.filter-btn[data-group="smgs"]{ --cat-color: var(--yellow-accent); }
.filter-btn[data-group="rifles"]{ --cat-color: var(--green-accent); }
.filter-btn[data-group="snipers"]{ --cat-color: var(--discord-blue); }
.filter-btn[data-group="gloves"]{ --cat-color: var(--accent-color); }
.filter-btn[data-group="equipment"]{ --cat-color: var(--discord-blue); }
.filter-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text-color);
  border:1px solid var(--border-color);
  cursor:pointer; font-weight:700; font-size:.95rem;
  white-space:nowrap; line-height:1;
  transition:background-color .2s, border-color .2s, transform .1s, box-shadow .2s, color .2s;
}
.filter-btn .label{opacity:.95}
.filter-btn .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 8px;
  border-radius:999px; font-size:.8rem; font-weight:800;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cat-color) 14%, transparent), rgba(255,255,255,.06));
  border:1px solid color-mix(in srgb, var(--cat-color) 28%, rgba(255,255,255,.14));
  color: color-mix(in srgb, var(--cat-color) 75%, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.filter-btn.is-active{
  background:var(--cat-color);
  border-color:var(--cat-color);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.filter-btn.is-active .icon{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.25);
  color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.filter-btn .badge{
  border-color:rgba(255,255,255,.12);
}
.filter-btn.is-active .badge{
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16));
  border-color:rgba(255,255,255,.28);
  color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cat-color) 30%, transparent);
}

/* Badge bump animasyonu (skinchanger) */
@keyframes badge-bump {
  0% { transform:scale(1) }
  40% { transform:scale(1.12) }
  100% { transform:scale(1) }
}
.filter-btn .badge.is-bump{
  animation: badge-bump .32s ease;
}

.faq{
  margin:10px 0 16px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:6px;
}
.faq-item{ border-radius:8px; overflow:hidden }
.faq-item + .faq-item{ margin-top:6px }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.04);
  color:#fff;
  border:1px solid var(--border-color);
  border-radius:8px;
}
.faq-item[open] summary{
  background:rgba(255,255,255,.07);
  border-color:var(--accent-color);
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"⌄";
  font-size:14px;
  color:var(--text-muted);
  transition:transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(180deg); color:#fff }
.faq-body{
  padding:10px 14px 14px;
  color:var(--text-muted);
  line-height:1.6;
}


@media (max-width: 520px){
  .category-filter{ padding:8px; gap:6px }
  .filter-btn{ padding:7px 10px; gap:8px; font-size:.9rem }
  .filter-btn .badge{ min-width:20px; height:20px; font-size:.75rem }
}

.chev{
  width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border-color);
  color: var(--text-muted);
  transition: transform .25s ease, color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open .chev{
  transform: rotate(180deg);
  color:#fff;
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(221,78,78,.15);
}


.faq-panel{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
  margin: 0 2px;
}
.faq-item.is-open .faq-panel{
  grid-template-rows: 1fr;
}
.faq-panel-inner{
  overflow:hidden;
  padding: 0 14px 0;
}
.faq-item.is-open .faq-panel-inner{
  padding: 8px 14px 14px;
  transition: padding .2s ease;
}
.faq-panel-inner p{
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


@media (max-width: 520px){
  .category-filter{ padding:8px; gap:6px }
  .filter-btn{ padding:7px 10px; gap:8px; font-size:.9rem }
  .filter-btn .badge{ min-width:20px; height:20px; font-size:.75rem }
}