.rules header{margin-bottom:1rem}.rules-grid{display:grid;grid-template-columns:1fr;gap:1rem}.rules .card{padding:1rem;border:1px solid var(--border);border-radius:1rem;background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));position:relative;--accent: var(--brand, #5b7cff);box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden}/* Üst çizgi tam sığsın (köşelerle hizalı) */.rules .card::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff));opacity:.9;border-radius:inherit;pointer-events:none}.rules .card h2{margin:0 0 .35rem;font-size:1.1rem;font-weight:900;display:flex;align-items:center;gap:.5rem;border-left:4px solid var(--accent);padding-left:.55rem;position:relative}.rules .card h2::before{content:"📌";display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}.rules .card[data-cat="komutcu"] h2::before{content:"🎙️"}.rules .card[data-cat="yetkili"] h2::before{content:"🛡️"}.rules .card[data-cat="sunucu"] h2::before{content:"🎮"}.rule{padding:.6rem .4rem;border-top:1px solid color-mix(in srgb, var(--accent) 18%, var(--border))}.rule:first-of-type{border-top:none;padding-top:.2rem}.rule h3{margin:.2rem 0 .25rem;color:#eef2ff;display:flex;align-items:center;gap:.45rem}.rule h3::before{content:"◆";display:inline-block;font-size:.8rem;line-height:1;color:var(--accent);filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}.rule p{margin:0 0 .25rem;color:#c8d0e4}/* Üst araç çubuğu (arama + çipler) */.rules .rules-toolbar{display:flex;flex-wrap:wrap;gap:.6rem .8rem;align-items:center;justify-content:space-between;margin:.5rem 0 1rem}#rulesSearch{flex:1 1 280px;border:1px solid var(--border);border-radius:.7rem;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));color:#fff;padding:.6rem .8rem}#rulesSearch:focus{outline:0;box-shadow:0 0 0 3px color-mix(in srgb, var(--brand, #5b7cff) 28%, transparent)}/* Kategori çipleri */.chip-bar{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap }.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:#fff; font-weight:800; cursor:pointer; transition: background-color .2s, border-color .2s, transform .1s, box-shadow .2s;}.chip:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.22) }.chip.is-active{ background:linear-gradient(90deg, var(--brand, #5b7cff), color-mix(in srgb, var(--brand, #5b7cff) 60%, #ffffff)); border-color:var(--brand, #5b7cff); }/* Grid ve kartlar (mevcut stilleri güçlendir) */.rules-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }.rules .card{ padding:1rem; border:1px solid var(--border); border-radius:1rem; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)); position:relative; --accent: var(--brand, #5b7cff); box-shadow:0 8px 24px rgba(0,0,0,.18); overflow:hidden; /* çizgi köşelerde taşmadan tam otursun */ }.rules .card::before{ content:""; position:absolute; inset:-1px -1px auto -1px; height:3px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff)); opacity:.9; border-radius:inherit; /* kartın radius’unu izle */ pointer-events:none; }.rules .card h2{ margin:0 0 .35rem; font-size:1.1rem; font-weight:900; display:flex; align-items:center; gap:.5rem; border-left:4px solid var(--accent); padding-left:.55rem; position:relative; }.rules .card h2::before{ content:"📌"; display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; filter:drop-shadow(0 1px 0 rgba(0,0,0,.12)); }.rules .card[data-cat="komutcu"] h2::before{ content:"🎙️" }.rules .card[data-cat="yetkili"] h2::before{ content:"🛡️" }.rules .card[data-cat="sunucu"] h2::before{ content:"🎮" }/* Yüklenme iskeleti */ .rules-grid.is-loading .card.skeleton{ position:relative; overflow:hidden; }.rules-grid.is-loading .card.skeleton h2,.rules-grid.is-loading .card.skeleton .line{ background:rgba(255,255,255,.06); border-radius:.4rem; height:16px; }.rules-grid.is-loading .card.skeleton h2{ width:40%; height:18px; margin:0 0 .6rem }.rules-grid.is-loading .card.skeleton .line{ height:12px; margin:.4rem 0 }.rules-grid.is-loading .card.skeleton .line.short{ width:60% }.rules-grid.is-loading .card.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }/* Boş durum */ .rules .empty{ grid-column:1/-1; border:1px dashed var(--border); color:#aab3c7; border-radius:.8rem; padding:1rem; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)); margin-top:.5rem; }/* Mobil uyum */ @media (max-width:900px){ .rules-grid{ grid-template-columns:1fr } }/* Kategoriye özel renkler */ .rules .card.cat-komutcu{ --accent:#60a5fa } /* mavi */ .rules .card.cat-yetkili{ --accent:#f472b6 } /* pembe */ .rules .card.cat-sunucu{ --accent:#22c55e } /* yeşil */ .rules .card.cat-genel{ --accent:#5b7cff } /* varsayılan */
/* Üst araç çubuğu (arama + çipler) */
.rules .rules-toolbar{
  display:flex; flex-wrap:wrap; gap:.6rem  .8rem;
  align-items:center; justify-content:space-between;
  margin:.5rem 0 1rem;
}
#rulesSearch{
  flex:1 1 280px;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:#fff; padding:.6rem .8rem;
}
#rulesSearch:focus{ outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand, #5b7cff) 28%, transparent) }

/* Kategori çipleri */
.chip-bar{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .7rem; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:#fff; font-weight:800; cursor:pointer;
  transition: background-color .2s, border-color .2s, transform .1s, box-shadow .2s;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.22) }
.chip.is-active{
  background:linear-gradient(90deg, var(--brand, #5b7cff), color-mix(in srgb, var(--brand, #5b7cff) 60%, #ffffff));
  border-color:var(--brand, #5b7cff);
}

/* Grid ve kartlar (mevcut stilleri güçlendir) */
.rules-grid{
  display:grid; grid-template-columns:1fr;
  gap:1rem;
}
.rules .card{
  padding:1rem; border:1px solid var(--border);
  border-radius:1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  position:relative;
  --accent: var(--brand, #5b7cff);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  overflow:hidden; /* çizgi köşelerde taşmadan tam otursun */
}
.rules .card::before{
  content:"";
  position:absolute; inset:-1px -1px auto -1px; height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff));
  opacity:.9;
  border-radius:inherit;     /* kartın radius’unu izle */
  pointer-events:none;
}
.rules .card h2{
  margin:0 0 .35rem;
  font-size:1.1rem; font-weight:900;
  display:flex; align-items:center; gap:.5rem;
  border-left:4px solid var(--accent);
  padding-left:.55rem;
}

/* Yüklenme iskeleti */
.rules-grid.is-loading .card.skeleton{
  position:relative; overflow:hidden;
}
.rules-grid.is-loading .card.skeleton h2,
.rules-grid.is-loading .card.skeleton .line{
  background:rgba(255,255,255,.06);
  border-radius:.4rem; height:16px;
}
.rules-grid.is-loading .card.skeleton h2{ width:40%; height:18px; margin:0 0 .6rem }
.rules-grid.is-loading .card.skeleton .line{ height:12px; margin:.4rem 0 }
.rules-grid.is-loading .card.skeleton .line.short{ width:60% }
.rules-grid.is-loading .card.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }

/* Boş durum */
.rules .empty{
  grid-column:1/-1;
  border:1px dashed var(--border);
  color:#aab3c7; border-radius:.8rem;
  padding:1rem; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
  margin-top:.5rem;
}

/* Mobil uyum */
@media (max-width:900px){ .rules-grid{ grid-template-columns:1fr } }

/* Kategoriye özel renkler */
.rules .card.cat-komutcu{ --accent:#60a5fa }   /* mavi */
.rules .card.cat-yetkili{ --accent:#f472b6 }   /* pembe */
.rules .card.cat-sunucu{  --accent:#22c55e }   /* yeşil */
.rules .card.cat-genel{   --accent:#5b7cff }   /* varsayılan */