/* İÇERİK KAPISI — Bölüm blog sayfaları ortak stili
   (oyunlar / oyun-haberleri / teknoloji / espor / ai).
   tokens.css'ten SONRA yüklenir. Renk ve font SADECE token değişkenlerinden gelir;
   mor yalnızca zeminlerde kullanılır, içerikte mor yazı yoktur (P1 renk disiplini). */

* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
}
a { color: var(--color-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--color-cyan); }
img { max-width: 100%; }

/* ---------------- ÜST BAR (portal sayfalarıyla aynı mor kimlik) ---------------- */
.topbar {
  background-color: #3c1f6e;
  background-image: url("../img/group-head.svg");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(20, 8, 45, .45);
  padding: 8px 16px;
}
.topbar-inner { max-width: 1180px; margin: 0 auto; }
.top-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand img { height: 56px; width: auto; display: block; }
a.brand:hover { text-decoration: none; }
nav.mainnav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
nav.mainnav a {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
nav.mainnav a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--color-orange-soft);
  text-underline-offset: 4px;
}
nav.mainnav a.on { color: var(--color-orange-soft); }
nav.mainnav a .hot-tag {
  background: var(--color-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.top-search { display: flex; gap: 6px; flex: none; }
.top-search input {
  width: 190px;
  max-width: 40vw;
  padding: 7px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
}
.top-search input::placeholder { color: rgba(255, 255, 255, .6); }
.top-search input:focus { border-color: var(--color-orange-soft); }
.top-search button {
  padding: 7px 14px;
  border: none;
  border-radius: 20px;
  background: var(--btn-gradient);
  box-shadow: var(--shadow-btn);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
}

/* ---------------- BÖLÜM BAŞLIĞI ---------------- */
.bl-hero {
  background: linear-gradient(180deg, rgba(60, 31, 110, .88), rgba(12, 17, 32, .25));
  border-bottom: 1px solid var(--border-subtle);
}
.bl-hero-inner { max-width: 1180px; margin: 0 auto; padding: 20px 16px 18px; }
.bl-crumb { font-size: 11.5px; color: var(--text-muted); margin-bottom: 9px; }
.bl-crumb a { color: var(--text-secondary); font-weight: 600; }
.bl-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 7px;
  letter-spacing: .5px;
}
.bl-title .ic { font-size: 29px; line-height: 1; }
.bl-sub { color: #cbb8ea; font-size: 13px; margin: 0; max-width: 730px; line-height: 1.6; }

/* ---------------- GÖVDE IZGARASI ---------------- */
.bl-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 940px) { .bl-wrap { grid-template-columns: 1fr; } }
.bl-main { min-width: 0; }
.bl-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-subtle);
}
.bl-sec-head h2 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: .5px;
}
.bl-sec-head .lnk { font-size: 12px; font-weight: 700; }

/* ---------------- ÖNE ÇIKAN YAZI ---------------- */
.bl-feat {
  position: relative;
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-panel);
  margin-bottom: 16px;
}
.bl-feat:hover { text-decoration: none; border-color: var(--color-cyan); }
.bl-feat-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  background: #1e293b;
}
@media (max-width: 640px) { .bl-feat-img { height: 190px; } }
.bl-feat-body { padding: 15px 18px 17px; }
.bl-feat-body h2 {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.35;
  color: #fff;
  margin: 9px 0 7px;
}
.bl-feat:hover .bl-feat-body h2 { color: var(--color-cyan); }
.bl-feat-body p { color: var(--text-secondary); font-size: 13px; line-height: 1.65; margin: 0 0 9px; }

/* ---------------- YAZI IZGARASI ---------------- */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.bl-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.bl-card:hover { border-color: var(--color-cyan); }
.bl-card-img {
  width: 100%;
  height: 146px;
  object-fit: cover;
  display: block;
  background: #1e293b;
}
.bl-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bl-card-body h3 { font-size: 14px; line-height: 1.42; margin: 0; }
.bl-card-body h3 a { color: #fff; }
.bl-card-body h3 a:hover { color: var(--color-cyan); text-decoration: none; }
.bl-card-body p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.bl-meta { font-size: 11px; color: var(--text-muted); margin-top: auto; padding-top: 6px; }

/* Kategori rozetleri (index.html ve yazilar.html ile aynı renkler) */
.mini-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 4px;
  align-self: flex-start;
}
.cat-haber { background: var(--color-orange); }
.cat-ai { background: #0891b2; }
.cat-ceviri { background: #059669; }
.cat-teknoloji { background: #475569; }
.cat-espor { background: #6d28d9; }

.bl-more {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bl-more:hover { border-color: var(--color-orange-soft); color: var(--color-orange-soft); }
.bl-empty {
  padding: 34px 22px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .02);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  line-height: 1.7;
}

/* ---------------- YAN KOLON ---------------- */
.bl-side { display: flex; flex-direction: column; gap: 16px; }
.bl-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.bl-box-h {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(56, 189, 248, .07), rgba(56, 189, 248, 0));
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .4px;
}
.bl-box-b { padding: 11px 14px 13px; }
.bl-stat { display: flex; gap: 10px; }
.bl-stat div { flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); }
.bl-stat b { display: block; font-family: var(--font-heading); font-size: 19px; color: var(--color-orange-soft); }
.bl-stat span { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.bl-others { display: flex; flex-direction: column; gap: 2px; }
.bl-others a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  color: #e2e8f0;
  font-size: 12.5px;
  font-weight: 600;
}
.bl-others a:hover { background: rgba(56, 189, 248, .09); text-decoration: none; color: #fff; }
.bl-others a i { font-style: normal; font-size: 15px; }
.bl-top { display: flex; flex-direction: column; gap: 9px; }
.bl-top a { display: flex; gap: 9px; align-items: flex-start; color: #e2e8f0; font-size: 12.5px; line-height: 1.45; }
.bl-top a:hover { color: var(--color-cyan); text-decoration: none; }
.bl-top .rk {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--bg-surface-elevated);
  color: var(--color-orange-soft);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-top a:first-child .rk { background: var(--btn-gradient); color: #fff; }
.bl-note { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0; }

/* ---------------- YAMA / MOD TABLOSU (oyunlar.html) ---------------- */
.bl-tablewrap { overflow-x: auto; }
.patch-table { width: 100%; border-collapse: collapse; }
.patch-table th {
  background: #0f1520;
  color: var(--text-muted);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.patch-row { border-bottom: 1px solid #1a2333; }
.patch-row:hover { background: rgba(255, 255, 255, .02); }
.patch-cell { padding: 11px 14px; vertical-align: middle; }
.patch-info { display: flex; align-items: center; gap: 12px; }
.patch-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: #1e293b;
  flex: none;
}
.patch-details h4 { font-size: 13.5px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.patch-meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 9px; flex-wrap: wrap; }
.patch-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-green { background: rgba(16, 185, 129, .15); color: var(--color-green); border: 1px solid rgba(16, 185, 129, .3); }
.tag-slate { background: rgba(148, 163, 184, .12); color: #cbd5e1; border: 1px solid #334155; }
.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6, 182, 212, .12);
  color: var(--color-cyan);
  border: 1px solid rgba(6, 182, 212, .3);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 6px;
  white-space: nowrap;
}
.btn-dl:hover { background: var(--color-cyan); color: #04101e; text-decoration: none; }
.btn-dl.off { background: rgba(148, 163, 184, .1); color: var(--text-muted); border-color: #334155; cursor: default; }

/* Kategori filtre sekmeleri (yama tablosu) */
.filter-tab {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all .15s;
}
.filter-tab:hover, .filter-tab.active {
  background: var(--color-cyan);
  color: #04101e;
  border-color: var(--color-cyan);
}

/* ---------------- İNDİRME PENCERESİ ---------------- */
.dl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.dl-overlay.active { display: flex; }
.dl-box {
  background: #111722;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-panel);
}
.dl-head {
  background: #151e2e;
  padding: 15px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.dl-head h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.dl-x { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.dl-x:hover { color: #fff; }
.dl-body { padding: 20px 19px; }
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 16px;
  padding: 14px;
  font-size: 12px;
  background: #0b0f17;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
@media (max-width: 460px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-grid .k { color: var(--text-muted); display: block; margin-bottom: 2px; }
.dl-grid .v { color: #fff; font-weight: 600; }
.dl-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  border-radius: var(--radius-md);
  background: var(--btn-gradient);
  box-shadow: var(--shadow-btn);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.dl-go:hover { filter: brightness(1.08); text-decoration: none; }
.dl-note { font-size: 11px; color: var(--text-muted); text-align: center; margin: 12px 0 0; line-height: 1.6; }

/* ---------------- ALT BİLGİ ---------------- */
.mini-foot {
  margin-top: 10px;
  background-color: #241544;
  background-image: url("../img/group-head.svg");
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.mini-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
}
.mini-inner .mbrand img { height: 22px; width: auto; display: block; }
.mini-inner nav { display: flex; gap: 12px; flex-wrap: wrap; }
.mini-inner nav a { color: rgba(255, 255, 255, .82); font-weight: 600; }