:root {
  color-scheme: dark;
  /* Modern sistem yigini: Arial/Helvetica yerine isletim sisteminin kendi
     arayuz fontu. Yuklenen dosya yok, bu yuzden ilk boyama gecikmesi olmaz. */
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
               -apple-system, "Noto Sans", sans-serif;
  background: #0e1013;
  color: #eef1f5;

  /* --- Yuzey katmanlari -------------------------------------------------
     Derinlik artik kalin kenarliklara degil, birbirini izleyen tonlara
     dayaniyor. Adlar geriye donuk uyumluluk icin korundu. */
  --bg-deep: #0e1013;
  --bg: #14171b;
  --surface: #1a1e23;
  --surface-2: #21262c;
  --surface-hover: #21262c;
  --surface-3: #2a3037;
  --surface-4: #343b43;

  /* --- Kenarlik ---------------------------------------------------------
     -subtle dekoratif ayirici (kontrast sarti yok); --border ve
     --border-strong KONTROL siniri (WCAG 1.4.11 geregi 3.0). */
  --border-subtle: #2b323a;
  --border: #3a424b;
  --border-strong: #6b7684;

  /* --- Metin ------------------------------------------------------------ */
  --text: #eef1f5;
  --text-muted: #b6bec9;
  --text-dim: #838d9a;

  /* --- Vurgu ------------------------------------------------------------
     IKI TOKEN'e ayrildi: tek renk hem koyu zeminde metin hem de beyaz
     metinli buton zemini olamaz. --accent metin/baglanti (koyu zeminde
     6.82:1), --accent-solid buton zemini (beyazla 5.44:1). Eski --accent
     (#4f83df) tek basina butonda 3.72'de kaliyordu. */
  --accent: #7aa5f7;
  --accent-strong: #8fb4f9;
  --accent-solid: #3a66c2;
  --accent-solid-strong: #3159b0;
  --accent-soft: rgba(122, 165, 247, .14);
  --accent-ring: rgba(122, 165, 247, .45);
  --accent-ink: #ffffff;

  /* --- Durum renkleri --------------------------------------------------- */
  --ok: #3fb950;
  --ok-soft: rgba(63, 185, 80, .13);
  --warn: #d29922;
  --warn-soft: rgba(210, 153, 34, .13);
  --danger: #f67460;
  --danger-soft: rgba(246, 116, 96, .13);

  /* --- Kose yaricapi: uc adim --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* --- Golge: uc seviye --- */
  --sh-1: 0 1px 2px rgb(0 0 0 / .30);
  --sh-2: 0 4px 14px rgb(0 0 0 / .28);
  --sh-3: 0 18px 48px rgb(0 0 0 / .38);

  --t-fast: .13s cubic-bezier(.4, 0, .2, 1);
  --t-base: .2s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg-deep);
}

.page { min-height: 100vh; padding: 24px; }
/* ÜST MARKA GÖRSELİ (lockup): S amblemi + SAKBOT yazısı, şeffaf zeminli.
   ÖNCEKİ DURUM: burada sinematik kapak bandı vardı; 380px yükseklik kaplıyor,
   kendi koyu zeminiyle "blok" gibi duruyor ve 69 KB iniyordu. Lockup zemine
   karışır, kırpılmaz ve ~30 KB'dır. Genişlik sınırlı ve ortalanmıştır ki
   başlıkla yarışmasın. */
.home-logo { display: flex; justify-content: center; margin: 18px 0 0; }
.home-logo picture { display: block; width: 100%; max-width: 680px; }
.home-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .home-logo { margin-top: 12px; }
  .home-logo picture { max-width: 420px; }
}
@media (max-width: 480px) {
  .home-logo picture { max-width: 300px; }
}
/* Hero'daki robot maskotu: sol sütunda metnin/butonların ALTINDA duran,
   zemini şeffaf olduğu için sayfaya karışan illüstrasyon. Koyu zeminde
   havada durmasın diye yumuşak bir gölge verilir; genişlik sınırlıdır ki
   sağdaki özellik kartlarıyla yarışmasın. */
.home-visual { margin-top: 30px; width: 100%; max-width: 560px; }
.home-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 42px rgb(0 0 0 / 45%)); }
@media (max-width: 900px) {
  .home-visual { max-width: 440px; margin: 24px auto 0; }
}
@media (max-width: 560px) {
  .home-visual { max-width: 320px; }
}
.panel { width: min(100%, 1180px); min-height: calc(100vh - 48px); margin: 0 auto; padding: 32px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 64px rgb(0 0 0 / 22%); }
.panel[data-page="home"], .panel[data-page="settings"], .panel[data-page="dashboard"], .panel[data-page="loading"] { border: 0; background: transparent; box-shadow: none; }
.panel[data-page="home"], .panel[data-page="dashboard"], .panel[data-page="loading"] { width: min(100%, 1440px); }
.panel[data-page="settings"] { width: 100%; padding-inline: clamp(12px, 2vw, 32px); }

h1, h2, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 14px; font-size: clamp(38px, 5vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -.045em; }
h2 { margin: 32px 0 14px; color: var(--text); font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.muted { color: var(--text-muted); font-weight: 400; line-height: 1.6; }

.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-solid);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

button:hover, .button:hover { border-color: var(--accent-strong); background: var(--accent-strong); transform: translateY(-1px); }
.secondary { background: transparent; color: var(--text); }
.secondary:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.home-header, .dashboard-header, .settings-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0 24px; border-bottom: 1px solid var(--border-subtle); }
.home-brand, .dashboard-brand { display: flex; align-items: center; gap: 16px; }
.brand-home-link { color: inherit; text-decoration: none; cursor: pointer; }
.brand-home-link:hover strong { color: var(--accent-strong); }
.brand-home-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; border-radius: var(--r-sm); }
.brand-text { display: grid; gap: 4px; }
.sakbot-logo { display: block; width: 72px; height: 72px; flex-shrink: 0; border: 0; border-radius: 0; background: transparent; object-fit: contain; }
.home-brand > picture, .dashboard-brand > picture, .loading-brand > picture { display: block; flex: 0 0 auto; }
.brand-name, .dashboard-brand strong { color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: .14em; }
.brand-subtitle, .dashboard-brand span { color: var(--text-muted); font-size: 13px; }
.header-login, .dashboard-header .secondary { width: auto; min-height: 38px; }
.header-login { min-width: 106px; border-color: var(--accent); border-radius: 999px; background: var(--accent-solid); color: var(--accent-ink); box-shadow: 0 5px 16px rgb(0 0 0 / 18%); }
.header-login:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
.home-account { display: flex; align-items: center; gap: 12px; }
.account-state { color: var(--text-dim); font-size: 13px; }

.loading-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 0 24px; border-bottom: 1px solid var(--border-subtle); }
.loading-brand { display: flex; align-items: center; gap: 16px; }
.loading-brand strong { display: block; color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: .14em; }
.loading-brand span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.loading-status { padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.loading-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); align-items: start; gap: 64px; padding: 88px 0 60px; }
.loading-copy .muted { max-width: 52ch; }
.loading-message { margin: 24px 0 0; color: var(--accent); font-size: 13px; font-weight: 700; }
.loading-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.loading-cards span { display: block; min-height: 170px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: linear-gradient(110deg, var(--surface) 20%, var(--surface-hover) 38%, var(--surface) 56%); background-size: 220% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
@keyframes skeleton-shimmer { to { background-position: -220% 0; } }

.home-hero { display: block; padding: 64px 0 40px; }
.home-intro h1 { max-width: 22ch; }
.home-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.home-intro > .muted:first-of-type { max-width: 52ch; }
/* Durum rozeti: uc parca (nokta, durum metni, son kontrol saati) tek satira
   sigmadiginda tasmak yerine alt satira gecmeli. Eskiden sabit min-width ve
   sarmasiz flex vardi; "ÇEVRİM İÇİ" + "Son kontrol: 17:44" sikisip
   okunmaz hâle geliyordu. */
.status-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 20px 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.status-dot { flex: 0 0 auto; }
.status-line.online { border-color: var(--accent); background: var(--accent-solid); color: var(--text); }
.status-line.offline { background: var(--surface); color: var(--text-muted); }
.status-dot { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; background: currentColor; }
.status-line.online .status-dot { border-color: var(--ok); background: var(--ok); }
.status-line.offline .status-dot { border-color: var(--border-strong); background: var(--border-strong); }
.status-time { padding-left: 8px; border-left: 1px solid currentColor; font-size: 11px; font-weight: 400; letter-spacing: .02em; opacity: .72; }
.hero-action { margin: -4px 0 20px; }
.feature-area { padding: 0 0 30px; }
.feature-heading { max-width: 460px; margin-bottom: 16px; }
.feature-heading .eyebrow { margin-bottom: 6px; }
.feature-heading h2 { margin: 0 0 7px; font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.045em; line-height: 1.05; }
.feature-heading .muted { margin: 0; font-size: 12.5px; line-height: 1.5; }
/* EŞİTLEME: yalnızca SATIR İÇİNDE. Grid'in varsayılan align-items:stretch
   davranışı bir satırdaki kutuları o satırın en uzununa eşitler; satırlar ise
   kendi içeriği kadar kalır. Böylece hem simetrik görünür hem de kısa kartlar
   en uzun karta göre uzayıp gereksiz boşluk üretmez. */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feature-card { position: relative; isolation: isolate; min-height: 124px; padding: 13px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: linear-gradient(145deg, var(--surface), var(--surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.feature-card::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 100% 0, rgb(122 165 247 / 18%), transparent 43%); content: ""; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
/* Sağ alttaki büyük filigran KALDIRILDI: aynı sayı artık sağ üstteki rozette.
   (Kural silinmedi ki açık tema geçersiz kılmaları boşa düşmesin.) */
.feature-card::after { display: none; }
.feature-card:hover { border-color: var(--accent); background: linear-gradient(145deg, var(--surface-hover), var(--surface)); box-shadow: 0 14px 28px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 7%); transform: translateY(-4px); }
.feature-card:hover::before { opacity: 1; }
/* Kart numarası SAĞ ÜST köşede, BAŞLIKLA AYNI SATIRDA hizalanır. Önceden sol
   üstte rozet, sağ altta da aynı sayının büyük filigranı vardı; sayı tek yerde
   toplandı ve üst satır kaldırıldığı için kart kısaldı. */
.feature-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.feature-number { display: inline-grid; flex: 0 0 auto; width: 19px; height: 19px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 8.5px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.feature-card h2 { position: relative; z-index: 1; min-width: 0; margin: 0; font-size: 15px; letter-spacing: -.025em; }
.feature-card .muted { position: relative; z-index: 1; max-width: 34ch; margin: 0; font-size: 12.5px; line-height: 1.5; }

.showcase { padding-top: 26px; border-top: 1px solid var(--border-subtle); }
.showcase h2 { margin-top: 0; font-size: 15px; }
.showcase-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.showcase-header .eyebrow { margin-bottom: 7px; }
.showcase-header h2 { font-size: 21px; }
/* Vitrin robotu: başlık ile sıralama seçicisi arasındaki boşlukta ortalanır.
   Alt kenarı kartlara hizalıdır (üst .showcase-header align-items: end), bu
   yüzden "kartların üstünden uzanıyor" görüntüsü oluşur. Süslemedir: dar
   ekranda gizlenir, ekran okuyucudan da gizlidir (aria-hidden). */
.showcase-maskot { flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
/* Başlığın 15px alt boşluğu var; negatif kenar boşluğu robotu o kadar aşağı
   iter ki elleri tam kartların üst kenarına değsin (havada kalmasın). */
.showcase-header .showcase-maskot { margin-bottom: -15px; }
.showcase-maskot picture { display: block; width: 100%; max-width: 420px; }
.showcase-maskot img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .showcase-maskot picture { max-width: 300px; }
}
@media (max-width: 620px) {
  .showcase-maskot { display: none; }
}
.showcase-sort { width: auto; min-width: 190px; padding: 9px 32px 9px 11px; font-size: 13px; }
.showcase-grid, .dashboard-guilds { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 13px; padding: 0; list-style: none; }
.showcase-card, .dashboard-guild { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 15px; border: 1px solid var(--border-subtle); border-radius: 13px; background: var(--surface); }
.showcase-card { min-height: 88px; }
.showcase-rank { display: inline-grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; }
.showcase-card strong, .dashboard-guild-summary strong { display: block; font-size: 14px; }
.showcase-card span, .dashboard-guild-summary span { display: block; margin-top: 4px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* Uzun sunucu adlari ve etiketler karti tasirmasin.
   Flex cocuklarinin varsayilan min-width degeri "auto" oldugu icin uzun bir
   kelime karti yatay olarak buyutur ve yanindaki ikonu sikistirir. min-width:0
   ile tasma yerine sarma/kesme devreye girer. */
.showcase-card > *, .dashboard-guild > * { min-width: 0; }
.dashboard-guild-summary, .showcase-card > div { min-width: 0; flex: 1 1 auto; }
.showcase-card strong, .dashboard-guild-summary strong,
.showcase-card span, .dashboard-guild-summary span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.showcase-card .showcase-rank { display: inline-grid; margin-top: 0; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.showcase-updated { margin-top: 12px; font-size: 13px; }
.showcase-empty { grid-column: 1 / -1; margin: 0; padding: 22px; border: 1px dashed var(--border-subtle); border-radius: var(--r-md); text-align: center; }

.guild-icon { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--border); border-radius: 50%; background: var(--border-subtle); object-fit: cover; }
.fallback-icon { display: grid; place-items: center; color: var(--text); font-weight: 700; }

.dashboard-intro { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 68px 0 44px; border-bottom: 1px solid var(--border-subtle); }
.dashboard-intro-single { padding: 48px 0 30px; }
.dashboard-intro::before { position: absolute; top: 0; left: 0; width: 46px; height: 3px; background: var(--text); content: ""; }
.dashboard-intro h1 { max-width: none; margin-bottom: 7px; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.05em; }
.dashboard-user { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.user-avatar { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-hover); object-fit: cover; }
.dashboard-greeting { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 700; }
.dashboard-overview { display: flex; align-items: stretch; gap: 12px; }
.overview-item { position: relative; display: grid; gap: 4px; min-width: 156px; padding: 16px 18px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: linear-gradient(145deg, var(--surface), var(--surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); }
.overview-item::after { position: absolute; right: -8px; bottom: -18px; color: var(--border-subtle); font-size: 64px; font-weight: 800; line-height: 1; content: "#"; }
.overview-item strong { position: relative; z-index: 1; color: var(--text); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.overview-item span { position: relative; z-index: 1; color: var(--text-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.dashboard-overview .status-line { min-width: 0; flex: 1 1 190px; margin: 0; padding: 15px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: linear-gradient(145deg, var(--surface), var(--surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); }
.dashboard-overview .status-line.online { border-color: var(--border); background: linear-gradient(145deg, var(--surface), var(--surface)); color: var(--text); }
.dashboard-overview .status-line.offline { border-color: var(--border); background: linear-gradient(145deg, var(--surface), var(--surface)); color: var(--text-muted); }
.dashboard-overview .status-line .status-time { color: inherit; opacity: .8; }
.dashboard-section-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 28px 0 20px; }
.dashboard-section-header .eyebrow { margin-bottom: 7px; }
.dashboard-section-header h2 { font-size: 21px; }
.dashboard-section-header-single { max-width: 520px; margin: 0 auto; padding: 24px 0 14px; }
.dashboard-section-count { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.dashboard-section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.dashboard-guilds { grid-template-columns: repeat(auto-fill, minmax(285px, 360px)); justify-content: start; }
.dashboard-guilds-single { grid-template-columns: minmax(0, 520px); justify-content: center; max-width: 520px; margin: 0 auto; }
.dashboard-guilds-single .dashboard-guild { min-height: 178px; }
.dashboard-guild { position: relative; flex-direction: column; align-items: stretch; justify-content: space-between; min-height: 194px; padding: 21px; overflow: hidden; border-color: var(--border); background: linear-gradient(145deg, var(--surface-3), var(--surface)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.dashboard-guild::before { position: absolute; top: 15px; right: 17px; color: var(--border-strong); font-size: 10px; font-weight: 700; letter-spacing: .12em; content: attr(data-order); }
.dashboard-guild::after { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--text), transparent 60%); opacity: .65; content: ""; }
.dashboard-guild:hover { border-color: var(--text-dim); background: linear-gradient(145deg, var(--surface-hover), var(--surface)); transform: translateY(-3px); }
.dashboard-guild-summary { display: flex; align-items: center; gap: 12px; }
.guild-activity::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--text-muted); vertical-align: 1px; }
.dashboard-guild-actions { display: flex; justify-content: flex-end; margin-top: 28px; padding-top: 15px; border-top: 1px solid var(--border); }
.dashboard-guild-actions .button { width: 100%; min-width: 106px; }

.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; padding: 36px 0 18px; overflow-anchor: none; }
.settings-main { min-width: 0; }
.settings-intro { position: relative; padding: 0 0 34px; }
.settings-intro::before { display: block; width: 42px; height: 3px; margin-bottom: 22px; background: var(--text); content: ""; }
.settings-intro h1 { max-width: none; margin-bottom: 8px; font-size: clamp(32px, 4vw, 48px); }
.settings-main form { display: grid; gap: 14px; max-width: none; margin: 0; }
/* ============================================================================
   AYAR EKRANI HIYERARSISI
   ----------------------------------------------------------------------------
   Kullanici "basliklar ve ozellikler kisimini ayirt etmekte zorlaniyorum" dedi.
   Sebep olculdu: [data-page="settings"] kurali etiket, field-label,
   checkbox-label, input, select, textarea, summary ve button'un HEPSINI 15px
   yapiyordu. Grup basligi 24px, alt grup basligi 17px ile aralarinda yeterli
   fark yoktu ve katlanabilir bloklar normal ayarlardan ayirt edilemiyordu.

   Artik uc seviye gorsel olarak AYRILIYOR:
     1) Bolum basligi  -> buyuk, kalin, bolumun ustunde renkli serit
     2) Katlanabilir grup -> kart gorunumu + ok isareti + hover
     3) Alt grup basligi -> kucuk buyuk harf etiket (overline)
     4) Ayar etiketi   -> kisa dikey serit ile kontrolune bagli
   ============================================================================ */

.settings-group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 0 30px; border: 0; border-top: 1px solid var(--border); background: transparent; }
/* Bolum basligini ayiran serit: baslik artik bolumun sahibi oldugunu belli eder. */
.settings-group::before { position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--accent); content: ""; }
.settings-group[hidden], .invite-ranking[hidden] { display: none; }
.settings-group:last-of-type { border-bottom: 1px solid var(--border); }
.settings-group-number { display: inline-grid; width: 30px; height: 30px; margin-bottom: 13px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.settings-group-heading { display: grid; gap: 8px; }
.settings-group-heading h2 { margin: 0; color: var(--text); font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.settings-group-heading .muted { margin: 0; max-width: 74ch; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.settings-fields { display: grid; gap: 18px; }
.settings-aside { position: sticky; top: 24px; align-self: start; padding: 16px 26px 16px 0; border-right: 1px solid var(--border-subtle); background: linear-gradient(270deg, rgb(255 255 255 / 3%), transparent); }
.settings-server-info { display: grid; gap: 6px; margin: 15px 0 20px; }
.settings-server-info .guild-icon { width: 58px; height: 58px; margin-bottom: 4px; }
.settings-server-info strong { font-size: 15px; overflow-wrap: anywhere; }
.settings-server-info span { color: var(--text-dim); font-size: 13px; }
.settings-aside > .muted { font-size: 13px; }
.settings-nav { display: grid; gap: 4px; margin: 22px 0; }
/* Emoji hizalama: başlıkla aynı satırda, sabit genişlikte. */
.settings-nav-title { display: flex; align-items: center; gap: 9px; }
.settings-nav-emoji { flex: 0 0 auto; width: 1.35em; text-align: center; }
/* Masaüstünde dış çerçeve sabit; sol ve sağ sütun bağımsız kayar. */
@media (min-width: 1001px) {
  .panel[data-page="settings"] {
    position: fixed;
    inset: 16px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 16px;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  body:has(.panel[data-page="settings"]) { overflow: hidden; }
  [data-page="settings"] .settings-layout { min-height: 0; overflow: hidden; padding-block: 16px 0; }
  [data-page="settings"] .settings-aside,
  [data-page="settings"] .settings-main {
    min-height: 0 !important;
    height: auto;
    align-self: stretch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    overflow-anchor: none;
  }
  [data-page="settings"] .settings-aside { position: relative; top: auto; }
  .settings-nav { max-height: none; overflow: visible; }
}
/* Bölüm başlıkları, kaydırma hedefi olarak biraz boşluk bırakır. */
.settings-group { scroll-margin-top: 24px; }
/* AYAR ADI: tiklanabilir oge. Basliklardan ayrisan ozellikler: seciliyken
   SOL VURGU CUBUGU, daha buyuk punto ve yuvarlak kose. */
.settings-nav-button { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; width: 100%; min-height: 40px; justify-content: flex-start; padding: 9px 12px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.settings-nav-button:hover { border-left-color: var(--border-strong); background: var(--surface-hover); color: var(--text); transform: none; }
.settings-nav-button.active { border-left-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.invite-ranking { margin-top: 30px; padding: 24px 28px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: linear-gradient(145deg, var(--surface), var(--surface)); }
.invite-ranking h2 { margin: 0 0 8px; font-size: 19px; }
.invite-ranking > .muted { margin-bottom: 0; }
.invite-ranking-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: invite-rank; }
.invite-ranking-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface); counter-increment: invite-rank; }
.invite-ranking-item::before { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 11px; font-weight: 800; content: counter(invite-rank); font-variant-numeric: tabular-nums; }
.invite-ranking-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-ranking-item .muted { margin: 0; font-size: 13px; white-space: nowrap; }
form { display: grid; gap: 18px; margin: 20px 0 0; max-width: 650px; }
label { display: grid; gap: 7px; color: var(--text-muted); font-size: 14px; font-weight: 700; }
label .muted { color: var(--text-muted); font-size: 13px; font-weight: 400; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-4); color: var(--text); font: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
select[multiple] { min-height: 108px; padding: 7px; }
select[multiple] option { padding: 7px 8px; border-radius: var(--r-sm); }
select[multiple] option:checked { background: var(--accent-solid) linear-gradient(0deg, var(--accent), var(--accent)); color: var(--text); }
.channel-picker-field { display: grid; gap: 8px; }
.field-label { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.channel-picker-list { display: grid; gap: 7px; max-height: 260px; padding: 9px; overflow-y: auto; }
.channel-picker-item { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-4); color: var(--text-muted); cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.channel-picker-item:hover { border-color: var(--border-strong); background: var(--surface); }
.channel-picker-item.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.channel-picker-item input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--accent); }
.checkbox-field { position: relative; grid-template-columns: 42px 1fr; align-items: center; column-gap: 11px; cursor: pointer; }
.checkbox-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-control { position: relative; display: block; width: 42px; height: 24px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-deep); box-shadow: inset 0 1px 3px rgb(0 0 0 / 35%); transition: background .18s ease, border-color .18s ease; }
.toggle-control::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 1px 3px rgb(0 0 0 / 45%); content: ""; transition: transform .18s ease, background .18s ease; }
.checkbox-field input:checked + .toggle-control { border-color: var(--accent-strong); background: var(--accent-solid); }
.checkbox-field input:checked + .toggle-control::after { background: var(--text); transform: translateX(18px); }
.checkbox-field input:focus-visible + .toggle-control { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.checkbox-field .muted { grid-column: 2; margin-top: -2px; }
.checkbox-label { font-size: 14px; }
textarea { min-height: 102px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-strong); background: var(--surface); outline: 0; box-shadow: 0 0 0 3px rgb(122 165 247 / 18%); }
.form-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 6px 24px rgb(0 0 0 / 53%); }
.form-actions .status { flex: 1 1 200px; margin: 0; font-size: 13px; }
.status[data-kind="error"] { color: var(--danger); }
.status[data-kind="success"] { color: var(--ok); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.selected-channels { display: flex; flex-wrap: wrap; gap: 6px; max-height: 100px; overflow: auto; }
.selected-channels:empty { display: none; }
.channel-chip { padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-hover); font-size: 13px; overflow-wrap: anywhere; }
.channel-picker-item[hidden] { display: none; }
.showcase-card > div, .dashboard-guild-summary > div { min-width: 0; }
.showcase-card strong, .dashboard-guild-summary strong { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.settings-intro h1 { overflow-wrap: anywhere; }
.home-account, .brand-text { min-width: 0; }
.home-header, .dashboard-header, .settings-header { flex-wrap: wrap; }
.settings-group-heading h2 { margin-top: 0; }
.status { min-height: 1.5em; color: var(--text-muted); }
.notification-editor { display: grid; gap: 18px; min-width: 0; padding-bottom: 26px; border-bottom: 1px solid var(--border-subtle); }
.notification-editor:last-child { border-bottom: 0; }
.notification-editor h3 { margin: 0; font-size: 19px; color: var(--text); }
.notification-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.notification-body[hidden], .notification-disabled[hidden], .field-error[hidden] { display: none; }
.notification-controls { display: grid; gap: 20px; min-width: 0; }
.notification-preview { min-width: 0; padding-left: 20px; border-left: 1px solid var(--border-subtle); }
.notification-preview summary { font-size: 13px; }
.message-field, .searchable-select { display: grid; gap: 8px; min-width: 0; }
.searchable-select > input { font-size: 13px; padding: 9px 12px; }
.message-variables { display: flex; flex-wrap: wrap; gap: 6px; }
.message-variables button { min-height: 34px; padding: 5px 9px; font-size: 11px; }
.character-counter { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.field-error { margin: 0; color: var(--danger); font-size: 13px; line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--danger); }
.notification-disabled { font-size: 13px; }
@media (max-width: 1200px) {
  .notification-body { grid-template-columns: minmax(0, 1fr); }
  .notification-preview { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
}
.notification-editor > p { margin: 0; font-size: 13px; }
.notification-preview summary { padding: 10px 0; cursor: pointer; font-weight: 700; color: var(--accent); }
.notification-preview > .muted { margin: 12px 0; font-size: 13px; }
.preview-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.member-card-preview { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; max-width: 600px; padding: 22px 16px; border-radius: var(--r-md); background: var(--bg-deep); color: var(--danger); text-align: center; }
.member-card-avatar { display: grid; place-items: center; width: 110px; height: 110px; margin-bottom: 12px; border: 4px solid var(--danger); border-radius: 50%; background: var(--surface-hover); color: var(--text); font-size: 40px; }
.member-card-preview strong { font-size: 20px; overflow-wrap: anywhere; }
.member-card-preview > span:not(.member-card-avatar) { font-size: 18px; }
.member-card-preview small { color: var(--danger); font-size: 15px; }

.settings-search { margin-top: 18px; font-size: 13px; }
.settings-search input { font-size: 13px; }
.settings-nav-button { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 10px 12px; }
.settings-nav-title { overflow-wrap: anywhere; }
.settings-nav-state { grid-column: 1; color: var(--text-dim); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.settings-nav-button.active .settings-nav-state { color: var(--text-muted); }
/* Degisiklik bekleyen bolum: sol cubuk turuncu. Boylece "kaydedilmemis" ile
   "secili" birbirine karismaz. */
.settings-nav-button.has-changes { border-left-color: var(--warn); }
.settings-nav-button.has-changes.active { border-left-color: var(--accent); }
.settings-nav-button[hidden], .dashboard-guild[hidden] { display: none; }
.settings-group-heading h2 { scroll-margin-top: 24px; }
.guild-search { max-width: 520px; margin: 0 0 20px; }
.activity-ranking > label { margin: 18px 0 12px; max-width: 300px; }
.activity-results { margin-top: 18px; }
.activity-ranking .invite-ranking-item { grid-template-columns: 32px minmax(0, 1fr); }
.activity-ranking .invite-ranking-item .muted { grid-column: 2; white-space: normal; }
.begeni-listesi { margin-top: 8px; padding: 18px 20px; }
.begeni-listesi h3 { margin: 0 0 6px; font-size: 16px; }
.begeni-listesi .invite-ranking-item { grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 4px 10px; }
.begeni-listesi .invite-ranking-item::before { grid-row: 1 / span 3; }
.begeni-listesi .invite-ranking-item > * { grid-column: 2; overflow-wrap: anywhere; }
.begeni-listesi .invite-ranking-item .muted { white-space: normal; }

/* --- Üye XP sorgusu -----------------------------------------------------
   Sıralama ilk 50 üyeyle sınırlı; tek üyenin ilerlemesini görmek için arama.
   Katlanabilir, çünkü günlük kullanımda sıralamayı öne çıkarmak istiyoruz. */
.uye-xp-arama { margin-top: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); }
.uye-xp-arama > summary { padding: 12px 14px; color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.uye-xp-arama > summary::-webkit-details-marker { display: none; }
.uye-xp-arama > summary::before { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--t-fast); content: ""; }
.uye-xp-arama[open] > summary::before { transform: rotate(45deg); }
.uye-xp-arama > summary:hover { color: var(--accent); }
.uye-xp-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.uye-xp-form input { flex: 1 1 240px; min-width: 0; }
.uye-xp-sonuc { padding: 0 14px 14px; color: var(--text-muted); font-size: 13px; }
.uye-xp-kart { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2); }
.uye-xp-kart strong { color: var(--text); font-size: 17px; font-weight: 800; }
.uye-xp-kart .muted { margin: 0; font-size: 13px; }

/* İlerleme çubuğu: progress() zaten yüzde üretiyordu, yalnızca çizilmiyordu. */
.ilerleme-cubugu { height: 8px; border-radius: var(--r-full); background: var(--surface-4); overflow: hidden; }
.ilerleme-dolgu { height: 100%; border-radius: var(--r-full); background: var(--accent-solid); transition: width var(--t-base); }

/* --- Seviye eşik tablosu -----------------------------------------------
   Yönetici "Gerekli seviye" alanına yazdıkça o seviyeye kaç XP'de
   ulaşıldığını gösterir. Önceden körlemesine sayı giriliyordu. */
.seviye-esik { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); }
.seviye-esik-baslik { margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 700; }
.seviye-esik-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.seviye-esik-tablo th { padding: 6px 10px 8px 0; text-align: left; color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.seviye-esik-tablo td { padding: 8px 10px 8px 0; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.seviye-esik-tablo tr:last-child td { border-bottom: 0; }
.seviye-esik-tablo td:first-child { color: var(--text); font-weight: 600; }
.seviye-esik-bos { color: var(--text-dim) !important; font-style: italic; }
.seviye-esik-not { margin: 10px 0 0; color: var(--text-dim); font-size: 12px; }

/* --- XP düzenleme ve denetim -------------------------------------------
   Elle XP değiştirmek sıralamayı bozabilir; bu yüzden düzenleme alanı
   sonuç kartının içinde, denetim geçmişi ve toplu sıfırlama ise ayrı ve
   katlanabilir bir bölümde durur. */
.uye-xp-duzenle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.uye-xp-duzenle input { flex: 1 1 140px; min-width: 0; }
.uye-xp-durum { margin: 0; min-height: 1.2em; color: var(--text-muted); font-size: 12px; }
.xp-bakim { margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface); }
.xp-bakim > summary { padding: 12px 14px; color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.xp-bakim > summary::-webkit-details-marker { display: none; }
.xp-bakim > summary::before { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--t-fast); content: ""; }
.xp-bakim[open] > summary::before { transform: rotate(45deg); }
.xp-bakim > p { margin: 0; padding: 0 14px 10px; color: var(--text-dim); font-size: 12px; }
.xp-bakim > button { margin: 0 14px 10px; }
.xp-bakim > .uye-xp-durum { padding: 0 14px 10px; }
.xp-denetim { padding: 0 14px 14px; }
.xp-denetim-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.xp-denetim-liste li { padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- XP özeti ----------------------------------------------------------
   "Ne kadar hareket var?" sorusunu tek bakışta yanıtlar. dashboard'daki
   .overview-item kartları yeniden kullanılır; panel tek bir görsel dil tutar. */
.xp-ozet { margin: 16px 0 4px; }
.xp-ozet-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* --- Bildirim teslim durumu --------------------------------------------
   Bildirimler sessizce başarısız olabiliyordu (kanal silinmiş, yetki
   alınmış) ve yönetici özelliğin çalıştığını sanıyordu. Durum burada
   açıkça görünür; hata mesajı kısaltılmadan gösterilir. */
.bildirim-baslik { margin: 14px 0 8px; color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.bildirim-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bildirim-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px; }
.bildirim-satir strong { color: var(--text); font-size: 13px; }
/* Rozet zemini bilinçli olarak --accent-soft'tan (α .14) daha soluk (α .10).
   Ölçüldü: α .14'te --danger metni zemine karşı 4.28:1 kalıyor ve WCAG AA
   (4.5:1) eşiğini geçmiyordu. α .10'da en kötü oran 4.61:1. Rozet 11px
   olduğu için "büyük metin" istisnası geçerli değil. */
.bildirim-rozet { padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; background: rgb(122 165 247 / 10%); }
.bildirim-rozet.ok { color: var(--ok); }
.bildirim-rozet.warn { color: var(--warn); }
.bildirim-rozet.danger { color: var(--danger); }
.bildirim-hata { flex: 1 1 100%; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }

/* Şablon noktalama uyarısı: bilgilendirir, engellemez. Metin sessizce
   DEĞİŞTİRİLMEZ — kullanıcının verisini izinsiz düzeltmek yanlış olurdu. */
.noktalama-uyari { margin: 6px 0 0; color: var(--warn); font-size: 12px; }

.dashboard-guild .status { font-size: 13px; margin: 0; }
@media (max-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .settings-aside { position: static; border-right: 0; padding: 0 0 18px; background: none; }
  .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page { padding: 16px; }
  .panel { min-height: calc(100vh - 32px); padding: 20px; }
  .loading-hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 36px; }
  .home-hero { grid-template-columns: 1fr; gap: 34px; padding: 58px 0 46px; }
  .dashboard-intro { align-items: flex-start; flex-direction: column; }
  .dashboard-overview { width: 100%; }
  .overview-item, .dashboard-overview .status-line { flex: 1; }
  .settings-layout { display: flex; flex-direction: column; gap: 28px; padding-top: 34px; }
  .settings-aside { position: static; order: -1; width: 100%; padding: 0 0 20px; border-bottom: 1px solid var(--border-subtle); border-left: 0; background: none; }
  .settings-server-info { display: none; }
  .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; }
  .settings-group { grid-template-columns: 1fr; gap: 18px; }
  .dashboard-intro { padding-top: 44px; }
}

@media (max-width: 500px) {
  h1 { font-size: 34px; }
  .home-header, .dashboard-header, .settings-header { align-items: flex-start; }
  .home-brand { gap: 2px; }
  .brand-subtitle { display: none; }
  .account-state { display: none; }
  .status-line { flex-wrap: wrap; }
  .status-time { padding-left: 0; border-left: 0; }
  .showcase-grid, .dashboard-guilds { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .showcase-header { align-items: flex-start; flex-direction: column; }
  .showcase-sort { width: 100%; }
  .dashboard-overview { align-items: stretch; flex-direction: column; gap: 8px; }
  .overview-item, .dashboard-overview .status-line { width: 100%; }
  .sakbot-logo { width: 52px; height: 52px; flex-basis: 52px; }
  .settings-group { padding: 20px 0; }
  .settings-nav { grid-template-columns: 1fr; }
  .dashboard-section-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .form-actions { flex-direction: column; }
  .form-actions button { width: 100%; }
  .form-actions .status { flex-basis: auto; }
  .page { padding: 10px; }
  .panel { padding: 12px; }
  .dashboard-brand, .home-brand { gap: 10px; }
  .brand-name, .dashboard-brand strong { font-size: 14px; }
  .dashboard-brand span { font-size: 13px; }
  .loading-header { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-cards span { animation: none; }
  button, .button, .feature-card, .dashboard-guild { transition: none; }
}
/* Kayıt personeli ekranı: dar ekranda da okunabilen kişisel bilgi satırları. */
.registration-access, .registration-records { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); }
.registration-record { padding: 1rem 0; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
[data-page="registration"] form { display: grid; gap: 1rem; max-width: 760px; }
[data-page="registration"] label, .registration-access label { display: grid; gap: .5rem; }
.registration-access input { max-width: 400px; }

/* Shared settings layout */
.settings-aside { background: none; }
.settings-intro { padding-bottom: 20px; }
.settings-intro::before { display: none; }
.settings-intro h1 { font-size: clamp(24px, 3vw, 34px); }
.settings-nav { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 22px 0 0; }
.settings-nav-group { display: grid; gap: 2px; }

/* GRUP BASLIGI (ÜYELER / GÜVENLİK / İSTATİSTİKLER)
   Once 12-13px ve soluk renkteydi; altindaki ayar adlari 15px ve daha parlak
   oldugu icin basliklar ogelerden KUCUK gorunuyordu ve ikisi karisiyordu.
   Kullanicinin "sol taraftaki ayarlarin adlari ve basliklari ayirt
   edemiyorum" dedigi yer tam olarak burasiydi.
   Artik: ustunde AYIRICI CIZGI + bol ust bosluk + kucuk buyuk-harf etiket.
   Cizgi "buradan yeni bir grup basliyor" mesajini verir; oge ise seciliyken
   SOL VURGU CUBUGU tasir. Ikisi boylece karismaz. */
.settings-nav-group h3 { margin: 0 0 8px; padding: 15px 10px 0; border-top: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.settings-nav-group:first-child h3 { padding-top: 0; border-top: 0; }
.settings-nav-button { background: transparent; border-color: transparent; border-radius: var(--r-sm); }
.settings-nav-button.active { background: var(--accent-soft); border-color: var(--accent-solid); }
.settings-group-number { display: none; font-variant-numeric: tabular-nums; }
.settings-nav-button { grid-template-columns: minmax(0, 1fr); }
.settings-nav-state { grid-column: 1; }
.settings-mobile-summary { display: none; }
.settings-group-heading h2 { font-size: 24px; font-weight: 700; }
.settings-main .muted { color: var(--text-muted); line-height: 1.65; }
.settings-main label { font-weight: 600; }
.settings-main label .muted { font-weight: 400; font-size: 13px; }
.settings-main input:not([type="checkbox"]), .settings-main select, .settings-main textarea,
[data-page="registration"] input { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text); min-height: 44px; }
.settings-fields .field-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.settings-subgroup { margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--border); min-width: 0; display: grid; gap: 16px; }
/* Alt grup basligi: kucuk buyuk-harf etiket. Bolum basligindan (21px kalin)
   ve ayar etiketinden (14px) acikca ayrilir; kullanicinin "ayirt edemiyorum"
   dedigi katman buydu. */
.settings-subgroup legend { padding: 0 8px 0 0; color: var(--text-dim); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* Katlanabilir ozellik grubu: kart gorunumu. Onceden duz bir <details> idi ve
   cevresindeki normal ayarlardan ayirt edilemiyordu. Artik yuzey, kenarlik ve
   ok isareti ile "bu bir grup, tiklayinca acilir" mesaji veriyor. */
.feature-options { border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; transition: border-color var(--t-fast); }
.feature-options:hover { border-color: var(--border-strong); }
.feature-options[open] { border-color: var(--border); background: var(--surface); }
.feature-options > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--text); font-size: 16px; font-weight: 750; letter-spacing: -.01em; cursor: pointer; list-style: none; transition: background var(--t-fast); }
.feature-options > summary::-webkit-details-marker { display: none; }
.feature-options > summary::before { flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--t-fast); content: ""; }
.feature-options[open] > summary::before { transform: rotate(45deg); }
.feature-options > summary:hover { background: var(--surface-hover); }
.feature-options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feature-options[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.feature-options-body { display: grid; gap: 18px; padding: 18px 16px; }
.section-error { color: var(--danger); margin: 0; }

/* Ayar etiketi: kisa dikey serit ile ALTINDAKI kontrolune baglanir.
   Etiket ile kontrol ayni 15px boyuttaydi ve hangi yazinin hangi alana ait
   oldugu belirsizdi. Serit + biraz daha buyuk punto bu bagi kurar. */
[data-page="settings"] .settings-fields label,
[data-page="settings"] .settings-fields .field-label,
[data-page="settings"] .settings-fields .checkbox-label {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}
[data-page="settings"] .settings-fields > label:not(.checkbox-field) {
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
[data-page="settings"] .settings-fields > label:not(.checkbox-field):focus-within {
  border-left-color: var(--accent);
}
/* Anahtar satiri (onay kutusu) kart gorunumunde: tiklanabilir oldugu belli olsun. */
[data-page="settings"] .settings-fields > .checkbox-field {
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
[data-page="settings"] .settings-fields > .checkbox-field:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
[data-page="settings"] .settings-fields > .checkbox-field:has(input:checked) {
  border-color: var(--accent-solid);
  background: var(--accent-soft);
}
.settings-main .form-actions { position: sticky; bottom: 12px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; z-index: 5; }
[hidden] { display: none !important; }
@media (min-width: 1001px) {
  .settings-mobile-navigation:not([open]) > :not(summary) { display: block; }
  .settings-mobile-navigation:not([open]) > .settings-nav { display: grid; }
}
@media (max-width: 1000px) {
  .settings-mobile-summary { display: list-item; padding: 12px; cursor: pointer; font-weight: 600; }
  .settings-mobile-navigation { border: 1px solid var(--border); border-radius: var(--r-sm); }
  .settings-mobile-navigation[open] { padding: 0 12px 12px; }
  .settings-aside { border: 0; padding: 0; position: static; }
  .settings-server-info { display: none; }
  .settings-nav { grid-template-columns: 1fr; }
  .settings-layout { gap: 18px; padding-top: 18px; }

  /* BÖLÜM ÇUBUĞU — dar ekranda sabit kalır.
     Sorun: bu genişlikte .settings-aside "static" olduğu için bölüm listesi
     sayfayla birlikte yukarı kayıyordu. Kullanıcı aşağıdaki bir bölümü
     düzenlerken başka bölüme geçmek için tüm sayfayı yukarı kaydırmak
     zorunda kalıyordu; "sol kısımdaki ayarlar paneli kayıyor" şikâyeti buydu.
     Çözüm: seçim yapıldıktan sonra (details kapalıyken) menü yatay kaydırılan
     bir şerit olarak üstte SABİTLENİR. Böylece hem hep erişilebilir hem de
     yer kaplamaz. Menü açıkken (bölüm seçerken) normal akışta kalır ki tüm
     bölümler rahatça görünsün. */
  .settings-mobile-navigation:not([open]) {
    position: sticky;
    top: 8px;
    z-index: 6;
    background: var(--surface-2);
    box-shadow: var(--sh-1);
  }
  .settings-mobile-navigation:not([open]) > .settings-nav {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .settings-mobile-navigation:not([open]) .settings-nav-group { display: contents; }
  .settings-mobile-navigation:not([open]) .settings-nav-group h3 { display: none; }
  .settings-mobile-navigation:not([open]) .settings-nav-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    background: var(--surface);
    white-space: nowrap;
  }
  .settings-mobile-navigation:not([open]) .settings-nav-button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  /* Şeritte sol vurgu çubuğu yerine yuvarlak kenarlık kullanılır. */
  .settings-mobile-navigation:not([open]) .settings-nav-button,
  .settings-mobile-navigation:not([open]) .settings-nav-button:hover,
  .settings-mobile-navigation:not([open]) .settings-nav-button.active,
  .settings-mobile-navigation:not([open]) .settings-nav-button.has-changes { border-left-width: 1px; }
  /* Şeritte durum metni ("3/3 açık") gizlenir: dar alanda taşırıyor. */
  .settings-mobile-navigation:not([open]) .settings-nav-state { display: none; }
  .settings-main .form-actions { bottom: 6px; }
}

/* Sunucu ayarlarında okunaklı metin ölçeği; diğer sayfaları etkilemez. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 18px; }
.hero-actions .hero-action { margin: 0; }
@media (max-width: 500px) {
  .hero-actions > .button { width: 100%; justify-content: center; }
}

[data-page="settings"] { font-size: 15px; line-height: 1.6; }
[data-page="settings"] .settings-intro h1 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; }
[data-page="settings"] .settings-group-heading h2 { font-size: clamp(23px, 2.3vw, 26px); line-height: 1.3; }
[data-page="settings"] .notification-editor h3 { font-size: 20px; line-height: 1.4; }
[data-page="settings"] .settings-subgroup legend { font-size: 17px; }
[data-page="settings"] label,
[data-page="settings"] .field-label,
[data-page="settings"] .checkbox-label,
[data-page="settings"] input,
[data-page="settings"] select,
[data-page="settings"] textarea,
[data-page="settings"] summary,
[data-page="settings"] button { font-size: 15px; line-height: 1.5; }
[data-page="settings"] .settings-main .muted,
[data-page="settings"] .settings-aside > .muted,
[data-page="settings"] .form-actions .status,
[data-page="settings"] .field-error,
[data-page="settings"] .notification-editor > p { font-size: 14px; line-height: 1.65; }
[data-page="settings"] .settings-nav-group h3,
[data-page="settings"] .eyebrow { font-size: 11px; }
[data-page="settings"] .settings-nav-state,
[data-page="settings"] .settings-server-info span,
[data-page="settings"] .channel-chip,
[data-page="settings"] .character-counter { font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
[data-page="settings"] .settings-server-info strong { font-size: 16px; }
[data-page="settings"] .settings-nav-button { padding: 13px 10px; }
[data-page="settings"] .message-variables button { font-size: 14px; min-height: 40px; }
[data-page="settings"] .settings-nav-title { min-width: 0; }
[data-page="settings"] .form-actions .status { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  [data-page="settings"] input,
  [data-page="settings"] select,
  [data-page="settings"] textarea { font-size: 16px; }
}
@media (min-width: 1001px) {
  [data-page="settings"] .settings-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

/* Geniş ekranı kullan, metin satırlarını okunabilir uzunlukta tut. */
.settings-main .settings-group-heading > .muted { max-width: 78ch; }
.settings-fields, .feature-options-body, .settings-subgroup,
.settings-fields label, .searchable-select { min-width: 0; }
.settings-fields input, .settings-fields select, .settings-fields textarea { min-width: 0; max-width: 100%; }
.home-hero > .feature-area { min-width: 0; padding-bottom: 0; }
.home-intro { min-width: 0; }
.home-intro > .muted { max-width: 58ch; }
@media (min-width: 1100px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 3.4vw, 56px); padding: 52px 0 40px; }
  /* Kartlar 2 sütunda 7 satır yer kaplıyordu; 3 sütun aynı içeriği ~2/3
     yüksekliğe indirir. Çok geniş ekranda dört sütuna çıkar. */
  .home-hero .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero .feature-card { min-height: 112px; }
  .home-hero .feature-card .muted { max-width: none; line-height: 1.5; }
}
@media (min-width: 1600px) {
  .home-hero .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .settings-subgroup, .settings-paired { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; align-items: start; }
  .settings-paired > :not(label):not(.searchable-select) { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* Füme yüzeyler ve sade vurgu renkleri. */
.invite-notice { margin: 20px 0 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-sm); color: var(--text); line-height: 1.6; }
.muted, .settings-main .muted { color: var(--text-muted); }
.eyebrow { color: var(--text-muted); }
.panel { background: var(--surface); border-color: var(--border); box-shadow: none; }
.feature-card, .dashboard-guild, .overview-item, .showcase-card,
.invite-ranking, .invite-ranking-item { background: var(--surface); border-color: var(--border); box-shadow: none; }
.feature-card:hover, .dashboard-guild:hover, .showcase-card:hover {
  background: var(--surface-hover); border-color: var(--border-strong); box-shadow: none;
}
.feature-card::before, .dashboard-guild::after { display: none; }
.feature-card::after, .overview-item::after { color: var(--border); }
.feature-number, .showcase-rank, .invite-ranking-item::before { border-color: var(--border-strong); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.secondary { background: transparent; border-color: var(--border-strong); color: var(--text); }
.secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.status-line.online, .status-line.offline { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
.settings-aside { background: var(--surface); border-radius: var(--r-sm); padding: 16px; }
.settings-nav-button { background: transparent; }
.settings-nav-button:hover { background: var(--surface-hover); }
.settings-nav-button.active { background: var(--accent-soft); border-color: var(--accent); }
input, select, textarea,
.settings-main input:not([type="checkbox"]), .settings-main select, .settings-main textarea,
[data-page="registration"] input { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: none; }
input:focus, select:focus, textarea:focus { background: var(--surface-hover); }
.channel-picker-item, .channel-chip { background: var(--surface); border-color: var(--border); }
.channel-picker-item:hover { background: var(--surface-hover); }
.channel-picker-item.selected { background: var(--accent-soft); border-color: var(--accent); }
.form-actions, .settings-main .form-actions { background: var(--surface); border-color: var(--border-strong); box-shadow: 0 4px 16px rgb(0 0 0 / 20%); }
.loading-cards span { background: var(--surface); animation: none; }
@media (max-width: 1000px) { .settings-aside { padding: 12px; } }

.commands-section { padding: 26px 0; border-top: 1px solid var(--border); scroll-margin-top: 24px; }
.commands-heading h2 { font-size: clamp(21px,2.4vw,28px); margin: 0 0 8px; }
.commands-heading > .muted { max-width: 76ch; font-size: 13px; }
.commands-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
.commands-tools label { width: min(100%,360px); }
.commands-tools p { margin: 0 0 10px; }
/* EŞİTLEME: satır içinde (bkz. .feature-grid açıklaması). */
.commands-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.command-item { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.command-category { font-size: 11.5px; letter-spacing: .02em; color: var(--text-muted); }
.command-item h3 { margin: 5px 0 9px; font-size: 15.5px; letter-spacing: -.02em; }
.command-item code, .home-setup code { overflow-wrap: anywhere; white-space: pre-wrap; color: var(--accent); font-size: 13px; }
.command-item > code { display: block; padding: 8px 9px; background: var(--bg-deep); border-radius: var(--r-sm); user-select: all; }
.command-copy { margin: 7px 0 0; font-size: 12px; padding: 4px 9px; }
.command-item p { line-height: 1.5; margin: 9px 0 0; font-size: 13px; }
.command-item .muted { font-size: 12px; line-height: 1.45; }
.command-item details { margin-top: 9px; }
.command-item summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.commands-note { margin: 16px 0; font-size: 12.5px; }
.home-setup { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; }
.home-setup h2 { margin-top: 0; font-size: 21px; }
/* Dört adım: ekran genişliğine göre 2–4 sütun; dar ekranda tek sütun. */
.home-setup ol { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 30px; padding-left: 24px; line-height: 1.65; }
.home-setup strong { display: block; }
.home-setup > .muted { max-width: 95ch; }
/* FOOTER: #application'ın kardeşi olarak durur; yalnızca herkese açık ana
   sayfada görünür. Panel, dashboard ve kayıt görünümlerinde gizli kalır. */
main > .site-footer { display: none; }
#application[data-page="home"] ~ .site-footer,
#application[data-page="loading"] ~ .site-footer { display: block; }
.site-footer { max-width: min(100%, 1440px); margin: 40px auto 0; padding: 22px 32px 40px; border-top: 1px solid var(--border-subtle); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer nav a { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }
.site-footer .muted { margin: 14px 0 0; font-size: 12px; }
@media(max-width:1000px) { .commands-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .commands-grid, .home-setup ol { grid-template-columns: minmax(0,1fr); } .command-item { padding: 14px; } }
/* Read-only configuration diagnostics, separate from editable sections. */
.feature-health { margin-block: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); }
.feature-health summary { cursor: pointer; font-weight: 600; }
.feature-health ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; padding: 0; list-style: none; }
.feature-health li p { margin-top: 6px; }
.community-record { padding: 14px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.community-record .button { margin: 8px 8px 0 0; }

/* Öneriler: bekleyen / kabul edilen / reddedilen ayrı alanlarda. */
.oneri-grup { margin: 16px 0 0; padding: 4px 14px; border: 1px solid var(--border); border-radius: 10px; }
.oneri-grup-kabul { border-color: var(--ok); background: var(--ok-soft); }
.oneri-grup-ret { border-color: var(--danger); background: var(--danger-soft); }
.oneri-grup-baslik { margin: 10px 0 4px; }
.oneri-grup-kabul .oneri-grup-baslik { color: var(--ok); }
.oneri-grup-ret .oneri-grup-baslik { color: var(--danger); }
.oneri-grup .community-record:last-child { border-bottom: 0; }

/* ===== UYARI SİSTEMİ =====================================================
   Mevcut tasarım dili korunur: aynı yüzeyler, kenarlar, yarıçaplar ve mavi
   vurgu. Yeni bir görsel sistem kurulmadı; yalnızca uyarı bölümünün alt
   parçaları (kademe satırları, katlanır alanlar, önizleme) biçimlendirildi. */

/* Sistem kapalıyken bağımlı alanlar soluk görünür ama VERİ KAYBI OLMAZ. */
.uyari-kapali [data-uyari-bagimli] { opacity: 0.55; }
.uyari-kapali [data-uyari-bagimli]::after { content: none; }
[data-uyari-bagimli] input:disabled,
[data-uyari-bagimli] select:disabled,
[data-uyari-bagimli] button:disabled { cursor: not-allowed; }

/* Katlanır alt bölümler (Otomatik cezalar, Üye itirazı) */
.uyari-katlanir { border: 0; border-top: 1px solid var(--border); }
.uyari-katlanir > summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 0;
  color: var(--text); font-size: 17px; font-weight: 800;
  letter-spacing: .02em; cursor: pointer; list-style: none;
}
.uyari-katlanir > summary::-webkit-details-marker { display: none; }
.uyari-katlanir > summary::before {
  flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--t-fast);
}
.uyari-katlanir[open] > summary::before { transform: rotate(45deg); }
.uyari-katlanir > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uyari-katlanir-govde { display: grid; gap: 18px; padding: 0 0 18px; }

/* Süre seçici: ön ayar listesi + yalnızca "Özel" seçilince görünen alanlar */
.uyari-sure-secici { display: grid; gap: 12px; }
.uyari-sure-ozel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; }

/* Otomatik ceza kademeleri */
.uyari-kademeler { display: grid; gap: 12px; }
.uyari-kademe-listesi { display: grid; gap: 10px; }
.uyari-kademe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  align-items: end; gap: 12px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.uyari-kademe.pasif { opacity: 0.6; border-style: dashed; }
.uyari-kademe label { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.uyari-kademe .button { justify-self: end; }

/* Uyarı önizlemesi — salt görsel kart */
.uyari-onizleme { display: grid; }
.uyari-kart {
  display: grid; gap: 10px; padding: 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent-solid, var(--accent));
  border-radius: var(--r-sm); background: var(--surface-2);
}
.uyari-onizleme-baslik { margin: 0; color: var(--text); }
.uyari-onizleme-liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.uyari-onizleme-liste dt { color: var(--text-dim); font-size: 13px; }
.uyari-onizleme-liste dd { margin: 0; color: var(--text); }

/* İtiraz durumu satırı (Moderasyon kayıtlarında) */
.uyari-itiraz-durum { margin: 6px 0 0; color: var(--accent-strong, var(--accent)); }

/* ===== OTOMATİK ROL ======================================================
   Seçilen roller etiket (çip) olarak gösterilir; mevcut kart/kenarlık/yarıçap
   dili korunur. */
.otomatik-rol-ayarlari { display: grid; gap: 16px; }
.ayar-basligi { margin: 0; color: var(--text); font-weight: 700; font-size: 14px; }
.otomatik-rol-secici { display: grid; gap: 10px; }
.rol-cipleri { display: flex; flex-wrap: wrap; gap: 8px; }
.rol-cipi {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-full); background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 600; max-width: 100%;
}
.rol-cipi > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rol-cipi-kaldir {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; min-height: 22px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.rol-cipi-kaldir:hover { border-color: var(--accent-solid, var(--accent)); color: var(--text); }
.rol-ekle-satiri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rol-ekle-satiri select { max-width: min(100%, 320px); }

/* Gecikme seçici */
.otomatik-rol-gecikme { display: grid; gap: 10px; }
.otomatik-rol-gecikme-ozel { display: grid; }

/* Gelişmiş ayarlar (iç içe katlanır bölüm) */
.ayar-gelismis {
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 0 14px;
}
.ayar-gelismis[open] { padding-bottom: 14px; }
.ayar-gelismis > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 0;
  color: var(--text); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; list-style: none;
}
.ayar-gelismis > summary::-webkit-details-marker { display: none; }
.ayar-gelismis > summary::before {
  flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim); transform: rotate(-45deg); transition: transform var(--t-fast);
}
.ayar-gelismis[open] > summary::before { transform: rotate(45deg); }
.ayar-gelismis-govde { display: grid; gap: 14px; }

/* ===== MODERASYON MERKEZİ ================================================
   Kayıt/itiraz yönetimi. Mevcut koyu tema, mavi vurgu, kenarlık ve yarıçap
   değişkenleri kullanılır; yeni sabit renk tanımlanmaz. */
.moderation-merkez { display: grid; gap: 18px; }
.moderation-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.moderation-kart {
  display: grid; gap: 4px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.moderation-kart-deger { font-size: 26px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.moderation-kart-etiket { color: var(--text-dim); font-size: 13px; }
.moderation-kart-ipucu { color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* "Bu sayfa ne işe yarar?" rehberi */
.moderation-rehber {
  display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent, var(--border-strong));
  border-radius: var(--r-sm); background: var(--surface-2);
}
.moderation-rehber-baslik { margin: 0; color: var(--text); font-weight: 600; }
.moderation-rehber-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.moderation-rehber-liste strong { color: var(--text); }
.moderation-rehber-ayar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.moderation-rehber-ayar .secondary { width: auto; min-height: 34px; padding: 6px 12px; font-size: 13px; }

/* Sekmeler */
.moderation-sekmeler { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }
.moderation-sekme {
  padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--text-muted); font-weight: 700; font-size: 14px; cursor: pointer;
}
.moderation-sekme:hover { color: var(--text); background: var(--surface-hover); }
.moderation-sekme.aktif { color: var(--text); border-bottom-color: var(--accent); }
.moderation-sekme-rozet {
  margin-left: 8px; padding: 1px 8px; border: 1px solid var(--accent);
  border-radius: var(--r-full); background: var(--accent-soft); font-size: 12px;
}

/* Araç çubuğu: arama + filtreler + yenile */
.moderation-araclar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px; align-items: end;
}
.moderation-araclar label { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.moderation-araclar label:first-child { grid-column: span 2; }
.moderation-araclar .button { justify-self: start; }

/* Tablo */
.moderation-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.moderation-tablo th {
  padding: 10px 12px; text-align: left; color: var(--text-dim);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.moderation-tablo td { padding: 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.moderation-satir { cursor: pointer; }
.moderation-satir:hover td { background: var(--surface-hover); }
.moderation-islemler { white-space: nowrap; }
.moderation-islemler .button { margin-right: 6px; }

/* Durum rozetleri */
.moderation-rozet {
  display: inline-block; padding: 3px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--r-full); font-size: 12px; font-weight: 700; color: var(--text-muted);
}
.moderation-rozet[data-durum="aktif"] { border-color: var(--ok); background: var(--ok-soft); color: var(--text); }
.moderation-rozet[data-durum="uygulandi"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.moderation-rozet[data-durum="bekliyor"] { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }
.moderation-rozet[data-durum="kaldirildi"] { border-color: var(--border); background: var(--surface); color: var(--text-dim); }
.moderation-rozet[data-durum="suresi_doldu"] { border-color: var(--border); background: var(--surface); color: var(--text-dim); }

/* Sayfalama */
.moderation-sayfalama {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.moderation-sayfa-bilgi { color: var(--text-dim); font-size: 13px; }
.moderation-sayfa-dugmeleri { display: flex; flex-wrap: wrap; gap: 6px; }
.moderation-sayfa-dugmeleri .button.aktif { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* Boş durum */
.moderation-bos {
  padding: 22px; border: 1px dashed var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-muted); text-align: center;
}

/* Detay / onay katmanı (modal) */
.moderation-katman {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(14, 16, 19, .72);
}
.moderation-katman[hidden] { display: none; }
.moderation-detay {
  width: min(560px, 100%); max-height: 85vh; overflow-y: auto;
  display: grid; gap: 12px; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1, 0 10px 30px rgba(0, 0, 0, .45));
}
.moderation-detay h3 { margin: 0; }
.moderation-detay-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
.moderation-detay-etiket { color: var(--text-dim); font-size: 13px; }
.moderation-detay-satir strong { text-align: right; overflow-wrap: anywhere; }
.moderation-detay-eylemler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* Komut rehberi */
.moderation-komut-liste { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.moderation-komut-liste dt { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.moderation-komut-liste dd { margin: 0; color: var(--text-muted); font-size: 13px; }

/* Dar ekranda tablo yatay kaydırılır (sayfa bozulmaz). */
.moderation-icerik { overflow-x: auto; }
@media (max-width: 700px) {
  .moderation-araclar label:first-child { grid-column: auto; }
  .moderation-detay-satir { grid-template-columns: 1fr; }
  .moderation-detay-satir strong { text-align: left; }
}
/* Panel giveaway composer: independent from the feature settings form. */
.giveaway-planner { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.giveaway-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; padding: 1rem; background: var(--surface-2); color: var(--text); border-radius: 10px; }
.giveaway-row { padding: 1rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.giveaway-row p { white-space: pre-wrap; }
.social-editor { min-width: 0; }
.social-accounts { display: grid; gap: 18px; margin-block: 18px; }
.social-account { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; }
.social-account legend { padding-inline: 8px; font-weight: 650; }
.social-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.social-account label { display: grid; gap: 7px; min-width: 0; }
.social-account .checkbox-field { display: flex; }
.social-preview { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 6px; }
.social-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.social-editor > button { margin: 0 8px 8px 0; }
@media (max-width: 700px) { .social-grid { grid-template-columns: 1fr; } .social-account { padding: 12px; } }

/* Müzik yönetimi kartı (Müzik bölümü). Panelin ortak dilini kullanır:
   yüzey + ince kenarlık kartı, secondary düğmeler, durum rozeti.
   Animasyon, gradient ve büyük görsel yok. */
.music-panel { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.music-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.music-panel-head h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 700; }
.music-panel-head p { margin: 2px 0 0; font-size: 13px; }
.music-panel-body { display: grid; gap: 12px; min-width: 0; }
.music-status { margin: 0; font-size: 13px; }
.music-status:empty { display: none; }
.music-empty { margin: 0; font-size: 14px; }

.music-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.music-cover { display: grid; flex: 0 0 56px; width: 56px; height: 56px; place-items: center; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); }
.music-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-now-info { display: grid; gap: 2px; min-width: 0; }
.music-title { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.music-artist { overflow: hidden; color: var(--text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.music-meta { color: var(--text-dim); font-size: 12px; }

.music-progress { position: relative; height: 4px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-3); }
.music-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--accent); }
.music-times { display: flex; justify-content: space-between; margin-top: -4px; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.music-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.music-buttons, .music-inline-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.music-button { gap: 6px; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.music-button:hover, .music-icon-button:hover { transform: none; }
.music-danger { color: var(--danger); }
.music-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-field { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.music-field select { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.music-field-label { color: var(--text-muted); }
.music-volume input[type="range"] { width: 120px; accent-color: var(--accent); }
.music-volume-value { min-width: 4ch; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.music-queue-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.music-queue-head h4 { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.music-queue-head .muted { font-size: 12px; }
.music-queue { display: grid; margin: 0; padding: 0; list-style: none; }
.music-queue-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.music-queue-row:last-child { border-bottom: 0; }
.music-queue-index { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.music-queue-text { display: grid; gap: 2px; min-width: 0; }
.music-queue-text strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.music-queue-text small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.music-icon-button { width: 34px; min-height: 34px; padding: 0; border-color: var(--border); color: var(--text-muted); }
.music-icon-button:hover { color: var(--danger); }

@media (max-width: 560px) {
  .music-panel { padding: 14px; }
  .music-cover { flex-basis: 48px; width: 48px; height: 48px; }
  .music-controls { flex-direction: column; align-items: stretch; }
  .music-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .music-inline-settings { justify-content: space-between; }
  .music-volume input[type="range"] { width: 100%; min-width: 90px; }
  .music-volume { flex: 1 1 160px; }
}
/* Müzik ayar grupları: aç/kapat anahtarı tam satır, alanlar yan yana. */
.music-settings > .checkbox-field { grid-column: 1 / -1; }
/* Başlıklı ayar grupları (Anti-Spam, Moderasyon): anahtarlar ve çoklu
   seçiciler tam satır, sayısal alanlar geniş ekranda yan yana. */
.ayar-izgara > .checkbox-field, .ayar-izgara > .channel-picker-field { grid-column: 1 / -1; }

/* ===== İSTATİSTİKLER =======================================================
   Grafikler SVG ile çizilir; renkler mevcut tema değişkenlerinden gelir. */
.istatistik-alani { display: grid; gap: 18px; }
/* Grid öğeleri SVG genişliğine göre büyüyüp sayfayı yana taşırmasın. */
.istatistik-alani, .istatistik-icerik, .istatistik-icerik > * { min-width: 0; }
.istatistik-arac { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }
.istatistik-icerik { display: grid; gap: 18px; }
.istatistik-grafik {
  margin: 0; padding: 16px; display: grid; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.istatistik-grafik figcaption { color: var(--text); font-weight: 600; font-size: 14px; }
.istatistik-grafik-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.istatistik-svg { overflow-x: auto; }
.istatistik-svg svg { display: block; width: 100%; height: auto; }
.istatistik-svg .eksen-yazi { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.istatistik-svg .eksen-kilavuz { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 4; }
.istatistik-svg .eksen-sifir { stroke: var(--border-strong); stroke-width: 1; }
.istatistik-svg .istatistik-dokunma { fill: transparent; }
.istatistik-nokta { cursor: pointer; outline: none; }
.istatistik-nokta.secili .istatistik-dokunma, .istatistik-nokta:focus-visible .istatistik-dokunma { fill: var(--surface-3); }
.istatistik-okuma { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.istatistik-okuma strong { color: var(--text); }
.istatistik-dipnot { margin: 0; font-size: 12px; }

.seri-mesaj { fill: var(--accent); background: var(--accent); }
.seri-katilan { fill: var(--ok); background: var(--ok); }
.seri-ayrilan { fill: var(--danger); background: var(--danger); }
.istatistik-lejant { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: 13px; }
.istatistik-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.istatistik-lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.istatistik-kanallar { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.istatistik-kanallar h3 { margin: 0 0 12px; font-size: 14px; }
.istatistik-kanal-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.istatistik-kanal-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.istatistik-kanal-ad { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.istatistik-kanal-sayi { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.istatistik-kanal-cubuk { grid-column: 1 / -1; height: 6px; border-radius: var(--r-full); background: var(--accent); }

/* ===== DESTEK TALEBİ DÖKÜMÜ ================================================ */
.dokum { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.dokum > summary { padding: 10px 12px; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.dokum-govde { display: grid; gap: 10px; padding: 0 12px 12px; }
.dokum-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.dokum-liste li { padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-deep, transparent); border: 1px solid var(--border-subtle); }
.dokum-liste li.dokum-bot { opacity: .8; }
.dokum-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 12px; }
.dokum-bas strong { color: var(--text); }
.dokum-bas time { color: var(--text-dim); }
.dokum-liste p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dokum-ek { font-size: 12px; margin-right: 10px; }
.dokum-govde .secondary { width: auto; justify-self: start; }

/* ===== MODERATÖR GÖRÜNÜMÜ ================================================== */
.moderator-gorunum { display: grid; gap: 18px; max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.moderator-gorunum h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); }

/* "Test et" düğmesi: düğme + durum metni yan yana; dar ekranda alt alta. */
.test-mesaj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.test-mesaj-durum:empty { display: none; }

/* Bağlantı sorunlu: bot çalışıyor ama Fluxer bağlantısı 1 dk'dan uzun kopuk. */
.status-line.warning { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }
.status-line.warning .status-dot { border-color: var(--warn); background: var(--warn); }

/* Kurulum rehberi: yeni sunucuda temel adımlar ve durumları. */
.kurulum-rehberi { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--accent, var(--border)); border-radius: var(--r-md); background: var(--surface); }
.kurulum-rehberi-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kurulum-rehberi-baslik h2 { margin: 0; font-size: 16px; }
.kurulum-rehberi-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kurulum-rehberi-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-subtle, var(--border)); border-radius: var(--r-md); }
.kurulum-rehberi-liste li > div { display: grid; gap: 2px; min-width: 0; }
.kurulum-rehberi-liste li.bitti { opacity: .7; }
@media (max-width: 560px) { .kurulum-rehberi-liste li { flex-direction: column; align-items: stretch; } }

/* Dil düğmesi (TR/EN): her sayfada sol altta sabit; kaydetme çubuğunun
   üstünde kalır, dar ekranda güvenli alana göre kayar. */
/* TR/EN dil düğmesi: üst başlıkta, sağdaki eylem düğmesinin solunda. */
.dil-dugmesi { flex: 0 0 auto; width: auto; min-height: 38px; margin-left: auto; padding: 6px 12px; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-full, 999px); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.dil-dugmesi:hover { background: var(--surface-hover, var(--surface)); }
.dil-dugmesi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Başlık yan yana iki düğme için sıkışmasın: düğme ile eylem arası dar. */
.home-header .dil-dugmesi, .dashboard-header .dil-dugmesi, .settings-header .dil-dugmesi, .loading-header .dil-dugmesi { margin-right: -10px; }
/* Başlığı olmayan ekran: sağ üstte sabit. */
.dil-dugmesi.serbest { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 60; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
@media (max-width: 500px) { .dil-dugmesi { min-height: 34px; padding: 5px 10px; font-size: 12px; } }

/* Kural listeleri (tepki rolü, özel komut, duyuru, otomatik yanıt, davet ödülü):
   boş kutular gizlenir; "Ekle" sonrakini açar, "Kaldır" kutuyu boşaltır. */
.kayit-listesi { display: grid; gap: 12px; }
.kayit-listesi fieldset[hidden], .kayit-listesi .kayit-ekle[hidden] { display: none; }
.kayit-listesi .kayit-kaldir, .kayit-listesi .kayit-ekle { width: auto; justify-self: start; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.kayit-listesi .kayit-ekle { border-style: dashed; }

/* Değişiklik geçmişi: panelden yapılan işlemler, en yeni üstte. */
.panel-gecmisi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.panel-gecmisi-oge { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.panel-gecmisi-oge strong { overflow-wrap: anywhere; }
.panel-gecmisi-oge time { font-size: 12px; white-space: nowrap; }
.panel-gecmisi-ayrinti { grid-column: 1 / -1; margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }

/* Ayar yedeği: indir / yükle düğmeleri. Dosya girdisi görünmez ama klavyeyle odaklanabilir. */
.ayar-yedegi { display: grid; gap: 10px; margin-bottom: 18px; }
.ayar-yedegi-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.ayar-yedegi-dugmeler .button, .ayar-yedegi-dugmeler button { width: auto; }
.dosya-sec { position: relative; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dosya-sec:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.gorunmez-dosya { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Karşılama kartı teması ve önizlemesi. */
.kart-tema { display: grid; gap: 10px; }
.kart-tema-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kart-onizleme { width: 100%; max-width: 500px; height: auto; border-radius: 10px; border: 1px solid var(--border); }

/* Sunucu özeti kartları (ayar sayfasının başı). Tıklanabilir olanlar bölüm açar. */
.sunucu-ozeti { margin: 0 0 16px; }
.sunucu-ozeti .ozet-baglanti { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.sunucu-ozeti .ozet-baglanti:hover { border-color: var(--border-strong); }
.sunucu-ozeti .ozet-baglanti:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }