/* Gri tema tasarım sistemi — Flat Design, #3a3a3a / #6a6a6a / #ffffff paleti */
:root {
  --metin: #3a3a3a;        /* ana metin, butonlar */
  --metin-soluk: #6a6a6a;  /* ikincil metin */
  --cizgi: #e6e6e6;        /* kenarlıklar (türetilmiş) */
  --hover: #f5f5f5;        /* hover ve çipler (türetilmiş) */
  --panel: #fafafa;        /* yan panel zemini (türetilmiş) */
  --zemin: #ffffff;        /* sayfa ve kart zemini */
  --zemin-cam: rgba(255, 255, 255, 0.92);
  --vurgu: #3a3a3a;        /* birincil aksiyon */
  --vurgu-koyu: #1f1f1f;
  --vurgu-yazi: #ffffff;   /* birincil aksiyon üzerindeki yazı */
  --avatar-zemin: #3a3a3a; --avatar-yazi: #ffffff;
  --golge: 0 6px 20px rgba(0, 0, 0, 0.12);
  --mavi: #2563eb;         /* Üye rolü */
  --turuncu: #ea580c;      /* Yazar rolü */
  --yesil: #16a34a;        /* Editör rolü */
  --mavi-zemin: #eff6ff;   --mavi-cizgi: #bfdbfe;
  --turuncu-zemin: #fff7ed; --turuncu-cizgi: #fed7aa;
  --yesil-zemin: #f0fdf4;  --yesil-cizgi: #bbf7d0;
  --kirmizi: #dc2626;      --kirmizi-zemin: #fef2f2; --kirmizi-cizgi: #fecaca;
  color-scheme: light;
}

/* Koyu tema: aynı gri paletin tersi */
:root[data-tema="koyu"] {
  --metin: #e8e8e8;
  --metin-soluk: #a3a3a3;
  --cizgi: #2e2e2e;
  --hover: #232323;
  --panel: #1c1c1c;
  --zemin: #161616;
  --zemin-cam: rgba(22, 22, 22, 0.9);
  --vurgu: #ededed;
  --vurgu-koyu: #ffffff;
  --vurgu-yazi: #161616;
  --avatar-zemin: #3a3a3a; --avatar-yazi: #ededed;
  --golge: 0 8px 26px rgba(0, 0, 0, 0.5);
  --mavi: #60a5fa;
  --turuncu: #fb923c;
  --yesil: #4ade80;
  --mavi-zemin: rgba(96, 165, 250, 0.1);   --mavi-cizgi: rgba(96, 165, 250, 0.35);
  --turuncu-zemin: rgba(251, 146, 60, 0.1); --turuncu-cizgi: rgba(251, 146, 60, 0.35);
  --yesil-zemin: rgba(74, 222, 128, 0.1);  --yesil-cizgi: rgba(74, 222, 128, 0.35);
  --kirmizi: #f87171; --kirmizi-zemin: rgba(248, 113, 113, 0.1); --kirmizi-cizgi: rgba(248, 113, 113, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--metin);
  background: var(--zemin);
}

h1, h2, h3, .logo, .akis-baslik, .widget-baslik, .bolum-baslik, .kart-baslik, .ist-sayi {
  font-family: "Outfit", "Work Sans", sans-serif;
}

.btn, .menu-oge, .widget-satir, .widget-kisi, .widget-tum, .kart-satir, .akis-karti,
.begen-btn, .sekme, .sayfa-no, .kategori-cip, .menu-kisi, .uye-sonuc, a {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--metin-soluk);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

a { color: var(--metin); text-decoration: none; }
a:hover { text-decoration: underline; }
a.mavi-link { color: var(--vurgu); font-weight: 600; text-decoration: underline; }

/* ── Genel düzen: sol menü + içerik ─────────── */
.duzen {
  display: flex;
  max-width: 1330px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Sol menü */
.sol-menu {
  width: 280px;
  flex-shrink: 0;
  padding: 16px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--cizgi);
  display: flex;
  flex-direction: column;
}
.logo {
  padding: 8px 14px 18px;
  display: block;
  line-height: 1.1;
}
.logo:hover { text-decoration: none; }
.logo-ad {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--metin);
}
.logo-alt {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--metin-soluk);
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.menu-oge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--metin);
  margin-bottom: 2px;
}
.menu-oge:hover { background: var(--hover); text-decoration: none; }
.menu-oge.aktif { font-weight: 700; background: var(--hover); }
.menu-oge svg { width: 22px; height: 22px; flex-shrink: 0; }
.bildirim-rozet {
  margin-left: auto;
  background: var(--kirmizi);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}

/* ── Bildirim listesi ──────────────────────── */
.bildirim-satir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.bildirim-satir:hover { background: var(--hover); text-decoration: none; }
.bildirim-satir.yeni { background: var(--mavi-zemin); }
.bildirim-satir.yeni:hover { background: var(--hover); }
.bildirim-govde { flex: 1; min-width: 0; }
.bildirim-metin { display: block; font-size: 14.5px; line-height: 1.45; }
.bildirim-konu { font-weight: 600; }
.bildirim-onizleme {
  display: block;
  color: var(--metin-soluk);
  font-size: 13.5px;
  margin-top: 3px;
  line-height: 1.4;
}
.bildirim-devam { color: var(--vurgu); font-weight: 600; white-space: nowrap; }
.bildirim-zaman { display: block; color: var(--metin-soluk); font-size: 12.5px; margin-top: 3px; }
.bildirim-nokta {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mavi);
  flex-shrink: 0;
}
.menu-alt { margin-top: auto; padding-top: 16px; }
.menu-kisi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
}
.menu-kisi:hover { background: var(--hover); text-decoration: none; }
.menu-kisi-ad { font-weight: 600; font-size: 14px; line-height: 1.25; }
.menu-kisi .rol-etiket { margin-top: 3px; font-size: 10.5px; padding: 0 7px; }

/* Butonlar */
.btn {
  display: inline-block;
  background: var(--vurgu);
  color: var(--vurgu-yazi) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.btn:hover { background: var(--vurgu-koyu); text-decoration: none; }
.btn-blok { display: block; width: 100%; margin-bottom: 8px; }
.btn-kucuk { padding: 5px 14px; font-size: 13px; border-radius: 8px; }
.btn-cerceve {
  background: var(--zemin);
  color: var(--metin) !important;
  border: 1px solid var(--cizgi);
}
.btn-cerceve:hover { background: var(--hover); }
.btn-tehlike { background: var(--zemin); color: var(--kirmizi) !important; border: 1px solid var(--kirmizi-cizgi); }
.btn-tehlike:hover { background: var(--kirmizi-zemin); }

/* İçerik alanı */
.icerik { flex: 1; min-width: 0; display: flex; }
.orta { flex: 1; min-width: 0; border-right: 1px solid var(--cizgi); }
.orta-ic { padding: 0 0 40px; }
.dar-icerik { max-width: 760px; padding: 24px; }

/* Sağ kenar (widget kolonu) */
.sag-kenar { width: 320px; flex-shrink: 0; padding: 16px; }

/* ── Üst sayfa başlığı çubuğu ──────────────── */
.baslik-cubugu {
  position: sticky;
  top: 0;
  background: var(--zemin-cam);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cizgi);
  padding: 14px 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.baslik-cubugu h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -0.3px; }
.baslik-cubugu .aciklama { margin: 0; }

/* ── Akış kartları ─────────────────────────── */
.akis-karti {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cizgi);
}
.akis-karti:hover { background: var(--hover); }
.akis-govde { flex: 1; min-width: 0; }
.akis-ust {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}
.akis-ust .kullanici-adi { font-weight: 700; font-size: 15px; }
.akis-ust .nokta { color: var(--metin-soluk); }
.akis-ust .zaman { color: var(--metin-soluk); }
.akis-baslik {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 2px;
  color: var(--metin);
}
.akis-baslik:hover { color: var(--metin-soluk); text-decoration: none; }
.akis-ozet { color: var(--metin-soluk); font-size: 14.5px; word-wrap: break-word; }
.akis-alt {
  display: flex;
  gap: 22px;
  margin-top: 10px;
  color: var(--metin-soluk);
  font-size: 13px;
  align-items: center;
}
.akis-alt span { display: inline-flex; align-items: center; gap: 5px; }
.akis-alt svg { width: 16px; height: 16px; }
.kategori-cip {
  display: inline-block;
  background: var(--hover);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 12px;
  color: var(--metin-soluk);
}
.kategori-cip:hover { background: var(--cizgi); text-decoration: none; }

/* ── Widget kutuları (sağ kenar) ───────────── */
.widget {
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.widget-baslik { font-size: 17px; font-weight: 800; padding: 13px 16px 6px; }
.widget-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  font-size: 14px;
}
.widget-satir:hover { background: var(--hover); text-decoration: none; }
.widget-satir-ana { min-width: 0; }
.widget-satir-baslik {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.widget-satir-alt { color: var(--metin-soluk); font-size: 12.5px; }
.widget-kisi { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.widget-kisi:hover { background: var(--hover); text-decoration: none; }
.widget-tum { display: block; padding: 10px 16px 13px; color: var(--vurgu); font-size: 13.5px; }
.widget-tum:hover { text-decoration: none; background: var(--hover); }

/* ── Formlar ───────────────────────────────── */
.form-kutu { max-width: 440px; margin: 0 auto; padding: 32px 20px; }
.form-genis { max-width: 680px; margin: 0; }
.form-kutu h1, .form-genis h1 { font-size: 22px; font-weight: 800; }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--zemin);
  color: var(--metin);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--metin-soluk); }
textarea { min-height: 140px; resize: vertical; }
.form-alt { margin-top: 18px; }

.hata, .bilgi { padding: 10px 14px; border-radius: 10px; font-size: 14px; margin: 14px 0; }
.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border: 1px solid var(--kirmizi-cizgi); }
.bilgi { background: var(--yesil-zemin); color: var(--yesil); border: 1px solid var(--yesil-cizgi); }

/* ── Arama ─────────────────────────────────── */
.arama-form { display: flex; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.arama-form input { border-radius: 999px; padding: 10px 18px; }
.arama-form .btn { border-radius: 999px; }

.arama-bolum-baslik {
  font-family: "Outfit", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 20px 8px;
  border-bottom: 1px solid var(--cizgi);
}
.uye-sonuc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cizgi);
}
.uye-sonuc:hover { background: var(--hover); text-decoration: none; }
.uye-sonuc-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uye-sonuc-bilgi .kullanici-adi { font-weight: 700; font-size: 15px; }
.uye-sonuc-sag { color: var(--metin-soluk); font-size: 12.5px; white-space: nowrap; }
.uye-sonuc-sag strong { color: var(--metin); font-size: 13.5px; }
.sira-no {
  min-width: 26px;
  text-align: center;
  font-family: "Outfit", "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--metin-soluk);
}

/* ── Roller ────────────────────────────────── */
.rol-uye { color: var(--mavi); }
.rol-yazar { color: var(--turuncu); }
.rol-editor { color: var(--yesil); }

/* Rol rozetleri: kutulu görünüm */
.rol-etiket {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.rol-etiket.rol-uye { background: var(--mavi-zemin); border-color: var(--mavi-cizgi); }
.rol-etiket.rol-yazar { background: var(--turuncu-zemin); border-color: var(--turuncu-cizgi); }
.rol-etiket.rol-editor { background: var(--yesil-zemin); border-color: var(--yesil-cizgi); }

/* ── Avatar ────────────────────────────────── */
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; flex-shrink: 0; }
img.avatar { border: 1px solid var(--cizgi); }
.avatar-harf {
  background: var(--avatar-zemin);
  color: var(--avatar-yazi);
  text-align: center;
  font-weight: 600;
}

/* ── Sayfa başlığı (iç sayfalar) ───────────── */
.sayfa-baslik { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sayfa-baslik h1 { font-size: 21px; font-weight: 800; margin: 0; }
.aciklama { color: var(--metin-soluk); font-size: 13.5px; margin-top: 2px; }

/* ── Liste kartları ────────────────────────── */
.kart-liste { border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
.kart-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cizgi);
  gap: 12px;
}
.kart-satir:last-child { border-bottom: none; }
.kart-satir:hover { background: var(--hover); }
.kart-ana { min-width: 0; }
.kart-baslik { font-weight: 600; font-size: 15px; }
.kart-alt { color: var(--metin-soluk); font-size: 13px; margin-top: 1px; }
.kart-sag { color: var(--metin-soluk); font-size: 12.5px; white-space: nowrap; text-align: right; }

.bolum { margin-bottom: 28px; }
.bolum-baslik { font-size: 16px; font-weight: 800; margin: 0 0 10px; }

/* ── Konu sayfası: mesajlar ────────────────── */
.mesaj {
  display: flex;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.mesaj-yan {
  width: 155px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--cizgi);
  padding: 16px 12px;
  text-align: center;
  font-size: 13px;
}
.mesaj-yan .kullanici-adi { display: block; font-weight: 700; margin-top: 8px; font-size: 14px; }
.mesaj-yan .rol-etiket { margin-top: 4px; }
.mesaj-yan .yan-sayi { display: block; color: var(--metin-soluk); margin-top: 6px; font-size: 12px; }
.mesaj-govde { flex: 1; padding: 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.mesaj-icerik { flex: 1; word-wrap: break-word; white-space: pre-wrap; }
.mesaj-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cizgi);
  color: var(--metin-soluk);
  font-size: 13px;
}
.mesaj-araclar { display: flex; align-items: center; gap: 10px; }
.mesaj-araclar form { display: inline; }
.begen-btn {
  background: none;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--metin-soluk);
  font-family: inherit;
  white-space: nowrap;
}
.begen-btn:hover { background: var(--hover); }
.begen-btn.begenildi { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); font-weight: 600; }
.begen-btn.begenildi:hover { background: var(--vurgu-koyu); }
.duzenlendi { font-style: italic; font-size: 12px; }

.begenenler {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--cizgi);
}
.begenenler-ozet {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-soluk);
  cursor: pointer;
}
.begenenler-ozet:hover { color: var(--metin); }
.begenenler-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.begenenler-liste[hidden] { display: none; }
.begenen-kisi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: var(--hover);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.begenen-kisi:hover { background: var(--cizgi); text-decoration: none; }

.yanit-kutu { border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px 18px; margin-top: 20px; }
.yanit-kutu h2 { font-size: 15px; margin: 0 0 10px; }

/* ── Yazı araçları (BBCode) ────────────────── */
.editor-araclar { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.editor-araclar button {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 34px;
  font-size: 13px;
  cursor: pointer;
  color: var(--metin);
  font-family: inherit;
  transition: background-color 0.18s ease;
}
.editor-araclar button:hover { background: var(--hover); }

.bb-ortala { text-align: center; }
.bb-alinti {
  margin: 6px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--cizgi);
  border-radius: 0;
  background: var(--panel);
  color: var(--metin-soluk);
}
.bb-alinti-kisi {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: var(--metin);
  margin-bottom: 4px;
}
.mesaj-icerik a { text-decoration: underline; font-weight: 600; word-break: break-all; }

/* ── @etiketleme ───────────────────────────── */
.mention {
  color: var(--mavi);
  font-weight: 600;
  text-decoration: none !important;
  word-break: normal;
}
.mention:hover { text-decoration: underline !important; }
.mention-kutu {
  position: absolute;
  z-index: 200;
  min-width: 190px;
  max-height: 230px;
  overflow-y: auto;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  box-shadow: var(--golge);
  padding: 4px;
}
.mention-oge {
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.mention-oge.aktif { background: var(--hover); }

/* ── Profil ────────────────────────────────── */
.profil-ust { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.profil-bilgi h1 { margin: 0; font-size: 24px; font-weight: 800; }
.profil-istatistik { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.ist-kutu {
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 12px 24px;
  text-align: center;
  min-width: 108px;
}
.ist-sayi { font-size: 21px; font-weight: 800; }
.ist-etiket { font-size: 12px; color: var(--metin-soluk); }
.profil-hakkinda { border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 18px; white-space: pre-wrap; }

/* ── Sayfalama ─────────────────────────────── */
.sayfalama { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.sayfa-no {
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--metin-soluk);
}
.sayfa-no:hover { background: var(--hover); text-decoration: none; }
.sayfa-no.aktif { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.sayfa-adim { font-weight: 600; color: var(--metin); }
.sayfa-uc { color: var(--metin-soluk); padding: 4px 4px; font-size: 13px; }

/* ── Tablolar / panel ──────────────────────── */
table.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th, .tablo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
.tablo th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--metin-soluk); }
.tablo tr:hover td { background: var(--hover); }
.satir-ic-form { display: flex; gap: 8px; align-items: center; }

.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin-bottom: 20px; }
.sekme {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--metin-soluk);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sekme:hover { text-decoration: none; color: var(--metin); background: var(--hover); }
.sekme.aktif { color: var(--metin); font-weight: 700; border-bottom-color: var(--vurgu); }

.bos-mesaj {
  color: var(--metin-soluk);
  padding: 26px;
  text-align: center;
  border: 1px dashed var(--cizgi);
  border-radius: 12px;
}

/* ── Mobil ─────────────────────────────────── */
@media (max-width: 1100px) {
  .sag-kenar { display: none; }
  .orta { border-right: none; }
}
@media (max-width: 760px) {
  .duzen { flex-direction: column; }
  .sol-menu {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    border-right: none;
    border-bottom: 1px solid var(--cizgi);
    padding: 8px 10px;
  }
  .logo { padding: 6px 10px; font-size: 20px; }
  .menu-oge { padding: 8px 10px; font-size: 14px; gap: 8px; }
  .menu-oge svg { width: 18px; height: 18px; }
  .menu-oge .oge-yazi { display: none; }
  .menu-alt { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 6px; }
  .btn-blok { display: inline-block; width: auto; margin: 0; }
  .menu-kisi { padding: 4px; }
  .menu-kisi-ad { display: none; }
  .mesaj { flex-direction: column; }
  .mesaj-yan {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--cizgi);
  }
  .mesaj-yan .kullanici-adi { margin-top: 0; display: inline; }
  .mesaj-yan .yan-sayi { margin-top: 0; margin-left: auto; }
  .dar-icerik { padding: 16px; }
}

/* ══ Tema düğmesi ══════════════════════════ */
.tema-dugme {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.tema-ikon-ay, .tema-ikon-gunes { display: inline-flex; }
.tema-ikon-gunes { display: none; }
:root[data-tema="koyu"] .tema-ikon-ay { display: none; }
:root[data-tema="koyu"] .tema-ikon-gunes { display: inline-flex; }
.tema-yazi-acik { display: none; }
:root[data-tema="koyu"] .tema-yazi-koyu { display: none; }
:root[data-tema="koyu"] .tema-yazi-acik { display: inline; }

/* ══ Akış: karşılama, yazma kutusu, filtreler ══ */
.karsilama {
  margin: 16px 20px 4px;
  padding: 20px 22px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.karsilama h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.karsilama p { margin: 0; color: var(--metin-soluk); font-size: 14.5px; max-width: 46ch; }
.karsilama-dugmeler { display: flex; gap: 8px; }

.yazma-kutusu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cizgi);
  color: var(--metin);
}
.yazma-kutusu:hover { text-decoration: none; background: var(--hover); }
.yazma-yer {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  color: var(--metin-soluk);
  background: var(--zemin);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yazma-kutusu .btn, .kategori-kapak .btn { display: inline-flex; align-items: center; gap: 6px; }
.yazma-kutusu .btn svg, .kategori-kapak .btn svg { width: 15px; height: 15px; }

.akis-filtre { border-bottom: 1px solid var(--cizgi); }
.akis-sekmeler { padding: 0 20px; margin-bottom: 0; border-bottom: none; }
.akis-sekmeler .sekme { padding: 12px 16px; }
.cip-serit {
  display: flex;
  gap: 8px;
  padding: 10px 20px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cip-serit::-webkit-scrollbar { display: none; }
.filtre-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 5px 13px 5px 6px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--metin-soluk);
  white-space: nowrap;
}
.filtre-cip:first-child { padding-left: 13px; }
.filtre-cip:hover { background: var(--hover); color: var(--metin); text-decoration: none; }
.filtre-cip.aktif { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.akis-son { margin-left: auto; font-size: 12.5px; }

/* ══ Kategori rozetleri ════════════════════ */
.kat-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  font-family: "Outfit", "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--kat-renk);
  background: color-mix(in srgb, var(--kat-renk) 13%, transparent);
}
.kat-rozet-kucuk { width: 22px; height: 22px; border-radius: 999px; font-size: 11.5px; }
.kat-rozet-buyuk { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; }
.filtre-cip.aktif .kat-rozet { color: var(--vurgu-yazi); background: rgba(127, 127, 127, 0.28); }
.kat-ton-0 { --kat-renk: #2563eb; }
.kat-ton-1 { --kat-renk: #0d9488; }
.kat-ton-2 { --kat-renk: #7c3aed; }
.kat-ton-3 { --kat-renk: #db2777; }
.kat-ton-4 { --kat-renk: #ca8a04; }
.kat-ton-5 { --kat-renk: #ea580c; }
:root[data-tema="koyu"] .kat-ton-0 { --kat-renk: #60a5fa; }
:root[data-tema="koyu"] .kat-ton-1 { --kat-renk: #2dd4bf; }
:root[data-tema="koyu"] .kat-ton-2 { --kat-renk: #a78bfa; }
:root[data-tema="koyu"] .kat-ton-3 { --kat-renk: #f472b6; }
:root[data-tema="koyu"] .kat-ton-4 { --kat-renk: #facc15; }
:root[data-tema="koyu"] .kat-ton-5 { --kat-renk: #fb923c; }
.widget-satir { justify-content: flex-start; }

/* ══ Sağ kenar ekleri ══════════════════════ */
.widget-davet { padding-bottom: 8px; }
.widget-davet .btn-blok { width: calc(100% - 32px); margin: 0 16px 8px; }
.davet-metin { margin: 0 16px 14px; color: var(--metin-soluk); font-size: 14px; }
.topluluk-ist { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px 14px; text-align: center; }
.topluluk-ist div { display: flex; flex-direction: column; }
.topluluk-ist div + div { border-left: 1px solid var(--cizgi); }
.topluluk-ist .ist-sayi { font-size: 20px; }

/* ══ Gezinme yolu, konu & kategori başlığı ══ */
.ekmek { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--metin-soluk); margin-bottom: 10px; }
.ekmek a { color: var(--metin-soluk); }
.ekmek a:hover { color: var(--metin); }
.konu-baslik h1 { font-size: 24px; letter-spacing: -0.4px; line-height: 1.25; }
.konu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  color: var(--metin-soluk);
  font-size: 13px;
}
.konu-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.konu-meta svg { width: 15px; height: 15px; }
.katilimci-yigin { display: inline-flex; padding-left: 6px; }
.katilimci-yigin a { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--zemin); line-height: 0; }
.katilimci-yigin a:hover { position: relative; z-index: 1; }

.mesaj-ilk { border-color: color-mix(in srgb, var(--metin) 22%, var(--cizgi)); }
.mesaj-govde { position: relative; }
.mesaj-no {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-soluk);
}
.mesaj-no:hover { color: var(--metin); text-decoration: none; }
.mesaj-icerik { padding-right: 34px; }
.sahip-etiket {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--hover);
  border: 1px solid var(--cizgi);
}
.mesaj:target { box-shadow: 0 0 0 2px var(--metin-soluk); }

.kategori-kapak {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--panel);
  flex-wrap: wrap;
}
.kategori-kapak-metin { flex: 1; min-width: 200px; }
.kategori-kapak h1 { margin: 0; font-size: 22px; font-weight: 800; }
.kart-satir > .avatar { align-self: center; }
.kart-ana { flex: 1; display: flex; flex-direction: column; }
.kart-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.yanit-balon { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--metin); font-size: 13px; }
.yanit-balon svg { width: 14px; height: 14px; }
a.kart-satir:hover { text-decoration: none; }
.kart-mesaj .kart-alt { overflow: hidden; text-overflow: ellipsis; }

/* ══ Profil kartı & ilerleme ═══════════════ */
.profil-kart { border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.profil-kapak {
  height: 96px;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, currentColor 22%, transparent), transparent 60%),
    linear-gradient(120deg, var(--panel), color-mix(in srgb, currentColor 14%, var(--panel)));
}
.profil-kart .profil-ust { padding: 0 20px 18px; margin: -40px 0 0; align-items: flex-end; flex-wrap: wrap; }
.profil-kart .profil-ust > .avatar { box-shadow: 0 0 0 4px var(--zemin); }
.profil-kart .profil-bilgi { flex: 1; min-width: 180px; padding-top: 44px; }
.profil-duzenle { margin-bottom: 4px; }
.ist-kutu { flex: 1; }

.ilerleme-kutu { border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 18px; margin-bottom: 28px; }
.ilerleme-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.ilerleme-cubuk { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; margin-bottom: 8px; }
.ilerleme-cubuk span { display: block; height: 100%; border-radius: inherit; background: var(--vurgu); }

/* ══ Giriş / kayıt kartı ═══════════════════ */
.yetki-kart {
  margin: 40px auto;
  padding: 28px 28px 30px;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
}
.yetki-kart h1 { margin: 0 0 4px; }
.yetki-alt { margin: 0 0 6px; }
.yetki-kart .btn { width: 100%; }
.yetki-kart .form-alt .aciklama { display: block; margin: 12px 0 0 !important; text-align: center; }

/* ══ Mobil alt menü ════════════════════════ */
.alt-menu { display: none; }
@media (max-width: 760px) {
  .sol-menu > .menu-oge:not(.tema-dugme) { display: none; }
  .tema-dugme { width: auto; }
  .tema-yazi { display: none; }
  .alt-menu {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--zemin-cam);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--cizgi);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .alt-oge {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    font-size: 11px;
    color: var(--metin-soluk);
  }
  .alt-oge:hover { text-decoration: none; }
  .alt-oge.aktif { color: var(--metin); font-weight: 700; }
  .alt-oge svg { width: 22px; height: 22px; }
  .alt-rozet {
    position: absolute;
    top: 0;
    left: calc(50% + 4px);
    background: var(--kirmizi);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
  }
  body { padding-bottom: 68px; }
  .karsilama { margin: 12px; }
  .yazma-kutusu .btn { display: none; }
  .akis-sekmeler, .cip-serit, .yazma-kutusu { padding-left: 14px; padding-right: 14px; }
  .akis-son { display: none; }
  .konu-baslik h1 { font-size: 20px; }
  .mesaj-no { top: 8px; }
  .yetki-kart { margin: 16px auto; padding: 22px 18px; border: none; }
  .kart-satir > .avatar { display: none; }
  .ist-kutu { min-width: 0; padding: 12px 8px; }
  .profil-istatistik { flex-wrap: nowrap; gap: 8px; }
}

/* ══ Tıklanabilir akış kartı ═══════════════ */
.akis-tikla { position: relative; }
.akis-tikla .akis-baslik::after { content: ""; position: absolute; inset: 0; }
.akis-tikla a:not(.akis-baslik) { position: relative; z-index: 1; }
.akis-tikla:hover .akis-baslik { color: var(--metin); }

/* ══ Arama vurgusu ═════════════════════════ */
mark {
  background: color-mix(in srgb, #facc15 38%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* ══ Yazı kutusu: önizleme, sayaç ══════════ */
.editor-araclar .onizle-dugme { margin-left: auto; font-weight: 600; }
.editor-araclar .onizle-dugme[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-yazi); border-color: var(--vurgu); }
.editor-araclar button:disabled { opacity: 0.4; cursor: default; }
.editor-onizleme {
  border: 1px dashed var(--cizgi);
  border-radius: 10px;
  padding: 10px 13px;
  background: var(--panel);
  font-size: 15px;
}
.onizleme-bos { color: var(--metin-soluk); font-style: italic; }
.editor-durum {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--metin-soluk);
}
.editor-sayac.asim { color: var(--kirmizi); font-weight: 700; }
kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid var(--cizgi);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--zemin);
}
textarea { overflow-y: auto; }
@media (max-width: 760px) { .editor-ipucu { visibility: hidden; } }

/* ══ Beğeni animasyonu ═════════════════════ */
.begen-btn:disabled { cursor: progress; }
.begen-pat { animation: begen-pat 0.32s ease; }
@keyframes begen-pat { 40% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .begen-pat { animation: none; } }
time[title] { cursor: help; }

/* ══ Yönetim paneli ════════════════════════ */
.panel-ozet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.ozet-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--panel);
  min-width: 0;
}
.ozet-ikon { color: var(--metin-soluk); line-height: 0; margin-bottom: 8px; }
.ozet-ikon svg { width: 20px; height: 20px; }
.ozet-sayi { font-family: "Outfit", "Work Sans", sans-serif; font-size: 24px; font-weight: 800; line-height: 1.1; }
.ozet-etiket { font-size: 12.5px; color: var(--metin-soluk); }
.ozet-artis {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--yesil);
  background: var(--yesil-zemin);
  border-radius: 999px;
  padding: 1px 8px;
}

.panel-arama { margin-bottom: 12px; }
.panel-arama input { max-width: 300px; }

.sira-dugmeler { display: inline-flex; flex-direction: column; gap: 2px; }
.sira-dugme {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  color: var(--metin-soluk);
  font-size: 9px;
  line-height: 1;
  padding: 3px 7px;
  cursor: pointer;
}
.sira-dugme:hover:not(:disabled) { background: var(--hover); color: var(--metin); }
.sira-dugme:disabled { opacity: 0.3; cursor: default; }

.toplu-cubuk {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--zemin);
  box-shadow: var(--golge);
  font-size: 14px;
  font-weight: 600;
}
.toplu-cubuk[hidden] { display: none; }
.toplu-sayi { margin-right: auto; }
.tablo input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--vurgu); cursor: pointer; }
.tablo tr.secili td { background: var(--hover); }

@media (max-width: 1000px) {
  .panel-ozet { grid-template-columns: repeat(2, 1fr); }
}
/* Dar ekranda tablolar kart görünümüne geçer */
@media (max-width: 760px) {
  .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
  .tablo .tablo-baslik { display: none; }
  .tablo tr {
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 6px 4px;
  }
  .tablo tr:hover td { background: none; }
  .tablo td {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: none;
    padding: 6px 12px;
    white-space: normal !important;
  }
  .tablo td::before {
    content: attr(data-etiket);
    flex: 0 0 72px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--metin-soluk);
  }
  .tablo td > :not(.sira-dugmeler):not([type=checkbox]) { flex: 1; min-width: 0; }
  .tablo td input[type=text], .tablo td select { max-width: none !important; }
  .tablo td .satir-ic-form { flex-wrap: wrap; }
  .sira-dugmeler { flex-direction: row; gap: 6px; }
  .sira-dugme { font-size: 11px; padding: 6px 12px; }
  .tablo td[data-etiket="Seç"]:not(:has(input))  { display: none; }
  .panel-arama input { max-width: none; }
}
.genis-icerik { max-width: 1040px; }

/* ══ Yönetim paneli çatısı ═════════════════ */
.genis-icerik { max-width: 1120px; }
.panel-duzen { display: flex; gap: 24px; align-items: flex-start; }
.panel-menu {
  position: sticky;
  top: 24px;
  width: 190px;
  flex-shrink: 0;
  padding: 10px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--panel);
}
.panel-menu-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 10px;
  font-family: "Outfit", "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--metin-soluk);
}
.panel-menu-baslik svg { width: 16px; height: 16px; }
.panel-menu-oge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--metin);
}
.panel-menu-oge svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--metin-soluk); }
.panel-menu-oge:hover { background: var(--hover); text-decoration: none; }
.panel-menu-oge.aktif { background: var(--zemin); font-weight: 700; box-shadow: 0 0 0 1px var(--cizgi); }
.panel-menu-oge.aktif svg { color: var(--metin); }
.panel-icerik { flex: 1; min-width: 0; }
.panel-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-ust h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.panel-ust-sag { display: flex; gap: 8px; }

.panel-blok { border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.panel-blok-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-blok-ust h2 { margin: 0; font-size: 15px; font-weight: 700; }
.panel-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel-iki .panel-blok { margin-bottom: 0; padding-bottom: 8px; }
.panel-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--metin);
}
.panel-satir:hover { background: var(--hover); text-decoration: none; }
.panel-satir-ana { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-satir-ana > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-satir-ana .aciklama { margin: 0; font-size: 12.5px; }
.panel-satir-git { font-size: 12px; color: var(--metin-soluk); white-space: nowrap; }
a.ozet-kart { color: var(--metin); }
a.ozet-kart:hover { text-decoration: none; border-color: color-mix(in srgb, var(--metin) 30%, var(--cizgi)); }

.panel-filtre { flex-wrap: wrap; margin-bottom: 6px; }
.panel-filtre input[type=text] { flex: 1; min-width: 180px; }
.panel-filtre select { width: auto; max-width: 220px; }
.panel-sonuc { margin: 0 0 10px; }
.panel-cipler { padding: 0 0 12px; }
.panel-form-satir input { flex: 1; min-width: 160px; }
.toplu-mobil-hepsi { display: none; }
.toplu-cubuk select { width: auto; padding: 5px 10px; font-size: 13px; }
.tablo-kisi { display: inline-flex; align-items: center; gap: 10px; color: var(--metin); }
.tablo-kisi:hover { text-decoration: none; }
.tablo-kisi:hover strong { text-decoration: underline; }
.tablo td .kategori-cip { white-space: nowrap; }

/* Etkinlik grafiği: tek seri, tek renk; üzerine gelince değer */
.grafik {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 2px;
  height: 150px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cizgi);
  position: relative;
}
.grafik-sutun {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  border-radius: 6px;
  outline: none;
}
.grafik-sutun:hover, .grafik-sutun:focus-visible { background: var(--hover); }
.grafik-cubuk {
  width: min(60%, 26px);
  background: var(--vurgu);
  border-radius: 4px 4px 0 0;
}
.grafik-cubuk.bos { height: 2px !important; background: var(--cizgi); border-radius: 2px; }
.grafik-gun {
  position: absolute;
  bottom: -20px;
  font-size: 10.5px;
  color: var(--metin-soluk);
  white-space: nowrap;
}
.grafik-gun.bugun { color: var(--metin); font-weight: 700; }
.grafik-ipucu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--vurgu);
  color: var(--vurgu-yazi);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.grafik-sutun:hover .grafik-ipucu, .grafik-sutun:focus-visible .grafik-ipucu { opacity: 1; }
.grafik-sutun:first-child .grafik-ipucu { left: 0; transform: none; }
.grafik-sutun:last-child .grafik-ipucu { left: auto; right: 0; transform: none; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kullanıcı düzenleme */
.kisi-ozet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kisi-ozet-bilgi { flex: 1; min-width: 200px; }
.kisi-ozet-ad { display: flex; align-items: center; gap: 8px; font-size: 18px; flex-wrap: wrap; }
.kisi-ozet-ist { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: var(--metin-soluk); }
.kisi-ozet-ist strong { color: var(--metin); }
.kisi-ozet-linkler { display: flex; gap: 8px; }
.alan-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.alan-izgara label { margin-top: 0; }
.alan-ipucu { font-size: 12px; color: var(--metin-soluk); margin-top: 4px; }
.kilitli-alan { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sifre-alan { display: flex; gap: 6px; }
.sifre-alan input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sifre-alan .btn { white-space: nowrap; }
label.onay-kutu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}
.onay-kutu input { width: 16px; height: 16px; accent-color: var(--kirmizi); }
.tehlike-blok { border-color: var(--kirmizi-cizgi); }
.tehlike-blok h2 { color: var(--kirmizi); }
.tehlike-blok p { margin: 0 0 8px; font-size: 14px; }
.silme-liste { margin: 0 0 14px; padding-left: 20px; font-size: 14px; color: var(--metin-soluk); }
.silme-liste strong { color: var(--metin); }
.tehlike-blok input[type=text] { max-width: 300px; }

@media (max-width: 1000px) {
  .panel-iki { grid-template-columns: minmax(0, 1fr); }
  .panel-iki .panel-blok { margin-bottom: 0; }
}
@media (max-width: 900px) {
  .panel-duzen { flex-direction: column; gap: 14px; }
  .panel-menu {
    position: static;
    width: 100%;
    display: flex;
    gap: 4px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .panel-menu::-webkit-scrollbar { display: none; }
  .panel-menu-baslik { display: none; }
  .panel-menu-oge { flex-shrink: 0; padding: 7px 12px; font-size: 13.5px; }
  .panel-menu-oge svg { width: 16px; height: 16px; }
}
@media (max-width: 760px) {
  .alan-izgara { grid-template-columns: 1fr; }
  .alan-izgara > div + div { margin-top: 14px; }
  .toplu-mobil-hepsi { display: inline-block; margin-bottom: 10px; }
  .toplu-cubuk { flex-wrap: wrap; }
  .grafik-gun { font-size: 9px; }
  .grafik-sutun:nth-child(even) .grafik-gun:not(.bugun) { visibility: hidden; }
  .sifre-alan { flex-wrap: wrap; }
  .sifre-alan input { flex-basis: 100%; }
  .panel-blok { padding: 14px; }
}

/* ══ Panel cilası ══════════════════════════ */
.panel-menu-sayi {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
}
.panel-menu-oge.aktif .panel-menu-sayi { color: var(--metin); }
.panel-menu-don { margin-top: 8px; border-top: 1px solid var(--cizgi); border-radius: 0 0 9px 9px; padding-top: 12px; color: var(--metin-soluk); }
.panel-menu-don svg { transform: scaleX(-1); }

.panel-ust { align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; }
.panel-ekmek { margin-bottom: 4px; font-size: 12.5px; }
.panel-aciklama { margin: 3px 0 0; color: var(--metin-soluk); font-size: 13.5px; }

.panel-bildirim {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  animation: bildirim-gir 0.25s ease;
}
.panel-bildirim-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid currentColor;
}
.panel-bildirim-metin { flex: 1; }
.panel-bildirim-kapat {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
}
.panel-bildirim-kapat:hover { opacity: 1; background: rgba(127, 127, 127, 0.15); }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .panel-bildirim { animation: none; } }

/* Filtre çubuğu */
.panel-filtre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 8px;
}
.arama-girdi { position: relative; flex: 1; min-width: 180px; display: flex; }
.arama-girdi svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--metin-soluk);
  pointer-events: none;
}
.arama-girdi input { padding-left: 34px; }
.panel-filtre input[type=text], .panel-filtre select { padding-top: 8px; padding-bottom: 8px; }
.panel-sonuc { font-size: 12.5px; padding-left: 2px; }

/* Tablo kartı */
.tablo-kutu { border: 1px solid var(--cizgi); border-radius: 12px; overflow-x: auto; margin-bottom: 14px; }
.tablo-kutu .tablo th { background: var(--panel); }
.tablo-kutu .tablo tr:last-child td { border-bottom: none; }
.tablo-kutu .tablo td, .tablo-kutu .tablo th { padding: 10px 14px; }
.tablo th.sayi, .tablo td.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.ad-alan { display: flex; align-items: center; gap: 10px; }
.ad-alan .kat-rozet { width: 28px; height: 28px; font-size: 13px; }

.panel-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
}
.panel-bos svg { width: 28px; height: 28px; opacity: 0.6; }

/* Genel bakış */
.ozet-kart { transition: border-color 0.18s ease, transform 0.18s ease; }
a.ozet-kart:hover { transform: translateY(-1px); }
.trend { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.trend .aciklama { margin: 0; }
.trend-rozet {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hover);
}
.trend-rozet.artis { color: var(--yesil); background: var(--yesil-zemin); }
.trend-rozet.azalis { color: var(--kirmizi); background: var(--kirmizi-zemin); }
.grafik { margin-top: 18px; }
.grafik::before {
  content: attr(data-en-cok);
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--cizgi);
  font-size: 10.5px;
  line-height: 1;
  color: var(--metin-soluk);
  padding-top: 3px;
  pointer-events: none;
}

/* Kullanıcı düzenleme: iki sütun */
.kullanici-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.kullanici-sag { position: sticky; top: 24px; }
.kullanici-sag .kisi-ozet { flex-direction: column; text-align: center; gap: 10px; }
.kullanici-sag .kisi-ozet-bilgi { min-width: 0; }
.kullanici-sag .kisi-ozet-ad { justify-content: center; }
.kullanici-sag .kisi-ozet-ist { justify-content: center; }
.kullanici-sag .kisi-ozet-linkler { width: 100%; }
.kullanici-sag .kisi-ozet-linkler .btn { flex: 1; }
.kullanici-sag .tehlike-blok input[type=text] { max-width: none; }
.kullanici-sag .tehlike-blok .satir-ic-form { flex-direction: column; align-items: stretch; }
.ipucu-blok ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--metin-soluk); }
.ipucu-blok li + li { margin-top: 6px; }
@media (max-width: 1000px) {
  .kullanici-izgara { grid-template-columns: minmax(0, 1fr); }
  .kullanici-sag { position: static; }
}
@media (max-width: 900px) {
  .panel-menu-don { margin: 0; border: none; padding-top: 7px; border-radius: 9px; }
  .panel-menu-sayi { margin-left: 4px; }
}
@media (max-width: 760px) {
  .tablo-kutu { border: none; border-radius: 0; overflow: visible; }
  .panel-filtre { flex-wrap: wrap; }
  .arama-girdi { flex-basis: 100%; }
  .panel-ust { align-items: flex-start; }
}

.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-tehlike:disabled:hover { background: var(--zemin); }
.panel-form .panel-blok-ust + .alan-izgara { margin-top: 2px; }
@media (max-width: 1360px) {
  .kullanici-sol .alan-izgara { grid-template-columns: minmax(0, 1fr); }
  .kullanici-sol .alan-izgara > div + div { margin-top: 14px; }
  .kullanici-sol .sifre-alan { flex-wrap: wrap; }
  .kullanici-sol .sifre-alan input { flex-basis: 100%; }
}

/* ══ Onay penceresi ════════════════════════ */
.onay-pencere {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  background: var(--zemin);
  color: var(--metin);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.onay-pencere::backdrop {
  background: rgba(15, 15, 15, 0.45);
  backdrop-filter: blur(3px);
}
.onay-pencere[open] { animation: onay-gir 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.onay-pencere[open]::backdrop { animation: onay-perde 0.2s ease; }
@keyframes onay-gir { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes onay-perde { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onay-pencere[open], .onay-pencere[open]::backdrop { animation: none; }
}
html.onay-acik { overflow: hidden; }
.onay-ic { padding: 22px 22px 18px; }
.onay-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-bottom: 12px;
  background: var(--kirmizi-zemin);
  color: var(--kirmizi);
  border: 1px solid var(--kirmizi-cizgi);
  font-family: "Outfit", "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
}
.onay-baslik { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.2px; word-break: break-word; }
.onay-metin { margin: 0; color: var(--metin-soluk); font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.onay-detay { margin-top: 10px; font-size: 14px; }
.onay-detay p { margin: 0 0 8px; }
.onay-detay .silme-liste { margin-bottom: 0; }
.onay-yaz { margin-top: 14px; }
.onay-yaz label { margin: 0 0 6px; font-weight: 500; font-size: 13px; color: var(--metin-soluk); }
.onay-yaz strong { color: var(--metin); font-weight: 700; }
.onay-dugmeler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.onay-dugmeler .btn { min-width: 96px; }
.btn-tehlike-dolu { background: var(--kirmizi); color: #fff !important; }
.btn-tehlike-dolu:hover:not(:disabled) { background: color-mix(in srgb, var(--kirmizi) 85%, #000); }
:root[data-tema="koyu"] .btn-tehlike-dolu { color: #1a0a0a !important; }
.tehlike-blok .btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
@media (max-width: 760px) {
  .onay-pencere { margin: auto auto 12px; }
  .onay-dugmeler .btn { flex: 1; }
}

/* ══ Üye seçici (panel filtreleri) ═════════ */
.uye-secici { position: relative; display: flex; align-items: center; min-width: 200px; }
.uye-secici-alan { position: relative; display: flex; width: 100%; }
.uye-secici-alan[hidden] { display: none; }
.uye-secici-alan > svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--metin-soluk);
  pointer-events: none;
}
.uye-secici-girdi { padding-left: 34px !important; }
.uye-secili {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 4px 0 6px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--zemin);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.uye-secili-kaldir {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--hover);
  color: var(--metin-soluk);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.uye-secili-kaldir:hover { background: var(--cizgi); color: var(--metin); }
.uye-oneri {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  box-shadow: var(--golge);
  z-index: 30;
}
.uye-oneri[hidden] { display: none; }
.uye-oneri li[role=option] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.uye-oneri li.aktif, .uye-oneri li[role=option]:hover { background: var(--hover); }
.uye-oneri-ad { font-weight: 600; }
.uye-oneri .rol-etiket { font-size: 10.5px; padding: 0 7px; }
.uye-oneri-sayi { margin-left: auto; font-size: 12px; color: var(--metin-soluk); white-space: nowrap; }
.uye-oneri-bos { padding: 10px; font-size: 13.5px; color: var(--metin-soluk); text-align: center; }
@media (max-width: 760px) {
  .uye-secici { flex: 1; }
}

/* ══ Ziyaretçi: hesap gerekli ══════════════ */
.hesap-ikon { background: var(--hover); color: var(--metin); border-color: var(--cizgi); }
.hesap-ikon svg { width: 20px; height: 20px; }
.hesap-kurucu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--panel);
  color: var(--metin);
}
.hesap-kurucu:hover { text-decoration: none; border-color: color-mix(in srgb, var(--metin) 30%, var(--cizgi)); }
.hesap-kurucu > span:not(.avatar) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hesap-kurucu-alt { flex-basis: 100%; font-size: 13px; color: var(--metin-soluk); }
.hesap-pencere .onay-dugmeler .btn { min-width: 0; }

.yanit-kilitli {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--zemin);
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.yanit-kilitli:hover { border-color: color-mix(in srgb, var(--metin) 30%, var(--cizgi)); }
.yanit-kilitli-ust { display: inline-flex; align-items: center; gap: 6px; font-family: "Outfit", "Work Sans", sans-serif; font-weight: 700; font-size: 15px; }
.yanit-kilitli-ust svg { width: 16px; height: 16px; }
.yanit-kilitli-yer {
  padding: 12px 13px;
  min-height: 70px;
  border: 1px dashed var(--cizgi);
  border-radius: 10px;
  background: var(--panel);
  color: var(--metin-soluk);
}
.yanit-kilitli .aciklama a { text-decoration: underline; }

/* Çıkış artık POST formu: menü öğesi gibi görünsün */
.cikis-form { margin: 0; }
.cikis-form .menu-oge { width: 100%; background: none; border: none; font: inherit; font-size: 16px; color: var(--metin); cursor: pointer; text-align: left; }
.cikis-form .menu-oge:hover { background: var(--hover); }
.ayar-bolum { font-size: 17px; font-weight: 800; margin: 34px 0 4px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
@media (max-width: 760px) {
  .cikis-form .menu-oge { width: auto; }
  .hesap-pencere .onay-dugmeler { flex-direction: column-reverse; }
}