/**
 * Alternatif tema: "modern"
 *
 * Klasik tema (assets/style.css) olduğu gibi kalır; buradaki kurallar yalnızca
 * html[data-skin="modern"] iken devreye girer. Açık/koyu ayrımı data-theme ile.
 * Seçicilerde ikinci [data-theme] niteliği, style.css'teki koyu tema
 * kurallarını geçebilmek için var.
 */

html[data-skin="modern"] {
  --m-bg: #f6f5f2;
  --m-elev: #ffffff;
  --m-elev-2: #f0eee9;
  --m-border: #e4e1da;
  --m-text: #1c1c1e;
  --m-dim: #5c5c60;
  --m-faint: #9a978f;
  --m-red: #cb0f0f;
  --m-red-2: #8a1620;
  --m-gold: #b8830a;
  --m-gold-dim: #e0a812;
  --m-gradient: linear-gradient(135deg, #cb0f0f 0%, #b8202c 60%, #8a1620 100%);
  --m-shadow: 0 8px 24px rgba(20, 20, 20, .08);
  --m-topbar: rgba(246, 245, 242, .85);
  --m-hover-border: #d8d4c9;
  --m-tex-1: .10;
  --m-tex-2: .14;
  --m-radius: 14px;
}

html[data-skin="modern"][data-theme="dark"] {
  --m-bg: #0d0f14;
  --m-elev: #151822;
  --m-elev-2: #1c202c;
  --m-border: #262b3a;
  --m-text: #e8e9ee;
  --m-dim: #9297a8;
  --m-faint: #5c6175;
  --m-red: #e6303e;
  --m-red-2: #a8232e;
  --m-gold: #f2b705;
  --m-gold-dim: #c99a08;
  --m-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --m-topbar: rgba(13, 15, 20, .85);
  --m-hover-border: #3a3f52;
  --m-tex-1: .16;
  --m-tex-2: .08;
}

/* ===== Gövde ===== */
html[data-skin="modern"][data-theme] body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}
html[data-skin="modern"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(203, 15, 15, var(--m-tex-1)), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(242, 183, 5, var(--m-tex-2)), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
html[data-skin="modern"][data-theme] a { color: var(--m-text); }
html[data-skin="modern"][data-theme] a:hover { color: var(--m-gold); text-decoration: none; }
html[data-skin="modern"] ::selection { background: var(--m-red); color: #fff; }
html[data-skin="modern"] .wrap { max-width: 1240px; padding: 0 24px; }

/* ===== Üst bar ===== */
html[data-skin="modern"][data-theme] .site-header {
  background: var(--m-topbar);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--m-border);
  color: var(--m-text);
}
html[data-skin="modern"] .header-inner { padding: 12px 24px; gap: 20px; }
html[data-skin="modern"][data-theme] .logo { color: var(--m-text); font-weight: 800; letter-spacing: -.02em; }
html[data-skin="modern"] .logo img {
  width: 34px; height: 34px; border-radius: 10px;
  background: transparent; box-shadow: 0 4px 14px rgba(203, 15, 15, .35);
}
html[data-skin="modern"][data-theme] .search-form input {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  color: var(--m-text);
  padding: 9px 14px;
  font-size: 13.5px;
}
html[data-skin="modern"] .search-form input::placeholder { color: var(--m-faint); }
html[data-skin="modern"] .search-form input:focus { outline: none; border-color: var(--m-red); }
html[data-skin="modern"] .search-form button {
  background: var(--m-gradient);
  border-radius: 0 10px 10px 0;
  padding: 9px 15px;
  font-weight: 700;
  font-size: 13px;
}
html[data-skin="modern"][data-theme] .arama-oneriler {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  box-shadow: var(--m-shadow);
}
html[data-skin="modern"][data-theme] .arama-oneriler li { color: var(--m-text); }
html[data-skin="modern"][data-theme] .arama-oneriler li:hover,
html[data-skin="modern"][data-theme] .arama-oneriler li.aktif { background: var(--m-elev-2); }
html[data-skin="modern"][data-theme] .arama-oneriler li .say { color: var(--m-faint); }

html[data-skin="modern"] .header-nav { gap: 4px; font-size: 13.5px; font-weight: 600; }
html[data-skin="modern"][data-theme] .header-nav > a {
  color: var(--m-dim);
  padding: 8px 12px;
  border-radius: 9px;
}
html[data-skin="modern"][data-theme] .header-nav > a:hover {
  background: var(--m-elev-2);
  color: var(--m-text);
  text-decoration: none;
}
html[data-skin="modern"][data-theme] .nav-ikon,
html[data-skin="modern"][data-theme] .tema-toggle,
html[data-skin="modern"][data-theme] .skin-toggle {
  width: 34px; height: 34px;
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 9px;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .nav-ikon:hover,
html[data-skin="modern"][data-theme] .tema-toggle:hover,
html[data-skin="modern"][data-theme] .skin-toggle:hover {
  color: var(--m-gold);
  border-color: var(--m-gold-dim);
  background: var(--m-elev-2);
}
html[data-skin="modern"][data-theme] .nav-rozet {
  background: var(--m-red);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}

/* ===== Yerleşim: içerik solda, indeks sağda ===== */
html[data-skin="modern"] .main-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  padding: 28px 24px 72px;
  position: relative;
  z-index: 1;
}
html[data-skin="modern"] .sidebar { order: 1; top: 84px; }
html[data-skin="modern"] .content { order: 0; }
@media (max-width: 900px) {
  html[data-skin="modern"] .main-layout { grid-template-columns: 1fr; padding: 18px 14px 48px; }
  html[data-skin="modern"] .wrap { padding: 0 14px; }
  html[data-skin="modern"] .header-inner { padding: 10px 14px; }
}

/* ===== İçerik kartı ===== */
html[data-skin="modern"][data-theme] .content {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 24px 26px;
  color: var(--m-text);
}
html[data-skin="modern"][data-theme] h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--m-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-skin="modern"] h1::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background: var(--m-gradient);
  flex-shrink: 0;
}
html[data-skin="modern"][data-theme] h2:not(.sidebar-index-title):not(.random-entry-title) {
  color: var(--m-text);
  font-size: 16px;
  font-weight: 800;
}
html[data-skin="modern"][data-theme] .intro { color: var(--m-dim); }
html[data-skin="modern"][data-theme] .muted,
html[data-skin="modern"][data-theme] .muted-small,
html[data-skin="modern"][data-theme] .tarih { color: var(--m-faint); }

/* ===== Entry kartları ===== */
html[data-skin="modern"][data-theme] .random-entry-block,
html[data-skin="modern"][data-theme] .entry {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 18px 20px;
  transition: border-color .15s, transform .15s;
}
html[data-skin="modern"][data-theme] .random-entry-block:hover,
html[data-skin="modern"][data-theme] .entry:hover {
  border-color: var(--m-hover-border);
  transform: translateY(-1px);
}
html[data-skin="modern"] .entry-list { display: flex; flex-direction: column; gap: 14px; }
html[data-skin="modern"] .entry-list .entry { margin: 0; }
html[data-skin="modern"] .random-entries { gap: 14px; }
html[data-skin="modern"][data-theme] .random-entry-title a,
html[data-skin="modern"][data-theme] .entry-topic-link {
  color: var(--m-text);
  font-weight: 700;
}
html[data-skin="modern"][data-theme] .random-entry-title a:hover,
html[data-skin="modern"][data-theme] .entry-topic-link:hover { color: var(--m-gold); text-decoration: none; }
html[data-skin="modern"][data-theme] .entry-content { color: var(--m-dim); line-height: 1.65; }
html[data-skin="modern"][data-theme] .entry-content a { color: var(--m-red); }
html[data-skin="modern"][data-theme] .entry-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--m-border);
  color: var(--m-faint);
}
html[data-skin="modern"][data-theme] .entry-meta .yazar { color: var(--m-gold); text-transform: lowercase; }
html[data-skin="modern"][data-theme] .entry-meta-simple { color: var(--m-faint); }
html[data-skin="modern"][data-theme] .entry-meta-simple a { color: var(--m-gold); text-transform: lowercase; }
html[data-skin="modern"][data-theme] .nick { text-transform: lowercase; }

/* ===== Butonlar ===== */
html[data-skin="modern"][data-theme] .oy-btn,
html[data-skin="modern"][data-theme] .favori-btn,
html[data-skin="modern"][data-theme] .sakla-btn,
html[data-skin="modern"][data-theme] .paylas-btn,
html[data-skin="modern"][data-theme] .btn-secondary,
html[data-skin="modern"][data-theme] .takip-btn {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
  padding: 4px 10px;
}
html[data-skin="modern"][data-theme] .oy-btn:hover:not(:disabled),
html[data-skin="modern"][data-theme] .favori-btn:hover:not(:disabled),
html[data-skin="modern"][data-theme] .sakla-btn:hover,
html[data-skin="modern"][data-theme] .paylas-btn:hover,
html[data-skin="modern"][data-theme] .btn-secondary:hover,
html[data-skin="modern"][data-theme] .takip-btn:hover {
  color: var(--m-gold);
  border-color: var(--m-gold-dim);
}
html[data-skin="modern"][data-theme] .oy-btn.active,
html[data-skin="modern"][data-theme] .takip-btn.aktif {
  background: var(--m-gradient);
  border-color: transparent;
  color: #fff;
}
html[data-skin="modern"][data-theme] .favori-btn.active {
  background: var(--m-gold-dim);
  border-color: var(--m-gold-dim);
  color: #fff;
}
html[data-skin="modern"][data-theme] .filtre-grup a {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
  padding: 3px 10px;
}
html[data-skin="modern"][data-theme] .filtre-grup a.aktif {
  background: var(--m-gradient);
  border-color: transparent;
  color: #fff;
}
html[data-skin="modern"][data-theme] .filtre-label { color: var(--m-faint); }

/* ===== Formlar ===== */
html[data-skin="modern"][data-theme] .form-box,
html[data-skin="modern"][data-theme] .entry-form {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: none;
}
html[data-skin="modern"][data-theme] .entry-toolbar,
html[data-skin="modern"][data-theme] .entry-form-footer {
  background: transparent;
  border-color: var(--m-border);
}
html[data-skin="modern"][data-theme] .entry-toolbar .tb-btn {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .entry-toolbar .tb-btn:hover {
  background: var(--m-gradient);
  border-color: transparent;
  color: #fff;
}
html[data-skin="modern"][data-theme] .form-box input,
html[data-skin="modern"][data-theme] .form-box textarea,
html[data-skin="modern"][data-theme] .form-box select,
html[data-skin="modern"][data-theme] .entry-form textarea {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  color: var(--m-text);
}
html[data-skin="modern"][data-theme] .entry-form textarea:focus { background: var(--m-elev); }
html[data-skin="modern"][data-theme] .form-box label { color: var(--m-dim); }
html[data-skin="modern"][data-theme] .form-box button,
html[data-skin="modern"][data-theme] .entry-form-footer button {
  background: var(--m-gradient);
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(203, 15, 15, .3);
}
html[data-skin="modern"][data-theme] .form-box button:hover,
html[data-skin="modern"][data-theme] .entry-form-footer button:hover {
  transform: translateY(-1px);
  background: var(--m-gradient);
}
/* İkincil eylem ("kenara al") birincil gönder butonuyla aynı kırmızıyı almasın */
html[data-skin="modern"][data-theme] .entry-form-footer button.btn-secondary,
html[data-skin="modern"][data-theme] .form-box button.btn-secondary,
html[data-skin="modern"][data-theme] button.btn-secondary {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 9px;
  color: var(--m-text);
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: none;
}
html[data-skin="modern"][data-theme] .entry-form-footer button.btn-secondary:hover,
html[data-skin="modern"][data-theme] .form-box button.btn-secondary:hover,
html[data-skin="modern"][data-theme] button.btn-secondary:hover {
  background: var(--m-elev-2);
  border-color: var(--m-gold-dim);
  color: var(--m-gold);
  box-shadow: none;
}
/* kenar sayfasındaki satır içi eylemler (yayınla / sil) */
html[data-skin="modern"][data-theme] .inline-form button {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 10px;
}
html[data-skin="modern"][data-theme] .inline-form button:hover {
  border-color: var(--m-gold-dim);
  color: var(--m-gold);
}
html[data-skin="modern"][data-theme] .inline-form button[value="sil"]:hover {
  border-color: var(--m-red);
  color: var(--m-red);
}
html[data-skin="modern"][data-theme] .entry-char-count { color: var(--m-faint); }
html[data-skin="modern"][data-theme] .hata {
  background: rgba(203, 15, 15, .12);
  color: var(--m-red);
  border: 1px solid var(--m-border);
  border-radius: 10px;
}
html[data-skin="modern"][data-theme] .basari {
  background: rgba(30, 126, 66, .12);
  color: #2f9e5f;
  border: 1px solid var(--m-border);
  border-radius: 10px;
}

/* ===== Kenar çubuğu ===== */
html[data-skin="modern"][data-theme] .sidebar-box,
html[data-skin="modern"][data-theme] .topic-sidebar-box {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: none;
}
html[data-skin="modern"][data-theme] .sidebar-index-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--m-dim);
  margin: 4px 0 10px;
}
html[data-skin="modern"][data-theme] .sidebar-tabs {
  border-bottom: 0;
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
html[data-skin="modern"][data-theme] .sidebar-tabs a {
  border-bottom: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--m-dim);
  background: transparent;
}
html[data-skin="modern"][data-theme] .sidebar-tabs a:hover { color: var(--m-text); background: transparent; }
html[data-skin="modern"][data-theme] .sidebar-tabs a.aktif {
  background: var(--m-red);
  color: #fff;
  border-bottom: 0;
}
html[data-skin="modern"][data-theme] .topic-sidebar-list li a {
  color: var(--m-dim);
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 13px;
}
html[data-skin="modern"][data-theme] .topic-sidebar-list li a:hover {
  background: var(--m-elev-2);
  color: var(--m-text);
}
html[data-skin="modern"][data-theme] .topic-sidebar-list li a .say,
html[data-skin="modern"][data-theme] .topic-sidebar-list li a small.say,
html[data-skin="modern"][data-theme] .sidebar-box .say { color: var(--m-faint); font-weight: 600; }
html[data-skin="modern"][data-theme] .sidebar-box h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .sidebar-box li { border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .topic-sidebar-pagination { border-top-color: var(--m-border); }
html[data-skin="modern"][data-theme] .topic-sidebar-pagination a,
html[data-skin="modern"][data-theme] .sidebar-more a { color: var(--m-gold); }
html[data-skin="modern"][data-theme] .topic-sidebar-jump-input {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text);
}
html[data-skin="modern"][data-theme] .topic-sidebar-jump button {
  background: var(--m-gradient);
  border-radius: 8px;
}
html[data-skin="modern"][data-theme] .topic-list li { border-bottom-color: var(--m-border); }

/* ===== Kartlar (oyuncu / takım / lig) ===== */
html[data-skin="modern"][data-theme] .futbolcu-kart,
html[data-skin="modern"][data-theme] .lig-kart {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  color: var(--m-text);
}
html[data-skin="modern"][data-theme] .futbolcu-kart-isim,
html[data-skin="modern"][data-theme] .lig-kart-isim { color: var(--m-text); }
html[data-skin="modern"][data-theme] .futbolcu-kart-tablo th,
html[data-skin="modern"][data-theme] .lig-tablo th { color: var(--m-faint); border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .futbolcu-kart-tablo td,
html[data-skin="modern"][data-theme] .lig-tablo td { color: var(--m-text); border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .futbolcu-kart-tablo td a,
html[data-skin="modern"][data-theme] .lig-tablo td.lig-ad a { color: var(--m-gold); }
html[data-skin="modern"][data-theme] .lig-sekme {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .lig-sekme.aktif {
  background: var(--m-gradient);
  border-color: transparent;
  color: #fff;
}
html[data-skin="modern"][data-theme] .lig-hafta-btn {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .lig-mac { border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .lig-mac-takim a { color: var(--m-text); }
html[data-skin="modern"][data-theme] .lig-mac-skor { color: var(--m-text); }
html[data-skin="modern"][data-theme] .lig-kart-kaynak,
html[data-skin="modern"][data-theme] .lig-ist-not { color: var(--m-faint); }
html[data-skin="modern"][data-theme] .lig-kart-alt a,
html[data-skin="modern"][data-theme] .lig-ist-deger { color: var(--m-gold); }
html[data-skin="modern"][data-theme] .lig-ist-baslik { color: var(--m-dim); border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .lig-ist-oyuncu { color: var(--m-text); }

/* ===== Sosyal ikonlar =====
   Siyah X karesi koyu kart zemininde kayboluyordu; koyu modda açık kapsül,
   açık modda siyah kapsül. Hover'da bağlantı rengi simgeyi ele geçirmesin. */
html[data-skin="modern"][data-theme] .kart-sosyal {
  border-radius: 9px;
  color: #fff;
}
html[data-skin="modern"][data-theme] .lig-kart-sosyal .kart-sosyal {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
html[data-skin="modern"][data-theme] .lig-kart-sosyal .kart-sosyal-ikon {
  width: 15px;
  height: 15px;
}
html[data-skin="modern"][data-theme] .kart-sosyal:hover { color: #fff; opacity: 1; }
html[data-skin="modern"][data-theme] .kart-sosyal-ig,
html[data-skin="modern"][data-theme] .kart-sosyal-ig:hover { color: #fff; }
html[data-skin="modern"][data-theme="dark"] .kart-sosyal {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
html[data-skin="modern"][data-theme="dark"] .kart-sosyal-x,
html[data-skin="modern"][data-theme="dark"] .kart-sosyal-x:hover {
  background: #f2f3f7;
  color: #0d0f14;
}
html[data-skin="modern"][data-theme="dark"] .kart-sosyal:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

/* ===== Alt bilgi / sayfalama ===== */
html[data-skin="modern"][data-theme] .pagination { color: var(--m-faint); }
html[data-skin="modern"][data-theme] .pagination a { color: var(--m-gold); }
html[data-skin="modern"][data-theme] .site-footer {
  border-top: 1px solid var(--m-border);
  color: var(--m-faint);
  padding: 28px 0;
}
html[data-skin="modern"][data-theme] .footer-nav a { color: var(--m-faint); }
html[data-skin="modern"][data-theme] .footer-nav a:hover { color: var(--m-gold); }
html[data-skin="modern"][data-theme] .paylas-menu {
  background: var(--m-elev);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  box-shadow: var(--m-shadow);
}
html[data-skin="modern"][data-theme] .paylas-menu a,
html[data-skin="modern"][data-theme] .paylas-menu button { color: var(--m-text); }
html[data-skin="modern"][data-theme] .paylas-menu a:hover,
html[data-skin="modern"][data-theme] .paylas-menu button:hover { background: var(--m-elev-2); color: var(--m-gold); }
html[data-skin="modern"][data-theme] .skor-lig-nav a {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: 9px;
  color: var(--m-dim);
}
html[data-skin="modern"][data-theme] .skor-lig-nav a.active {
  background: var(--m-gradient);
  border-color: transparent;
  color: #fff;
}
html[data-skin="modern"][data-theme] .skor-widget {
  background: var(--m-elev-2);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
}
html[data-skin="modern"][data-theme] .bildirim-list li { border-bottom-color: var(--m-border); }
html[data-skin="modern"][data-theme] .bildirim-list li.unread { background: rgba(242, 183, 5, .1); border-radius: 8px; }