:root {
  color-scheme: dark;
  --zemin: #0b0b0c; --yuzey: #141416; --yuzey2: #1b1b1e; --cizgi: #2a2a2e; --yazi: #ececec; --soluk: #9a9aa2;
  --altin: #f5c400; --altin-koyu: #c79f00; --yesil: #3ecf72; --kirmizi: #ef5350; --turuncu: #f39c34; --mavi: #5b9cf5;
  --yari: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(1100px 500px at 50% -15%, #1d1a0b, var(--zemin)); color: var(--yazi); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

#uygulama { max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; min-height: 100%; }
.acilis { text-align: center; margin-top: 30vh; color: var(--soluk); }
.acilis.hata { color: var(--kirmizi); }

/* ust cubuk */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; }
.marka { font-weight: 800; letter-spacing: .05em; color: var(--altin); font-size: 1.25rem; }
.marka span { color: var(--soluk); font-weight: 500; letter-spacing: 0; font-size: .95rem; margin-left: 8px; }
.kisi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kisi .ad { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.kisi .seviye { color: var(--soluk); font-size: .8rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--yuzey2); object-fit: cover; flex: none; display: grid; place-items: center; color: var(--soluk); font-weight: 700; }
.avatar.buyuk { width: 64px; height: 64px; font-size: 1.4rem; }

/* sekmeler */
.sekmeler { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; border-bottom: 1px solid var(--cizgi); margin-bottom: 16px; scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekme { background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; color: var(--soluk); white-space: nowrap; }
.sekme:hover { color: var(--yazi); background: var(--yuzey); }
.sekme.aktif { color: #111; background: var(--altin); font-weight: 700; }

/* kartlar */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 14px 16px; }
.kart h3 { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .06em; }
.istatistik { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.istatistik small { display: block; font-size: .78rem; font-weight: 500; color: var(--soluk); margin-top: 4px; }
.durum-acik { color: var(--turuncu); } .durum-iyi { color: var(--yesil); }
.baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.baslik h2 { margin: 0; font-size: 1.05rem; }

/* araclar */
.arac { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.arac input[type=search], .arac select, .form input, .form select, .form textarea { background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.arac input[type=search] { flex: 1 1 200px; }
.arac label { display: flex; align-items: center; gap: 6px; color: var(--soluk); }

/* dugmeler */
.dugme { background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: 10px; padding: 7px 13px; }
.dugme:hover { border-color: var(--soluk); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.dugme.birincil { background: var(--altin); border-color: var(--altin); color: #111; font-weight: 700; }
.dugme.tehlike { background: #3a1517; border-color: #6b2226; color: #ff8a86; }
.dugme.tehlike.dolu { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; font-weight: 700; }
.dugme.kucuk { padding: 4px 10px; font-size: .85rem; }

/* listeler */
.liste { display: grid; gap: 8px; }
.satir { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 10px 14px; }
.satir.tikla { cursor: pointer; }
.satir.tikla:hover { border-color: var(--altin-koyu); }
.satir .govde { min-width: 0; }
.satir .ust-satir { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.satir .alt-satir { color: var(--soluk); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satir .alt-satir.cok { white-space: normal; }
.satir .eylemler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.no { color: var(--soluk); font-variant-numeric: tabular-nums; font-size: .85rem; }
.bos { text-align: center; color: var(--soluk); padding: 30px 10px; background: var(--yuzey); border: 1px dashed var(--cizgi); border-radius: var(--yari); }
.rozet { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--yuzey2); border: 1px solid var(--cizgi); }
.rozet.uyari { color: #ffd54a; border-color: #5b4a10; } .rozet.mute { color: var(--turuncu); border-color: #5b3a10; }
.rozet.kick { color: var(--mavi); border-color: #1d3b6b; } .rozet.ban { color: var(--kirmizi); border-color: #6b2226; }
.rozet.bitti { color: var(--soluk); } .rozet.aktif { color: var(--yesil); border-color: #1d5b36; } .rozet.bot { color: var(--mavi); }

/* uye ayrintisi */
.uye-ust { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.uye-ust h2 { margin: 0; } .uye-ust .kim { flex: 1 1 200px; min-width: 0; }
.bilgi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bilgi-izgara div { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 12px; }
.bilgi-izgara small { display: block; color: var(--soluk); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.etiketler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.eylem-sirasi { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* pencere */
#pencere { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0, 0, 0, .65); z-index: 20; padding: 16px; }
#pencere.acik { display: grid; }
.diyalog { width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; padding: 20px; }
.diyalog h2 { margin: 0 0 6px; font-size: 1.15rem; }
.diyalog p { margin: 0 0 14px; color: var(--soluk); }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 5px; font-weight: 600; font-size: .9rem; }
.form label small { font-weight: 400; color: var(--soluk); }
.form textarea { min-height: 80px; resize: vertical; }
.diyalog .butonlar { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.hata-metin { color: var(--kirmizi); font-size: .9rem; min-height: 1.2em; }

/* bildirim */
#bildirim { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { background: var(--yuzey2); border: 1px solid var(--cizgi); border-left: 4px solid var(--altin); border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); pointer-events: auto; }
.toast.tamam { border-left-color: var(--yesil); } .toast.hata { border-left-color: var(--kirmizi); }

@media (max-width: 560px) {
  .satir { grid-template-columns: 1fr; }
  .satir .eylemler { justify-content: flex-start; }
  .kisi .ad { max-width: 110px; }
}

.ust10 { margin-top: 10px; } .ust12 { margin-top: 12px; } .ust22 { margin-top: 22px; } .izgara.arali { margin: 14px 0; }
.tani { max-width: 640px; margin: 8px auto 0; padding: 0 16px; color: var(--soluk); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.tani:empty { display: none; }

.alt-sekmeler { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.alt-sekmeler::-webkit-scrollbar { display: none; }
.alt-sekme { white-space: nowrap; border-radius: 999px; }
.alt-sekme.aktif { color: #111; background: var(--altin); font-weight: 700; }
/* 2026-11-05: roller, yetki paketleri, sunucu sekmesi */
.cipler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--yuzey2); border: 1px solid var(--cizgi); color: var(--soluk); font-size: .85rem; }
button.cip { cursor: pointer; } button.cip:disabled { cursor: not-allowed; opacity: .55; } button.cip:not(:disabled):hover { border-color: var(--soluk); }
.cip.var { color: var(--yazi); border-color: var(--altin-koyu); background: #221d08; }
.cip .simge { font-size: 1rem; line-height: 1; }
.cip .nokta { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cip-x { background: none; border: 0; color: var(--soluk); padding: 0 0 0 2px; font-size: 1rem; line-height: 1; cursor: pointer; }
.cip-x:hover { color: var(--kirmizi); }
.grup-baslik { margin: 18px 0 8px; font-size: .78rem; color: var(--soluk); text-transform: uppercase; letter-spacing: .06em; }
.emoji-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 18px; }
.emoji-kutu { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yari); }
.emoji-kutu img { width: 40px; height: 40px; object-fit: contain; }
.emoji-kutu small { color: var(--soluk); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 2026-11-05: loglar sayfasi */
.arac .kisa { max-width: 150px; }
.arac label.tarih { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-size: .85rem; }
.log-liste .satir.log { align-items: flex-start; }
.log-simge { font-size: 1.1rem; line-height: 1.6; }
.satir.log .ust-satir { flex-wrap: wrap; }
.satir.log .no { margin-left: auto; white-space: nowrap; }
.satir.log.yeni { animation: logYeni 2.5s ease-out; }
@keyframes logYeni { from { background: #2a2408; border-color: var(--altin-koyu); } to { background: var(--yuzey); } }
.log-detay { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cizgi); gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.satir.log.acik .log-detay { display: grid; }
.log-detay small { display: block; color: var(--soluk); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.on-bicim { white-space: pre-wrap; word-break: break-word; }
.cip.kucuk { padding: 1px 8px; font-size: .78rem; cursor: pointer; }
.kucuk-bosluk { margin: 6px 0 0; }
.canli-isaret { color: var(--yesil); animation: nabiz 1.6s infinite; }
@keyframes nabiz { 50% { opacity: .3; } }
.baglanti { background: none; border: 0; padding: 0; color: var(--mavi); cursor: pointer; text-decoration: underline; }
.ortala { justify-content: center; }
.arac input[type=date] { background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: 10px; padding: 6px 10px; color: var(--yazi); color-scheme: dark; }