/* =========================================================================
   WESTERØS Kontrol Paneli — tasarım sistemi (v2)
   iOS / iPadOS dili: sunucu banner'ından duvar kâğıdı, cam kenar çubuğu,
   gruplanmış listeler, sade düğmeler (parıltı/renkli gölge YOK), yaylı geçişler.
   Performans: bulanıklık hazır görselde (sunucuda üretilir); backdrop-filter
   yalnızca kenar çubuğu, üst çubuk ve sayfa perdesinde.
   ========================================================================= */

:root {
  --blurple: #5865f2;
  --blurple-2: #6d78f4;
  --mavi: #0a84ff;
  --yesil: #30d158;
  --kirmizi: #ff453a;
  --turuncu: #ff9f0a;
  --sari: #ffd60a;
  --altin: #e8b04a;
  --pembe: #ff375f;
  --kiraz: #ff2d55;
  --mor: #bf5af2;
  --indigo: #5e5ce6;
  --camgobegi: #40c8e0;
  --gri: #8e8e93;

  --zemin: #0a0a0f;
  --perde-ust: rgba(10, 10, 16, 0.74);
  --perde-alt: rgba(10, 10, 16, 0.9);
  --yuzey: rgba(24, 24, 31, 0.82);
  --yuzey-kati: #1b1b22;
  --yuzey-ust: rgba(38, 38, 48, 0.96);
  --vurgu: rgba(255, 255, 255, 0.05);
  --cam: rgba(20, 20, 27, 0.62);
  --cizgi: rgba(255, 255, 255, 0.08);
  --cizgi-guclu: rgba(255, 255, 255, 0.14);
  --metin: #f5f5f7;
  --metin-2: rgba(235, 235, 245, 0.64);
  --metin-3: rgba(235, 235, 245, 0.36);
  --dolgu: rgba(120, 120, 128, 0.22);
  --dolgu-2: rgba(120, 120, 128, 0.34);
  --golge: 0 24px 60px rgba(0, 0, 0, 0.5);
  --golge-hafif: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.18);

  --r: 20px;
  --r-buyuk: 28px;
  --yay: cubic-bezier(0.32, 1.28, 0.5, 1);
  --yumusak: cubic-bezier(0.25, 0.8, 0.25, 1);
  --yazi: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --baslik-yazi: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

[data-tema='acik'] {
  --mavi: #007aff;
  --yesil: #34c759;
  --kirmizi: #ff3b30;
  --turuncu: #ff9500;
  --sari: #ffcc00;
  --altin: #c98f16;
  --pembe: #ff2d55;
  --mor: #af52de;
  --indigo: #5856d6;
  --camgobegi: #32ade6;

  --zemin: #eceef5;
  --perde-ust: rgba(242, 242, 247, 0.72);
  --perde-alt: rgba(242, 242, 247, 0.9);
  --yuzey: rgba(255, 255, 255, 0.86);
  --yuzey-kati: #ffffff;
  --yuzey-ust: #ffffff;
  --vurgu: rgba(0, 0, 0, 0.035);
  --cam: rgba(255, 255, 255, 0.66);
  --cizgi: rgba(60, 60, 67, 0.12);
  --cizgi-guclu: rgba(60, 60, 67, 0.2);
  --metin: #111114;
  --metin-2: rgba(60, 60, 67, 0.7);
  --metin-3: rgba(60, 60, 67, 0.4);
  --dolgu: rgba(120, 120, 128, 0.12);
  --dolgu-2: rgba(120, 120, 128, 0.2);
  --golge: 0 24px 60px rgba(40, 40, 70, 0.18);
  --golge-hafif: 0 1px 2px rgba(40, 40, 70, 0.06), 0 8px 24px rgba(40, 40, 70, 0.07);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.4;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip: yatay taşmayı keser ama (hidden gibi) kaydırma kutusu açmaz — yapışkan kenar çubuğu ve üst çubuk çalışır */
  overflow-x: clip;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: var(--mavi);
  text-decoration: none;
}
::selection {
  background: color-mix(in srgb, var(--blurple) 45%, transparent);
}
:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Duvar kâğıdı ---------- */
.duvar {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--zemin) url('/img/duvar.jpg') center / cover no-repeat;
}
.duvar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--perde-ust), var(--perde-alt));
}
.sus {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}
[data-tema='acik'] .sus {
  opacity: 0.35;
}
.sus-1 {
  width: 220px;
  right: -40px;
  top: 90px;
}
.sus-2 {
  width: 170px;
  left: 300px;
  bottom: -40px;
}
.sus-3 {
  width: 140px;
  right: 22%;
  bottom: -30px;
}
#uygulama {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.acilis {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.acilis-kup {
  width: 92px;
  animation: nefes 1.6s ease-in-out infinite;
}
@keyframes nefes {
  50% {
    transform: scale(1.07) rotate(-4deg);
  }
}
.cam {
  background: var(--cam);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  border: 1px solid var(--cizgi);
}

/* =========================================================================
   Giriş
   ========================================================================= */
.giris {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
}
.giris-maskot {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.giris-maskot.wumpus {
  width: min(290px, 30vw);
  right: max(3vw, calc(50% - 640px));
  bottom: 6vh;
  animation: suzul 6s ease-in-out infinite;
}
.giris-maskot.kup {
  width: min(160px, 18vw);
  left: max(4vw, calc(50% - 620px));
  top: 11vh;
  animation: suzul 7s ease-in-out infinite reverse;
}
.giris-maskot.nelly {
  width: min(170px, 18vw);
  left: max(7vw, calc(50% - 560px));
  bottom: 9vh;
  animation: suzul 8s ease-in-out infinite 1s;
}
@keyframes suzul {
  50% {
    transform: translateY(-16px) rotate(2deg);
  }
}
.giris-kart {
  position: relative;
  width: min(420px, 100%);
  border-radius: 32px;
  padding: 36px 30px 26px;
  text-align: center;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  animation: kart-gir 0.7s var(--yay) both;
}
@keyframes kart-gir {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}
.giris-ikon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  margin: 0 auto 16px;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--cizgi-guclu), 0 12px 30px rgba(0, 0, 0, 0.35);
  background: var(--dolgu);
}
.giris h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.giris-alt {
  color: var(--metin-2);
  margin: 4px 0 24px;
}
.form-alan {
  text-align: left;
  margin-bottom: 12px;
}
.form-alan label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-2);
  margin: 0 0 6px 4px;
}
.girdi-sar {
  position: relative;
}
.girdi-sar > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--metin-3);
  pointer-events: none;
}
.girdi-sar .girdi {
  padding-left: 42px;
}
.goz-dugme {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--metin-3);
}
.goz-dugme:hover {
  color: var(--metin);
  background: var(--dolgu);
}
.goz-dugme svg {
  width: 18px;
  height: 18px;
}
.dugme.buyuk {
  height: 50px;
  border-radius: 15px;
  font-size: 16px;
  width: 100%;
  margin-top: 8px;
}
.discord-dugme {
  width: 100%;
  height: 50px;
  border-radius: 15px;
  background: var(--blurple);
  color: #fff;
  font-weight: 650;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform 0.25s var(--yay), background 0.2s;
}
.discord-dugme:hover:not(:disabled) {
  background: var(--blurple-2);
}
.discord-dugme:active:not(:disabled) {
  transform: scale(0.97);
}
.discord-dugme:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.discord-dugme svg {
  width: 24px;
  height: 18px;
}
.giris-yol {
  display: flex;
  gap: 14px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--dolgu);
  align-items: center;
}
.giris-yol p {
  margin: 0;
  font-size: 13.5px;
  color: var(--metin-2);
}
.giris-yol strong {
  color: var(--metin);
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}
.giris-yol .simge-kare {
  color: #fff;
}
.giris-ayrac {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--metin-3);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 20px 0;
}
.giris-ayrac::before,
.giris-ayrac::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cizgi);
}
.giris-hata {
  margin: -6px 0 16px;
  padding: 11px 13px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
  color: color-mix(in srgb, var(--kirmizi) 75%, var(--metin));
  font-size: 13.5px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  animation: salla 0.4s;
}
@keyframes salla {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.giris-not {
  margin-top: 18px;
  font-size: 12px;
  color: var(--metin-3);
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
}
.giris-not svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.basari-tik {
  width: 80px;
  height: 80px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: var(--yesil);
  display: grid;
  place-items: center;
  animation: tik-gir 0.6s var(--yay) both;
}
.basari-tik svg {
  width: 42px;
  height: 42px;
  color: #fff;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: tik-ciz 0.45s 0.25s var(--yumusak) forwards;
}
@keyframes tik-gir {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}
@keyframes tik-ciz {
  to {
    stroke-dashoffset: 0;
  }
}

/* =========================================================================
   Kabuk
   ========================================================================= */
.kabuk {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}
.kenar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 12px 0 12px 12px;
  z-index: 20;
}
.kenar-ic {
  height: 100%;
  border-radius: var(--r-buyuk);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kenar-ust {
  padding: 16px 16px 8px;
}
.sunucu-kimlik {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.sunucu-kimlik img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--dolgu);
  box-shadow: 0 0 0 1px var(--cizgi-guclu);
}
.sunucu-kimlik b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sunucu-kimlik span {
  font-size: 12.5px;
  color: var(--metin-2);
}
.arama {
  position: relative;
}
.arama input {
  width: 100%;
  height: 36px;
  border-radius: 11px;
  border: 0;
  background: var(--dolgu);
  padding: 0 12px 0 34px;
  font-size: 14.5px;
  outline: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.arama input:focus {
  background: var(--dolgu-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 30%, transparent);
}
.arama input::placeholder {
  color: var(--metin-3);
}
.arama > svg {
  position: absolute;
  left: 11px;
  top: 9px;
  width: 17px;
  height: 17px;
  color: var(--metin-3);
}
.arama-sonuc {
  position: absolute;
  left: 0;
  right: 0;
  top: 42px;
  z-index: 30;
  border-radius: 16px;
  padding: 6px;
  max-height: 60vh;
  overflow: auto;
  background: var(--yuzey-ust);
  box-shadow: var(--golge);
  border: 1px solid var(--cizgi);
  animation: acil 0.22s var(--yay);
}
.arama-sonuc button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
}
.arama-sonuc button:hover,
.arama-sonuc button.secili {
  background: var(--dolgu);
}
.arama-sonuc b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.arama-sonuc small {
  color: var(--metin-2);
  font-size: 12px;
}
.arama-bos {
  padding: 14px;
  text-align: center;
  color: var(--metin-2);
  font-size: 13px;
}
@keyframes acil {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
.menu {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 12px;
  scrollbar-width: thin;
}
/*
 * Kenar çubuğu iki tasarımla durur (03.10.2026): `klasik` (sade, tek satır — şu an açık) ve `mert2` (iki satırlı,
 * ikon kutulu, "5/12 açık" + doluluk çubuğu). Hangisi: `MENU_TASARIMI` (app.js). Ortak seçiciler sınıfla kapsanır.
 */
.klasik .menu-bolum {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 10px 6px;
}
.klasik .menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 10px;
  border-radius: 11px;
  color: var(--metin);
  font-weight: 500;
  font-size: 14.5px;
  transition: background 0.15s;
}
.klasik .menu a:hover {
  background: var(--vurgu);
}
.klasik .menu a.etkin {
  background: var(--dolgu-2);
  font-weight: 600;
}
/* Tek renk ikonlar (renkli kareler yerine) — kenar çubuğu sade kalsın */
.menu-ikon {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--metin-2);
  transition: color 0.15s;
}
.menu a.etkin .menu-ikon {
  color: var(--metin);
}
.menu-sayi {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.mert2 .menu-bolum {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 10px 6px;
}
/* Bölüm başlığından sağa uzanan ince çizgi + sağda küçük özet ("24/53 açık") */
.mert2 .menu-bolum::after {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--cizgi);
}
.mert2 .menu-bolum span {
  order: 2;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
/*
 * mert2 menü öğesi (02.10.2026): TEK RENK — ikon nötr bir kutuda, renk yok. Kategoriler iki satır: ad + "5/12 açık" ve
 * altında ince doluluk çubuğu. Etkin öğenin solunda işaret çubuğu. Hareket yalnızca transform / opacity.
 */
.mert2 .menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px;
  margin-bottom: 2px;
  border-radius: 13px;
  color: var(--metin);
  font-size: 14.5px;
  transition: background 0.18s;
}
.mert2 .menu a::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 4px;
  height: 22px;
  margin-top: -11px;
  border-radius: 0 4px 4px 0;
  background: var(--metin);
  opacity: 0;
  transform: scaleY(0.3);
  transition: transform 0.3s var(--yay), opacity 0.2s;
}
.mert2 .menu a:hover {
  background: var(--vurgu);
}
.mert2 .menu a.etkin {
  background: var(--dolgu-2);
}
.mert2 .menu a.etkin::before {
  opacity: 1;
  transform: none;
}
.menu-kutu {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--dolgu);
  color: var(--metin-2);
  transition: transform 0.3s var(--yay), background 0.18s, color 0.18s;
}
.menu-kutu svg {
  width: 18px;
  height: 18px;
}
.mert2 .menu a:hover .menu-kutu {
  transform: scale(1.06);
  color: var(--metin);
}
.mert2 .menu a.etkin .menu-kutu {
  background: var(--metin);
  color: var(--zemin, #0b0b10);
}
.menu-metin {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.menu-metin b {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mert2 .menu a.etkin .menu-metin b {
  font-weight: 700;
}
.menu-metin small {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mert2 .menu a.iki-satir {
  padding-top: 6px;
  padding-bottom: 7px;
}
/* Alçak ekranda menü kayar ama kaydırma çubuğu görünmez (liste kısa, çubuk kalabalık ediyordu) */
.mert2 .menu {
  scrollbar-width: none;
}
.mert2 .menu::-webkit-scrollbar {
  display: none;
}
/* Kaç modül açık: nötr ince çubuk (soldan dolar) */
.menu-cubuk {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--dolgu-2);
  overflow: hidden;
}
.menu-cubuk::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--metin-2);
  transform-origin: left;
  transform: scaleX(var(--oran, 0));
  transition: transform 0.6s var(--yumusak);
}
.mert2 .menu a.etkin .menu-cubuk::after {
  background: var(--metin);
}
.menu-ok {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--metin-3);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.25s var(--yay);
}
.mert2 .menu a:hover .menu-ok,
.mert2 .menu a.etkin .menu-ok {
  opacity: 1;
  transform: none;
}
/* Açık ama çalışmayan modül var — menüdeki TEK renkli işaret, yalnızca sorun varken */
.menu-dikkat {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--turuncu);
}
.menu-rozet {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 16%, transparent);
}
/*
 * mert3 menü (03.10.2026, kullanıcı: mert2 "uyumsuz duruyor ve karışık"): TEK RİTİM — her satır aynı yükseklikte, tek satır,
 * ikon kutusuz; sağda tek sessiz sayı hapı ("5/12" = açık / şalterli modül), sorun varsa önünde turuncu nokta. Etkin öğe: nötr
 * zemin + satırın İÇİNDE blurple çizgi + blurple ikon (menüdeki tek renk — Discord kimliği). Ok, çubuk, alt yazı YOK.
 */
.mert3 .menu {
  padding: 4px 10px 12px;
  scrollbar-width: none;
}
.mert3 .menu::-webkit-scrollbar {
  display: none;
}
.mert3 .menu-bolum {
  font-size: 11px;
  font-weight: 600;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 12px 6px;
}
.mert3 .menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 10px 0 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--metin-2);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.mert3 .menu a:hover {
  background: var(--vurgu);
  color: var(--metin);
}
.mert3 .menu a.etkin {
  background: var(--dolgu);
  color: var(--metin);
  font-weight: 600;
}
.mert3 .menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blurple);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.15s, transform 0.2s var(--yumusak);
}
.mert3 .menu a.etkin::before {
  opacity: 1;
  transform: none;
}
.m3-ikon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--metin-3);
  transition: color 0.15s;
}
.mert3 .menu a:hover .m3-ikon {
  color: var(--metin-2);
}
.mert3 .menu a.etkin .m3-ikon {
  color: var(--blurple-2);
}
.m3-ad {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m3-sayi {
  flex: none;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--dolgu);
  color: var(--metin-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mert3 .menu a.etkin .m3-sayi {
  color: var(--metin-2);
}
.m3-sayi.uyari {
  min-width: 20px;
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 16%, transparent);
}
.m3-nokta {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: -4px;
  border-radius: 50%;
  background: var(--turuncu);
}
/* Sunucu kartındaki durum satırı: "1.984 üye · 7/7 bot" */
.sunucu-durum {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.durum-nokta {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--metin-3);
}
.durum-nokta.iyi {
  background: var(--yesil);
}
.durum-nokta.uyari {
  background: var(--turuncu);
}
.simge-kare {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--renk, var(--gri));
}
.simge-kare svg {
  width: 17px;
  height: 17px;
}
.simge-kare.buyuk {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.simge-kare.buyuk svg {
  width: 22px;
  height: 22px;
}
.r-mavi { --renk: var(--mavi); }
.r-yesil { --renk: var(--yesil); }
.r-kirmizi { --renk: var(--kirmizi); }
.r-turuncu { --renk: var(--turuncu); }
.r-sari { --renk: #e5b400; }
.r-altin { --renk: var(--altin); }
.r-pembe { --renk: var(--pembe); }
.r-kiraz { --renk: var(--kiraz); }
.r-mor { --renk: var(--mor); }
.r-indigo { --renk: var(--indigo); }
.r-camgobegi { --renk: var(--camgobegi); }
.r-gri { --renk: #8e8e93; }
.r-blurple { --renk: var(--blurple); }

.kenar-alt {
  padding: 8px;
  border-top: 1px solid var(--cizgi);
  position: relative;
}
.kullanici-kart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.kullanici-kart:hover {
  background: var(--vurgu);
}
.kullanici-kart img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dolgu);
}
.kullanici-kart b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kullanici-kart small {
  font-size: 12px;
  color: var(--metin-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.kullanici-kart small svg {
  width: 13px;
  height: 13px;
  color: var(--altin);
}
.kk-metin {
  flex: 1;
  min-width: 0;
}
.kullanici-kart > svg {
  width: 17px;
  height: 17px;
  color: var(--metin-3);
}
.acilir-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  border-radius: 16px;
  padding: 6px;
  background: var(--yuzey-ust);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  animation: acil 0.22s var(--yay);
  z-index: 40;
}
.acilir-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
}
.acilir-menu button:hover {
  background: var(--dolgu);
}
.acilir-menu button svg {
  width: 18px;
  height: 18px;
  color: var(--metin-2);
}
.acilir-menu .tehlike,
.acilir-menu .tehlike svg {
  color: var(--kirmizi);
}
.acilir-menu hr {
  border: 0;
  height: 1px;
  background: var(--cizgi);
  margin: 4px 8px;
}
.tema-secici {
  display: flex;
  gap: 4px;
  padding: 4px 4px 6px;
}
.tema-secici button {
  flex: 1;
  justify-content: center;
  font-size: 12.5px;
  padding: 7px 4px;
  background: var(--dolgu);
}
.tema-secici button.secili {
  background: var(--metin);
  color: var(--zemin);
}
.tema-secici button.secili svg {
  color: var(--zemin);
}

/* ---------- İçerik ---------- */
.icerik {
  min-width: 0;
  padding: 0 40px 90px;
}
.icerik-ic {
  max-width: 1000px;
  margin: 0 auto;
}
.ust-cubuk {
  position: sticky;
  top: 0;
  z-index: 15;
  height: 56px;
  margin: 0 -40px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
.ust-cubuk.dolu {
  background: color-mix(in srgb, var(--zemin) 70%, transparent);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom-color: var(--cizgi);
}
.ust-baslik {
  font-weight: 650;
  font-size: 15.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.3s var(--yumusak);
}
.ust-cubuk.dolu .ust-baslik {
  opacity: 1;
  transform: none;
}
.menu-dugme {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  place-items: center;
  background: var(--dolgu);
}
.menu-dugme svg {
  width: 19px;
  height: 19px;
}
.buyuk-baslik {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 22px;
  animation: yukari 0.45s var(--yumusak) both;
}
.buyuk-baslik h1 {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}
.buyuk-baslik p {
  margin: 4px 0 0;
  color: var(--metin-2);
}
@keyframes yukari {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.sayfa-gecis {
  animation: sayfa-gir 0.4s var(--yumusak) both;
}
@keyframes sayfa-gir {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- Bölüm kapağı ---------- */
.kapak {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 168px;
  padding: 26px 28px;
  margin: 4px 0 26px;
  border-radius: var(--r-buyuk);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--renk) 22%, transparent), transparent 60%),
    var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
  overflow: hidden;
  animation: yukari 0.45s var(--yumusak) both;
}
.kapak .simge-kare {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}
.kapak .simge-kare svg {
  width: 30px;
  height: 30px;
}
.kapak-metin {
  flex: 1;
  min-width: 0;
  max-width: 62%;
  position: relative;
  z-index: 1;
}
.kapak h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.1;
}
.kapak p {
  margin: 6px 0 12px;
  color: var(--metin-2);
}
.kapak-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kapak-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--dolgu);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-2);
}
.kapak-cip svg {
  width: 13px;
  height: 13px;
}
.kapak-cip.mavi {
  color: var(--mavi);
  background: color-mix(in srgb, var(--mavi) 14%, transparent);
}
/*
 * PRO rozeti (03.10.2026, kullanıcı: "PRO yazıları çok amatörce duruyor"): dolu mor-pembe kutu yerine İNCE GEÇİŞLİ ÇERÇEVE
 * + çok hafif mor zemin, solda geçişli küçük elmas (üst taç açık), "PRO" geçişli yazı, geniş harf aralığı. Parıltı / gölge yok.
 * Çerçeve maskeyle çizilir (içi boş) → kartın zemini görünür. Ciddi'de köşeli, Canlı'da hap.
 */
.rozet-pro {
  --pro-gecis: linear-gradient(115deg, #a294ff 0%, #c98bff 46%, #ff86b8 100%);
  --pro-zemin: color-mix(in srgb, #a16bff 12%, transparent);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: none;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--pro-zemin);
}
[data-tema='acik'] .rozet-pro {
  --pro-gecis: linear-gradient(115deg, #5b45f0 0%, #9a3ad8 50%, #e0306f 100%);
  --pro-zemin: color-mix(in srgb, #8a4dff 8%, transparent);
}
.rozet-pro {
  gap: 4px;
  height: 19px;
  padding: 0 7px 0 6px;
  margin-left: 8px;
  border-radius: 99px;
  font-family: var(--baslik-yazi);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
}
.rozet-pro.kucuk {
  gap: 3px;
  height: 15px;
  padding: 0 5px 0 4px;
  margin-left: 5px;
  font-size: 8px;
  letter-spacing: 0.12em;
}
/* Geçişli ince çerçeve — içi maskeyle oyulur */
.rozet-pro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--pro-gecis);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.75;
}
.rozet-pro b {
  font-weight: 800;
  background: var(--pro-gecis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Harf aralığının sondaki boşluğu — yazı ortada dursun */
.rozet-pro b {
  margin-right: -0.14em;
}
/* Elmas: üst taç açık şerit + geçişli gövde (tuval yok, yalnızca CSS) */
/* Özel bot kutusu (Sunucularım): durum satırı + token formu */
.hs-izgara + .hs-kutu,
.hs-kutu + .hs-kutu {
  margin-top: 16px;
}
.hs-ozel-durum {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hs-ozel-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--yuzey-2, rgba(255, 255, 255, 0.06));
}
.hs-ozel-avatar.bos {
  display: grid;
  place-items: center;
  color: var(--metin-soluk, #9aa0aa);
}
.hs-ozel-avatar.bos svg {
  width: 22px;
  height: 22px;
}
.hs-ozel-metin {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hs-ozel-metin b small {
  font-weight: 500;
  opacity: 0.6;
}
.hs-ozel-metin > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  opacity: 0.8;
}
.hs-nokta {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80848e;
}
.hs-nokta.yesil {
  background: #23a55a;
}
.hs-nokta.turuncu {
  background: #f0b232;
}
.hs-ozel-eylem {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hs-ozel-form {
  margin-top: 14px;
}
.hs-adimlar {
  flex: 1 1 100%;
  margin: 0 0 4px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}
.hs-ozel-form .hs-not {
  flex: 1 1 100%;
  margin: 0;
}
.hs-ozel-form label {
  flex: 1 1 320px;
}

/* PRO kilidi (paketsiz müşteri sunucusu): rozetin yanında küçük bağlantı; kilitli kayıt alanı soluk ve dokunulmaz */
.pro-kilit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #c084fc 45%, transparent);
  color: #d8b4fe;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.pro-kilit svg {
  flex: none;
  width: 11px;
  height: 11px;
}
a.pro-kilit:hover {
  background: color-mix(in srgb, #c084fc 16%, transparent);
  color: #f3e8ff;
}
.pro-kilit.sade {
  border-color: transparent;
  padding: 0;
  margin-left: 4px;
  font-weight: 500;
}
[data-tema='acik'] .pro-kilit {
  color: #7e22ce;
  border-color: color-mix(in srgb, #7e22ce 35%, transparent);
}
[data-stil='ciddi'] .pro-kilit {
  border-radius: 7px;
}
.pro-kilitli-alan {
  opacity: 0.55;
}
.pro-kilitli-alan input,
.pro-kilitli-alan textarea,
.pro-kilitli-alan button,
.pro-kilitli-alan .salter,
.pro-kilitli-alan .bolumlu {
  pointer-events: none;
}

.pro-tas {
  flex: none;
  width: 9px;
  height: 8px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.5) 0 34%, transparent 34%),
    var(--pro-gecis);
  clip-path: polygon(22% 0, 78% 0, 100% 34%, 50% 100%, 0 34%);
}
.rozet-pro.kucuk .pro-tas {
  width: 7px;
  height: 6px;
}
.kapak-cip.altin {
  color: var(--altin);
  background: color-mix(in srgb, var(--altin) 16%, transparent);
}
.kapak-cip.yesil {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 14%, transparent);
}
.kapak-gorsel {
  position: absolute;
  right: 22px;
  bottom: -10px;
  height: 190px;
  max-width: 34%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
}

/* =========================================================================
   Grup kartı
   ========================================================================= */
.grup {
  margin-bottom: 22px;
  animation: yukari 0.45s var(--yumusak) both;
}
.grup-kart {
  border-radius: var(--r);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
  overflow: hidden;
}
.grup-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 13px 18px;
  border-bottom: 1px solid var(--cizgi);
}
.grup-ust-metin {
  flex: 1;
  min-width: 0;
}
.grup-ust h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.grup-ust p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--metin-2);
}
.baglanti-dugme {
  font-size: 13px;
  color: var(--mavi);
  white-space: nowrap;
}
.baglanti-dugme:hover {
  text-decoration: underline;
}
.durum-hap {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--dolgu);
  color: var(--metin-2);
}
.durum-hap.acik {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 15%, transparent);
}
.durum-hap.uyari {
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 15%, transparent);
}
.grup-govde {
  transition: opacity 0.3s;
}
/* Katlanır grup: başlığa basınca açılır / kapanır (kapalıyken yalnızca başlık + kısa özet) */
.grup.katlanir .grup-ust {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.grup.katlanir .grup-ust:hover {
  background: var(--vurgu);
}
.grup.katlanir .grup-ust:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mavi) 60%, transparent);
  outline-offset: -2px;
}
.grup.katlanir.kapali .grup-ust {
  border-bottom-color: transparent;
}
.grup-ok {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--metin-3);
  transition: transform 0.25s var(--yumusak);
}
.grup.katlanir.kapali .grup-ok {
  transform: rotate(-90deg);
}
.grup-icerik:not([hidden]) {
  animation: acil 0.2s var(--yumusak);
}
.grup-ozet {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--metin-3);
}
.grup-ozet b {
  font-weight: 600;
  color: var(--turuncu);
}
.gruplar-arac {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin: -4px 4px 10px;
}
.grup-govde.soluk {
  opacity: 0.42;
}
.grup-kapali-not {
  padding: 9px 18px;
  font-size: 12.5px;
  color: var(--metin-3);
  border-bottom: 1px solid var(--cizgi);
}

.satir {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 10px 16px 10px 18px;
  transition: background 0.2s;
}
.satir + .satir::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 0;
  height: 1px;
  background: var(--cizgi);
}
.satir.tiklanir {
  cursor: pointer;
}
.satir.tiklanir:hover {
  background: var(--vurgu);
}
.satir.tiklanir:active {
  background: var(--dolgu);
}
.satir.parla {
  animation: parla 1.8s var(--yumusak);
}
@keyframes parla {
  0%,
  40% {
    background: color-mix(in srgb, var(--mavi) 20%, transparent);
  }
}
.satir.dikey {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.satir-metin {
  flex: 1;
  min-width: 0;
}
.satir-ad {
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.satir-ipucu {
  font-size: 12.5px;
  color: var(--metin-2);
  margin-top: 2px;
}
.satir-kontrol {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Çok seçenekli seçim: etiket üstte, seçenekler altta tam genişlikte (sığmazsa satıra kırılır) */
.satir.genis-secim {
  flex-wrap: wrap;
}
.satir.genis-secim .satir-metin {
  flex: 1 1 100%;
}
.satir.genis-secim .satir-kontrol {
  flex: 1 1 100%;
  justify-content: flex-start;
}
.satir.genis-secim .bolumlu {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
.satir.genis-secim .bolumlu button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
}
.satir-deger {
  color: var(--metin-2);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
}
.satir-deger > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.satir-deger > svg,
.satir-ok {
  width: 15px;
  height: 15px;
  color: var(--metin-3);
  flex: none;
}
.satir-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.satir.kilitli .satir-kontrol,
.satir.kilitli .sablon {
  opacity: 0.45;
  pointer-events: none;
}
.rozet-kucuk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.rozet-kucuk svg {
  width: 11px;
  height: 11px;
}
.rozet-kucuk.altin {
  color: var(--altin);
  background: color-mix(in srgb, var(--altin) 16%, transparent);
}
.rozet-kucuk.turuncu {
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 16%, transparent);
}
.rozet-kucuk.mavi {
  color: var(--mavi);
  background: color-mix(in srgb, var(--mavi) 14%, transparent);
}
.rozet-kucuk.yesil {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 15%, transparent);
}
.rozet-kucuk.kirmizi {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 15%, transparent);
}
.sifirla-dugme {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--metin-3);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.satir:hover .sifirla-dugme,
.sifirla-dugme:focus-visible {
  opacity: 1;
}
.sifirla-dugme:hover {
  background: var(--dolgu);
  color: var(--mavi);
}
.sifirla-dugme svg {
  width: 15px;
  height: 15px;
}
.degisti-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mavi);
  flex: none;
}

/* ---------- Anahtar ---------- */
.anahtar {
  width: 51px;
  height: 31px;
  border-radius: 31px;
  background: var(--dolgu-2);
  position: relative;
  flex: none;
  transition: background 0.25s var(--yumusak);
}
.anahtar::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.36s var(--yay), width 0.2s var(--yumusak);
}
.anahtar[aria-checked='true'] {
  background: var(--yesil);
}
.anahtar[aria-checked='true']::after {
  transform: translateX(20px);
}
.anahtar:active::after {
  width: 33px;
}
.anahtar[aria-checked='true']:active::after {
  transform: translateX(14px);
}
.anahtar:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- Adımlayıcı ---------- */
.adimlayici {
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: 10px;
  background: var(--dolgu);
  overflow: hidden;
}
.adimlayici button {
  width: 36px;
  height: 100%;
  display: grid;
  place-items: center;
}
.adimlayici button:hover:not(:disabled) {
  background: var(--dolgu);
}
.adimlayici button:disabled {
  opacity: 0.35;
}
.adimlayici button svg {
  width: 15px;
  height: 15px;
}
.adimlayici input {
  width: 62px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.girdi {
  height: 40px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--dolgu);
  padding: 0 12px;
  outline: none;
  font-size: 15px;
  transition: box-shadow 0.2s, background 0.2s;
}
.girdi:focus {
  background: var(--dolgu-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 30%, transparent);
}
.girdi::placeholder {
  color: var(--metin-3);
}
.girdi.dar {
  width: 220px;
}
/* Saat seçici: koyu temada saat simgesi de açık renkte görünsün */
.girdi.saat-girdi {
  width: 120px;
  color-scheme: dark;
}
[data-tema='acik'] .girdi.saat-girdi {
  color-scheme: light;
}
textarea.girdi {
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
  font-size: 14px;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}
/* Kalan tarayıcı açılır listeleri: ok işareti + açılan listede okunur renk (Windows beyaz zemine açık yazı basıyordu) */
select.girdi {
  appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
select.girdi option {
  background: var(--yuzey-kati);
  color: var(--metin);
}
/* Kanal / rol seçici düğme — tıklayınca sitenin seçici penceresi açılır */
.girdi.secici {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 8px;
  border-color: var(--cizgi);
  text-align: left;
  cursor: pointer;
  color: var(--metin);
}
.girdi.secici:hover {
  background: var(--dolgu-2);
  border-color: var(--cizgi-guclu);
}
.girdi.secici .fis {
  background: var(--yuzey-ust);
  box-shadow: inset 0 0 0 1px var(--cizgi);
  min-width: 0;
}
.secici-bos {
  flex: 1;
  padding-left: 4px;
  color: var(--metin-2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secici-ok {
  width: 15px;
  height: 15px;
  margin-left: auto;
  flex: none;
  color: var(--metin-3);
}
.renk-kutu {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
}
.renk-kutu input {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
}
.renk-kod {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px;
  color: var(--metin-2);
}
.fis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  background: var(--dolgu);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.fis > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rol-nokta {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--nokta, #99aab5);
}
.fis svg {
  width: 12px;
  height: 12px;
  color: var(--metin-2);
}
.fis.silinmis {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 12%, transparent);
}
.fis button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: -4px;
  border-radius: 50%;
  color: var(--metin-2);
}
.fis button:hover {
  background: var(--dolgu-2);
  color: var(--metin);
}
.fis-bos {
  font-size: 12.5px;
  color: var(--metin-3);
}

/* ---------- Düğmeler (sade: gölge/parıltı yok) ---------- */
.dugme {
  height: 36px;
  padding: 0 15px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--dolgu);
  transition: transform 0.2s var(--yay), background 0.15s, opacity 0.2s;
  white-space: nowrap;
}
.dugme:hover:not(:disabled) {
  background: var(--dolgu-2);
}
.dugme:active:not(:disabled) {
  transform: scale(0.97);
}
.dugme:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dugme svg {
  width: 16px;
  height: 16px;
}
.dugme.ana {
  background: var(--blurple);
  color: #fff;
}
.dugme.ana:hover:not(:disabled) {
  background: var(--blurple-2);
}
.dugme.tehlike {
  background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
  color: var(--kirmizi);
}
.dugme.tehlike:hover:not(:disabled) {
  background: color-mix(in srgb, var(--kirmizi) 22%, transparent);
}
.dugme.tehlike-dolu {
  background: var(--kirmizi);
  color: #fff;
}
.dugme.kucuk {
  height: 30px;
  padding: 0 11px;
  font-size: 13px;
  border-radius: 9px;
}
.donen {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: don-hizli 0.7s linear infinite;
  display: inline-block;
  flex: none;
}
@keyframes don-hizli {
  to {
    transform: rotate(360deg);
  }
}
.bolumlu {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--dolgu);
}
.bolumlu button {
  min-width: 64px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--metin-2);
  transition: background 0.25s var(--yumusak), color 0.2s;
}
.bolumlu button.secili {
  background: var(--yuzey-ust);
  color: var(--metin);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
[data-tema='koyu'] .bolumlu button.secili {
  background: #5a5a62;
}
.bolumlu.genis {
  display: flex;
}
.bolumlu.genis button {
  flex: 1;
}

/* =========================================================================
   Sayfa (sheet)
   ========================================================================= */
.perde {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: perde-gir 0.22s ease both;
}
.perde.cikiyor {
  animation: perde-cik 0.2s ease both;
}
@keyframes perde-gir {
  from {
    opacity: 0;
  }
}
@keyframes perde-cik {
  to {
    opacity: 0;
  }
}
.kagit {
  width: min(500px, 100%);
  max-height: min(740px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  background: var(--yuzey-ust);
  box-shadow: var(--golge);
  border: 1px solid var(--cizgi);
  overflow: hidden;
  animation: kagit-gir 0.42s var(--yay) both;
}
.perde.cikiyor .kagit {
  animation: kagit-cik 0.2s ease both;
}
@keyframes kagit-gir {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
  }
}
@keyframes kagit-cik {
  to {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}
.kagit-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px 22px;
}
.kagit-ust h3 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kapat-dugme {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dolgu);
  color: var(--metin-2);
}
.kapat-dugme svg {
  width: 15px;
  height: 15px;
}
.kagit-govde {
  padding: 4px 22px 18px;
  overflow-y: auto;
  flex: 1;
}
.kagit-alt {
  padding: 12px 22px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--cizgi);
}
.kagit-aciklama {
  color: var(--metin-2);
  font-size: 14px;
  margin: 0 0 14px;
}
.secim-listesi {
  margin: 10px -10px 0;
}
.secim {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 14.5px;
}
.secim:hover {
  background: var(--vurgu);
}
.secim:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.secim .secim-ad {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secim small {
  color: var(--metin-3);
  font-size: 12px;
}
.secim .tik {
  width: 19px;
  height: 19px;
  color: var(--mavi);
  flex: none;
}
.secim.secili {
  background: color-mix(in srgb, var(--mavi) 10%, transparent);
}
.secim-baslik {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 12px 4px;
}
.kanal-diyez {
  width: 17px;
  height: 17px;
  color: var(--metin-3);
  flex: none;
}
.form-satiri {
  margin-bottom: 16px;
}
.form-satiri > label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-2);
  margin-bottom: 6px;
}
/* Etiket solda, anahtar sağda */
.form-satiri.yatay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.form-satiri.yatay > label {
  margin: 0;
}
.form-satiri.yatay > label small {
  display: block;
  font-weight: 400;
  color: var(--metin-3);
  margin-top: 2px;
}
.cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cip {
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--dolgu);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, transform 0.2s var(--yay);
}
.cip:hover {
  background: var(--dolgu-2);
}
.cip:active {
  transform: scale(0.95);
}
.cip.secili {
  background: var(--mavi);
  color: #fff;
}
.sure-girdi {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sure-girdi .girdi {
  width: 110px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  height: 46px;
}
.sure-onizleme {
  font-size: 13px;
  color: var(--metin-2);
  margin-top: 8px;
}
.hata-metni {
  color: var(--kirmizi);
  font-size: 13px;
  margin-top: 8px;
}
.etiket-girdi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: var(--dolgu);
  min-height: 48px;
  align-items: center;
}
.etiket-girdi input {
  flex: 1;
  min-width: 120px;
  border: 0;
  background: transparent;
  outline: none;
  padding: 4px 6px;
}

/* =========================================================================
   Mesaj tasarımı (şablon + canlı önizleme)
   ========================================================================= */
.tasarim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
}
.tasarim-sol {
  min-width: 0;
  border-right: 1px solid var(--cizgi);
}
.tasarim-sag {
  padding: 16px;
  background: color-mix(in srgb, var(--zemin) 35%, transparent);
}
.tasarim-sag-ic {
  position: sticky;
  top: 70px;
}
.onizleme-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--metin-3);
  margin: 0 2px 10px;
}
/* Birbirinin yerine geçen mesajlar arasında seçim (panel / talep, onay / ret…) */
.onizleme-sekmeler {
  margin: -2px 0 10px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.onizleme-sekmeler .bolumlu button {
  min-width: 0;
  height: 28px;
  padding: 0 11px;
  white-space: nowrap;
}
.onizleme-baslik .donen {
  width: 12px;
  height: 12px;
}
.onizleme-baslik .bolumlu {
  margin-left: auto;
}
.onizleme-baslik .bolumlu button {
  min-width: 0;
  height: 24px;
  font-size: 11.5px;
  padding: 0 9px;
  text-transform: none;
  letter-spacing: 0;
}
.onizleme-not {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--metin-2);
  display: flex;
  gap: 6px;
  align-items: center;
}
.onizleme-not svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.sablon {
  width: 100%;
}
.sablon-arac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.degisken-cip {
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mavi) 12%, transparent);
  color: var(--mavi);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}
.degisken-cip:hover {
  background: color-mix(in srgb, var(--mavi) 22%, transparent);
}
.emoji-dugme {
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dolgu);
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-2);
}
.emoji-dugme img {
  width: 16px;
  height: 16px;
}
.sablon-sayac {
  margin-left: auto;
  font-size: 12px;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.sablon-sayac.asim {
  color: var(--kirmizi);
}
.sablon-kaydet {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
  animation: acil 0.2s var(--yay);
}
.sablon-kaydet .hata-metni {
  margin: 0 auto 0 0;
}
.emoji-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  padding: 8px;
  margin-top: 8px;
  border-radius: 14px;
  background: var(--dolgu);
  max-height: 180px;
  overflow: auto;
  animation: acil 0.2s var(--yay);
}
.emoji-panel button {
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.emoji-panel button:hover {
  background: var(--dolgu-2);
}
.emoji-panel img {
  width: 24px;
  height: 24px;
}
.alan-kutusu {
  padding: 10px;
  border-radius: 14px;
  background: var(--dolgu);
  display: grid;
  gap: 8px;
}
.alan-kutusu + .alan-kutusu {
  margin-top: 8px;
}
.alan-kutusu-ust {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.alan-kutusu-ust span {
  flex: 1;
}
.alan-kutusu .girdi {
  background: var(--yuzey-kati);
}

/* Discord önizlemesi — her zaman Discord'un koyu teması */
.dc {
  background: #313338;
  color: #dbdee1;
  border-radius: 16px;
  padding: 12px 14px 8px;
  font-family: 'gg sans', 'Noto Sans', 'Inter', 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.375;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.dc-kanal {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #949ba4;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3f4147;
}
.dc-kanal svg {
  width: 16px;
  height: 16px;
}
.dc-mesaj {
  display: flex;
  gap: 14px;
  padding: 2px 0 10px;
}
.dc-mesaj.devam {
  padding-top: 0;
  margin-top: -6px;
}
.dc-mesaj.devam .dc-avatar {
  visibility: hidden;
  height: 0;
}
.dc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: #5865f2;
  object-fit: cover;
}
.dc-govde {
  min-width: 0;
  flex: 1;
}
.dc-ust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1px;
}
.dc-ad {
  color: #f2f3f5;
  font-weight: 600;
  font-size: 15px;
}
.dc-uygulama {
  background: #5865f2;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
/* Seçmeli menü (Discord'daki gibi: koyu kutu, solda yazı, sağda ok) */
.dc-secim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  height: 40px;
  padding: 0 12px;
  margin-top: 6px;
  border-radius: 8px;
  border: 1px solid #1e1f22;
  background: #1e1f22;
  color: #949ba4;
  font-size: 14px;
}
.dc-secim svg {
  width: 16px;
  height: 16px;
}
/* Kenar çubuğu önizlemeleri: üye listesi (bot durumu) ve kanal listesi (sayaç, özel oda) */
.dc-yan {
  background: #2b2d31;
  padding: 10px 8px;
}
.dc-yan-baslik {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #949ba4;
}
.dc-yan-baslik svg {
  width: 12px;
  height: 12px;
}
.dc-uye {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
}
.dc-uye:hover {
  background: #35373c;
}
.dc-uye-avatar {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}
.dc-uye-avatar img,
.dc-uye-avatar span {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5865f2;
}
.dc-uye-avatar i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #2b2d31;
}
.dc-uye-metin {
  display: grid;
  min-width: 0;
}
.dc-uye-metin b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #f2f3f5;
}
.dc-uye-metin small {
  font-size: 12px;
  color: #b5bac1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-uye-metin small .dc-metin {
  display: inline;
  font-size: 12px;
}
.dc-kanal-satir {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #949ba4;
  font-size: 15px;
  font-weight: 500;
}
.dc-kanal-satir svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.dc-kanal-satir span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-kanal-satir em {
  font-style: normal;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #1e1f22;
}
.dc-kanal-uye {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 36px;
  font-size: 13px;
  color: #b5bac1;
}
.dc-kanal-uye span.dc-canli {
  width: auto;
  height: auto;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: #da373c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dc-kanal-uye img,
.dc-kanal-uye span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5865f2;
}
.dc-zaman {
  color: #949ba4;
  font-size: 12px;
}
.dc-metin {
  white-space: pre-wrap;
}
.dc-metin h1,
.dc-metin h2,
.dc-metin h3 {
  display: block;
  margin: 4px 0 2px;
  color: #f2f3f5;
  line-height: 1.25;
  font-weight: 700;
}
.dc-metin h1 {
  font-size: 23px;
}
.dc-metin h2 {
  font-size: 19px;
}
.dc-metin h3 {
  font-size: 16px;
}
.dc-alt {
  display: block;
  font-size: 12.5px;
  color: #949ba4;
}
.dc-alinti {
  display: block;
  border-left: 4px solid #4e5058;
  padding-left: 10px;
}
.dc-metin strong {
  color: #f2f3f5;
}
.dc-metin code {
  background: #2b2d31;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 13px;
  font-family: Consolas, monospace;
}
.dc-emoji {
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  object-fit: contain;
}
.dc-bahsetme {
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
}
.dc-link {
  color: #00a8fc;
}
/* Discord zaman damgası (<t:…>) — hafif gri zemin */
.dc-zaman {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 0 2px;
}
.dc-embed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  max-width: 432px;
  margin-top: 6px;
  background: #2b2d31;
  border-left: 4px solid #1e1f22;
  border-radius: 4px;
  padding: 10px 14px 14px 12px;
  font-size: 14px;
}
.dc-embed-ana {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: start;
}
.dc-yazar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #f2f3f5;
}
.dc-yazar img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.dc-baslik {
  font-weight: 700;
  color: #f2f3f5;
  font-size: 15px;
}
.dc-alanlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}
.dc-alan {
  grid-column: 1 / -1;
}
.dc-alan.yan {
  grid-column: auto;
}
.dc-alan-ad {
  font-weight: 700;
  color: #f2f3f5;
  font-size: 13.5px;
  margin-bottom: 2px;
}
.dc-kucuk-resim {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}
.dc-resim {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 4px;
}
/* Mesaja eklenmiş görsel (istatistik kartı) — Discord'daki gibi yarı boyda, oranı korunur */
.dc-ek {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-top: 4px;
  border-radius: 8px;
  cursor: zoom-in;
}
.dc-ek-buyuk {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  cursor: zoom-out;
}
.dc-ek-buyuk img {
  max-width: min(1200px, 100%);
  max-height: 100%;
  border-radius: 12px;
}
.dc-altbilgi {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b5bac1;
}
.dc-altbilgi img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.dc-v2 {
  margin-top: 6px;
  max-width: 460px;
  background: #2b2d31;
  border: 1px solid #1e1f22;
  border-left: 4px solid var(--vurgu-renk, #1e1f22);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.dc-bolum {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dc-bolum > div {
  flex: 1;
  min-width: 0;
}
.dc-galeri img {
  width: 100%;
  border-radius: 8px;
  display: block;
  max-height: 240px;
  object-fit: cover;
}
.dc-ayrac {
  height: 1px;
  background: #3f4147;
}
.dc-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dc-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: #4e5058;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.dc-dugme.ana {
  background: #5865f2;
}
.dc-dugme.tehlike {
  background: #da373c;
}
.dc-dugme.basari {
  background: #248046;
}
.dc-dugme.baglanti svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.dc-dugme.soluk {
  opacity: 0.5;
}
/* Kartın DIŞINDAKİ düğme satırı (V2 mesajında kapsayıcının altında) */
.dc-govde > .dc-satir {
  margin-top: 6px;
}
/* Başlığın yanındaki düğme (Section aksesuarı) — metnin sağında, dikeyde ortalı */
.dc-bolum .dc-dugme {
  flex-shrink: 0;
  align-self: center;
}
.dc-dugme .dc-emoji {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}
.dc-bos {
  color: #949ba4;
  font-style: italic;
  font-size: 13px;
}

/* =========================================================================
   Genel Bakış
   ========================================================================= */
.kahraman {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  min-height: 240px;
  margin-bottom: 26px;
  box-shadow: var(--golge);
  animation: kart-gir 0.6s var(--yay) both;
  isolation: isolate;
  border: 1px solid var(--cizgi);
}
.kahraman-zemin {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.kahraman::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(8, 8, 14, 0.9) 0%, rgba(8, 8, 14, 0.55) 55%, rgba(8, 8, 14, 0.12) 100%);
}
.kahraman-ic {
  position: relative;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  color: #fff;
  max-width: 64%;
}
.kahraman-ikon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
  margin-bottom: 14px;
  background: var(--blurple);
}
.kahraman h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 4px;
}
.kahraman-alt {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 14px;
  font-size: 14px;
}
.kahraman-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kahraman-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.kahraman-cip svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}
.canli-nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yesil);
}
.kahraman-wumpus {
  position: absolute;
  right: 26px;
  bottom: -14px;
  height: 250px;
  pointer-events: none;
  animation: suzul 5.5s ease-in-out infinite;
}
.bolum-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin: 6px 4px 12px;
}
.bolum-baslik h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.bolum-baslik small {
  color: var(--metin-2);
  font-size: 13px;
}
.parcaciklar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.parcacik {
  position: relative;
  border-radius: 22px;
  padding: 15px 16px 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  overflow: hidden;
  animation: yukari 0.45s var(--yumusak) both;
}
.parcacik-ust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--renk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.parcacik-ust svg {
  width: 15px;
  height: 15px;
}
.parcacik-deger {
  font-size: 36px;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 10px;
  position: relative;
}
.parcacik-deger small {
  font-size: 14px;
  font-weight: 600;
  color: var(--metin-2);
  letter-spacing: 0;
  margin-left: 4px;
}
.parcacik-alt {
  font-size: 12.5px;
  color: var(--metin-2);
  margin-top: 2px;
  position: relative;
}
.parcacik-gorsel {
  position: absolute;
  right: -2px;
  bottom: -6px;
  width: 56px;
  opacity: 0.6;
  pointer-events: none;
}
.iki-sutun {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
}
.bot-avatar {
  position: relative;
  flex: none;
}
.bot-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  background: var(--dolgu);
}
.bot-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kirmizi);
  border: 3px solid var(--yuzey-kati);
}
.bot-avatar.hazir::after {
  background: var(--yesil);
}
.ping {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--metin-2);
  text-align: right;
}
.ping b {
  display: block;
  font-size: 14px;
  color: var(--metin);
  font-weight: 600;
}
.gecmis-degisim {
  font-size: 12.5px;
  color: var(--metin-2);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.gecmis-degisim s {
  color: var(--metin-3);
}
.gecmis-degisim svg {
  width: 12px;
  height: 12px;
  color: var(--metin-3);
}
.zaman {
  font-size: 12px;
  color: var(--metin-3);
  white-space: nowrap;
}
.bos-durum {
  text-align: center;
  padding: 30px 20px;
  color: var(--metin-2);
}
.bos-durum img {
  width: 120px;
  margin-bottom: 10px;
}
.bos-durum b {
  display: block;
  color: var(--metin);
  font-size: 16.5px;
  margin-bottom: 4px;
}
.iskelet {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--dolgu) 25%, var(--dolgu-2) 50%, var(--dolgu) 75%);
  background-size: 200% 100%;
  animation: parilti 1.4s ease-in-out infinite;
}
@keyframes parilti {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
.kutu {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 16px;
  margin-bottom: 20px;
  font-size: 14px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--renk, var(--mavi)) 11%, var(--yuzey));
  border: 1px solid color-mix(in srgb, var(--renk, var(--mavi)) 22%, transparent);
}
.kutu > svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--renk, var(--mavi));
  margin-top: 1px;
}
.kutu b {
  display: block;
  margin-bottom: 2px;
}
.kutu p {
  margin: 0;
  color: var(--metin-2);
}
.esik-puan {
  min-width: 54px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--turuncu) 15%, transparent);
  color: var(--turuncu);
}
.ikon-dugme {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--metin-2);
  transition: background 0.15s, color 0.15s;
}
.ikon-dugme:hover:not(:disabled) {
  background: var(--dolgu);
  color: var(--metin);
}
.ikon-dugme:disabled {
  opacity: 0.35;
}
.ikon-dugme.tehlike:hover:not(:disabled) {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 12%, transparent);
}
.ikon-dugme svg {
  width: 16px;
  height: 16px;
}
.kademe-sira {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--renk);
  flex: none;
}
.haber-favicon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  flex: none;
  background: var(--indigo);
  text-transform: uppercase;
}
.bilgi-satiri {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bilgi-satiri span:last-child {
  color: var(--metin-2);
  font-variant-numeric: tabular-nums;
}
code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  background: var(--dolgu);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
}

/* ---------- Dinamik Ada ---------- */
/* ---------- Bildirimler (sağ üst) — ne yapıldı, eski → yeni, Geri al ---------- */
.bildirim-kap {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 200;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.bildirim {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: start;
  padding: 13px 12px 14px 14px;
  border-radius: 18px;
  background: var(--yuzey-kati);
  border: 1px solid var(--cizgi-guclu);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
  color: var(--metin);
  overflow: hidden;
  pointer-events: auto;
  animation: bildirim-gir 0.42s var(--yay) both;
}
.bildirim.cikiyor {
  animation: bildirim-cik 0.26s ease both;
}
.bildirim-simge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yesil);
  color: #fff;
}
.bildirim.bilgi .bildirim-simge {
  background: var(--mavi);
}
.bildirim.hata .bildirim-simge {
  background: var(--kirmizi);
}
.bildirim-simge svg {
  width: 17px;
  height: 17px;
}
.bildirim-govde {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.bildirim-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}
.bildirim-baslik span {
  font-size: 12px;
  color: var(--metin-3);
  flex: none;
}
/* En çok iki satır ("Ayar · modül kapalı, açılınca geçerli olur" tek satıra sığmıyor) */
.bildirim-alt {
  font-size: 13px;
  color: var(--metin-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
/* eski → yeni (zildeki listede de kullanılır) */
.bildirim-detay {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  margin-top: 2px;
}
.bildirim-detay s,
.bildirim-detay span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--dolgu);
}
.bildirim-detay s {
  color: var(--metin-3);
  flex: 0 1 auto;
}
.bildirim-detay span {
  flex: 1 1 auto;
  font-weight: 600;
}
.bildirim-detay svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--metin-3);
}
.bildirim-eylem {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 11px;
  border-radius: 9px;
  background: var(--dolgu);
  color: var(--mavi);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s;
}
.bildirim-eylem:hover {
  background: var(--dolgu-2);
}
.bildirim-eylem svg {
  width: 14px;
  height: 14px;
}
.bildirim-kapat {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--metin-3);
  cursor: pointer;
}
.bildirim-kapat:hover {
  background: var(--dolgu);
  color: var(--metin);
}
.bildirim-kapat svg {
  width: 13px;
  height: 13px;
}
/*
 * Discord görselli bildirim (03.10.2026): "açmadan önce kurulum gerekli" — solda 3D Clyde, eksik ayarlar çip olarak
 * (çipe basınca o ayara gidilir). Kart Discord moruna hafifçe boyanır; parıltı / renkli gölge yok.
 */
.bildirim.gorselli {
  grid-template-columns: 62px minmax(0, 1fr) 24px;
  padding: 14px 12px 17px 12px;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--blurple) 28%, transparent), transparent 62%),
    var(--yuzey-kati);
  border-color: color-mix(in srgb, var(--blurple) 42%, var(--cizgi-guclu));
}
.bildirim-gorsel {
  width: 62px;
  height: 72px;
  align-self: center;
  object-fit: contain;
  transform-origin: 50% 90%;
  animation: bildirim-selam 0.9s 0.2s var(--yumusak) both;
  user-select: none;
  pointer-events: none;
}
@keyframes bildirim-selam {
  0% {
    opacity: 0;
    transform: rotate(-12deg) scale(0.8);
  }
  55% {
    opacity: 1;
    transform: rotate(6deg) scale(1.03);
  }
  100% {
    transform: none;
  }
}
.bildirim.gorselli .bildirim-baslik b {
  font-size: 14.5px;
}
.bildirim-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bildirim-liste :is(button, span) {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--blurple) 45%, transparent);
  background: color-mix(in srgb, var(--blurple) 20%, transparent);
  color: var(--metin);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.bildirim-liste span {
  padding-right: 10px;
}
.bildirim-liste button:hover {
  background: color-mix(in srgb, var(--blurple) 36%, transparent);
}
.bildirim-liste svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--metin-2);
}
.bildirim.kurulum .bildirim-sure {
  background: var(--blurple);
}
/* kalan süre çizgisi — üstüne gelince durur (zamanlayıcı da durur) */
.bildirim-sure {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--yesil);
  opacity: 0.55;
  transform-origin: left;
  animation: bildirim-sure linear both;
}
.bildirim.bilgi .bildirim-sure {
  background: var(--mavi);
}
.bildirim.hata .bildirim-sure {
  background: var(--kirmizi);
}
.bildirim:hover .bildirim-sure {
  animation-play-state: paused;
}
@keyframes bildirim-sure {
  to {
    transform: scaleX(0);
  }
}
@keyframes bildirim-gir {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.96);
  }
}
@keyframes bildirim-cik {
  to {
    opacity: 0;
    transform: translateX(36px);
  }
}
@media (max-width: 640px) {
  .bildirim-kap {
    top: 8px;
    right: 8px;
    width: calc(100vw - 16px);
  }
}

/* ---------- Zil: son işlemler (üst çubuğun sağı) ---------- */
.zil-kap {
  position: relative;
  margin-left: auto;
}
.zil-dugme {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--dolgu);
  color: var(--metin-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.zil-dugme:hover,
.zil-dugme.acik {
  background: var(--dolgu-2);
  color: var(--metin);
}
.zil-dugme svg {
  width: 19px;
  height: 19px;
}
.zil-rozet {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--zemin);
}
.zil-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(400px, calc(100vw - 32px));
  border-radius: 18px;
  background: var(--yuzey-kati);
  border: 1px solid var(--cizgi-guclu);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  overflow: hidden;
  animation: zil-ac 0.22s var(--yumusak) both;
}
@keyframes zil-ac {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
.zil-baslik {
  display: grid;
  gap: 2px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--cizgi);
}
.zil-baslik span {
  font-size: 12.5px;
  color: var(--metin-3);
}
.zil-liste {
  max-height: min(420px, 60vh);
  overflow-y: auto;
}
.zil-oge {
  display: grid;
  gap: 3px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cizgi);
}
.zil-oge.yeni {
  background: color-mix(in srgb, var(--mavi) 8%, transparent);
}
.zil-oge-ust {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}
.zil-oge-ust b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zil-oge-ust span,
.zil-kim {
  font-size: 12px;
  color: var(--metin-3);
  flex: none;
}
.zil-bos {
  padding: 26px 16px;
  text-align: center;
  color: var(--metin-3);
  font-size: 13.5px;
}
.zil-alt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px;
  color: var(--mavi);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.zil-alt:hover {
  background: var(--dolgu);
}
.zil-alt svg {
  width: 15px;
  height: 15px;
}

/* =========================================================================
   Modüller (kategori → modül kartları → modül sayfası)
   ========================================================================= */
/* ---------- Kategori sayfası (02.10.2026, "menüden sonra açılan kısım basit duruyor") ---------- */
/* Kapaktaki durum şeridi: açık / kurulum gerekli / kapalı oranı */
.kategori-durum {
  max-width: 340px; /* sağdaki kapak görselinin altına girmesin */
}
.kategori-serit {
  display: flex;
  gap: 3px;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.kategori-serit i {
  min-width: 8px;
  border-radius: 3px;
  transform-origin: left;
  animation: serit-dol 0.6s var(--yumusak) both;
}
@keyframes serit-dol {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}
.kategori-serit i.yesil,
.kategori-lejant i.yesil {
  background: var(--yesil);
}
.kategori-serit i.turuncu,
.kategori-lejant i.turuncu {
  background: var(--turuncu);
}
.kategori-serit i.gri,
.kategori-lejant i.gri {
  background: var(--dolgu-2);
}
.kategori-serit i.mavi,
.kategori-lejant i.mavi {
  background: var(--mavi);
}
.kategori-lejant {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--metin-2);
}
.kategori-lejant span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kategori-lejant i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}
.kategori-lejant b {
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}
/* Araç çubuğu: modül arama + süzgeç çipleri */
.kategori-arac {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: -8px 0 16px;
}
.kategori-ara {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  max-width: 340px;
}
.kategori-ara > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--metin-3);
  pointer-events: none;
}
.kategori-ara input {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 36px;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  background: var(--yuzey);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kategori-ara input::placeholder {
  color: var(--metin-3);
}
.kategori-ara input:focus {
  border-color: color-mix(in srgb, var(--mavi) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mavi) 22%, transparent);
}
.kategori-ara button {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--metin-3);
}
.kategori-ara button:hover {
  background: var(--dolgu);
  color: var(--metin);
}
.kategori-ara button svg {
  width: 14px;
  height: 14px;
}
.kategori-suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.suzgec-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 6px 0 13px;
  border-radius: 99px;
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  font-size: 13px;
  font-weight: 600;
  color: var(--metin-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.25s var(--yay);
}
.suzgec-cip span {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--dolgu);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.suzgec-cip:hover {
  color: var(--metin);
  border-color: var(--cizgi-guclu);
}
.suzgec-cip:active {
  transform: scale(0.96);
}
.suzgec-cip.secili {
  color: var(--zemin);
  background: var(--metin);
  border-color: var(--metin);
}
.suzgec-cip.secili span {
  color: var(--metin);
  background: color-mix(in srgb, var(--zemin) 78%, transparent);
}
/* Durum süzgeçleri seçili değilken sayıları kendi renginde */
.suzgec-cip.acik:not(.secili) span {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 15%, transparent);
}
.suzgec-cip.yeni:not(.secili) span {
  color: var(--mavi);
  background: color-mix(in srgb, var(--mavi) 15%, transparent);
}
.kategori-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 16px 56px;
  color: var(--metin-2);
  text-align: center;
  animation: yukari 0.4s var(--yumusak) both;
}
.kategori-bos img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.85;
}
.kategori-bos b {
  color: var(--metin);
  font-size: 15px;
}

.modul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
/*
 * Modül kartı (03.10.2026, "kartları daha modern yap"): üstte ikon + rozetler + şalter; altında ad ve iki satır açıklama;
 * en altta durum noktası · ayar sayısı · ok düğmesi. Arkada modülün ikonu büyük ve silik (filigran), üst kenarda ince ışık
 * çizgisi. Açık modülde ikon ve filigran kendi renginde, kapalıda nötr. Kartta "Eksik: …" / "Kurulum gerekli" YAZMAZ
 * (kullanıcı istemedi — açmaya çalışınca sağ üstteki bildirim söyler). Hareket yalnızca transform / opacity.
 */
.modul-karti {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 16px 16px 13px;
  border-radius: 22px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s var(--yay), border-color 0.2s;
  animation: yukari 0.45s var(--yumusak) both;
  animation-delay: calc(var(--sira, 0) * 30ms);
}
/* Üst kenarda ince ışık çizgisi (cam kenarı) */
.modul-karti::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--metin) 20%, transparent) 30%, transparent 78%);
  pointer-events: none;
}
/* Filigran: modül ikonunun büyük, silik hâli — sağ altta, kartın dışına taşar */
.modul-karti-fon {
  position: absolute;
  right: -20px;
  bottom: -24px;
  z-index: -1;
  width: 128px;
  height: 128px;
  color: var(--metin);
  opacity: 0.045;
  transform: rotate(-12deg);
  transition: transform 0.5s var(--yumusak), opacity 0.3s;
  pointer-events: none;
}
.modul-karti-fon svg {
  width: 100%;
  height: 100%;
}
.modul-karti.acik .modul-karti-fon {
  color: var(--renk, var(--gri));
  opacity: 0.11;
}
.modul-karti:hover .modul-karti-fon {
  transform: rotate(-6deg) scale(1.07);
  opacity: 0.08;
}
.modul-karti.acik:hover .modul-karti-fon {
  opacity: 0.17;
}
.modul-karti.acik {
  background:
    radial-gradient(130% 95% at 0% 0%, color-mix(in srgb, var(--renk, var(--gri)) 13%, transparent), transparent 58%),
    var(--yuzey);
  border-color: color-mix(in srgb, var(--renk, var(--gri)) 24%, var(--cizgi));
}
/* Açık ama çalışmıyor (ayar eksik / silinmiş) */
.modul-karti.sorunlu {
  border-color: color-mix(in srgb, var(--turuncu) 40%, var(--cizgi));
}
.modul-karti:hover {
  border-color: var(--cizgi-guclu);
  transform: translateY(-3px);
}
.modul-karti.acik:hover {
  border-color: color-mix(in srgb, var(--renk, var(--gri)) 55%, var(--cizgi));
}
.modul-karti:active {
  transform: scale(0.985);
}
.modul-karti:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}
.modul-karti-ust {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modul-karti-rozetler {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 2px;
}
.modul-karti-rozetler .rozet-pro {
  margin-left: 0;
}
.modul-ikon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--renk, var(--gri));
  background: color-mix(in srgb, var(--renk, var(--gri)) 16%, transparent);
  transition: background 0.25s, color 0.25s;
}
.modul-ikon svg {
  width: 20px;
  height: 20px;
}
.modul-ikon.buyuk {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
.modul-ikon.buyuk svg {
  width: 28px;
  height: 28px;
}
.modul-karti .modul-ikon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  transition: background 0.25s, color 0.25s, transform 0.35s var(--yay);
}
.modul-karti .modul-ikon svg {
  width: 22px;
  height: 22px;
}
/* Açık modülde ikon kutusu dolu renk, kapalıda nötr */
.modul-karti.acik .modul-ikon {
  color: #fff;
  background: var(--renk, var(--gri));
}
.modul-karti.kapali .modul-ikon {
  color: var(--metin-2);
  background: var(--dolgu);
}
.modul-karti:hover .modul-ikon {
  transform: scale(1.06) rotate(-4deg);
}
.modul-karti-ad {
  margin-top: 14px;
  font-family: var(--baslik-yazi);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.modul-karti > p {
  flex: 1;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--metin-2);
  /* Kartlar aynı boyda kalsın: en çok iki satır */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.modul-karti-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 12.5px;
}
/* Durum: renkli nokta + yazı (hap değil) */
.modul-karti-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-weight: 600;
  color: var(--metin-2);
  white-space: nowrap;
}
.modul-karti-durum i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--metin-3);
}
.modul-karti-durum.acik {
  color: var(--yesil);
}
.modul-karti-durum.acik i {
  background: var(--yesil);
}
.modul-karti-durum.uyari {
  color: var(--turuncu);
}
.modul-karti-durum.uyari i {
  background: var(--turuncu);
}
.modul-karti-bilgi {
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--cizgi);
  color: var(--metin-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Ok düğmesi: üzerine gelince dolar ve sağa kayar */
.modul-karti-git {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cizgi-guclu);
  color: var(--metin-2);
  transition: transform 0.3s var(--yay), background 0.2s, color 0.2s, border-color 0.2s;
}
.modul-karti-git svg {
  width: 14px;
  height: 14px;
}
.modul-karti:hover .modul-karti-git {
  background: var(--metin);
  border-color: var(--metin);
  color: var(--zemin);
  transform: translateX(2px);
}
.kirinti {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 4px 12px;
  font-size: 13.5px;
  color: var(--metin-2);
}
.kirinti a:hover {
  color: var(--metin);
}
.kirinti svg {
  width: 13px;
  height: 13px;
  color: var(--metin-3);
}
.kirinti span {
  color: var(--metin);
  font-weight: 600;
}
.modul-baslik {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 20px;
  border-radius: var(--r-buyuk);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
  animation: yukari 0.45s var(--yumusak) both;
}
.modul-baslik-metin {
  flex: 1;
  min-width: 0;
}
.modul-baslik h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.modul-baslik p {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--metin-2);
}
.modul-salter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.modul-govde {
  transition: opacity 0.3s;
}
.modul-govde.soluk {
  opacity: 0.55;
}

/* ---------- Kayıt listesi düzenleyici (sayaçlar, otomatik cevap, duyurular) ---------- */
.kayitlar {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.kayit-karti {
  border-radius: 14px;
  border: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--dolgu) 55%, transparent);
  overflow: hidden;
}
.kayit-ust {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 7px 10px;
  cursor: pointer;
}
.kayit-no {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--dolgu-2);
  color: var(--metin-2);
}
.kayit-ozet {
  flex: 1;
  min-width: 0;
  margin-left: 4px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kayit-ok {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--metin-3);
  transition: transform 0.25s var(--yumusak);
}
.kayit-karti.acik .kayit-ok {
  transform: rotate(90deg);
}
.kayit-govde {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--cizgi);
  animation: acil 0.2s var(--yumusak);
}
.kayit-alan {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.kayit-alan > label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--metin-2);
}
.kayit-alan > label small {
  font-size: 12px;
  font-weight: 400;
  color: var(--metin-3);
}
/* Düğme düzenleyici: solda Discord'daki hâli, sağda yazı · emoji · renk */
.dugme-duzen {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.dugme-sahne {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 16px;
  border-radius: 14px;
  background: #313338; /* Discord sohbet zemini — düğme orada nasıl görünecekse öyle */
}
.dugme-gorunum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.18s ease;
}
.dugme-gorunum span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dugme-gorunum img {
  width: 18px;
  height: 18px;
}
.dugme-gorunum svg {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.dugme-gorunum .soluk-yazi {
  opacity: 0.5;
  font-style: italic;
}
.dugme-alanlar {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.dugme-alanlar .kayit-alan > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--metin-2);
}
.renk-noktalari {
  display: flex;
  gap: 10px;
}
.renk-noktasi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nokta);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.renk-noktasi:hover {
  transform: scale(1.08);
}
.renk-noktasi.secili {
  outline: 2px solid var(--metin);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .dugme-duzen {
    grid-template-columns: 1fr;
  }
}
.kayit-alan.yatay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sure-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px;
}
.kayit-alt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.kayit-kaydet {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kayit-bos {
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--metin-3);
  border: 1px dashed var(--cizgi-guclu);
  border-radius: 14px;
}
.emoji-secili {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.emoji-secili img {
  width: 24px;
  height: 24px;
}
.emoji-panel button.secili {
  background: color-mix(in srgb, var(--mavi) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--mavi);
}

/* ---------- Log kanalı seçici (satır içi) ---------- */
.log-kanal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--metin);
  background: var(--dolgu);
  transition: background 0.15s, transform 0.2s var(--yay);
}
.log-kanal:hover {
  background: var(--dolgu-2);
  transform: translateY(-1px);
}
.log-kanal:active {
  transform: scale(0.96);
}
.log-kanal span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-kanal svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--metin-3);
}
.log-kanal.bos {
  color: var(--mavi);
}

/* ---------- Komut tablosu ---------- */
.komut-satiri {
  padding: 0;
}
.komut-tablosu {
  width: 100%;
}
.komut-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 4px;
}
.komut-ust .arama {
  flex: 1;
  margin: 0;
}
.komut-baslik,
.komut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}
.komut-baslik {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--metin-3);
  border-bottom: 1px solid var(--cizgi);
}
.komut-baslik span:not(:first-child),
.komut-anahtar {
  display: flex;
  justify-content: center;
  text-align: center;
}
.komut-grup-ad {
  padding: 12px 16px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--metin-2);
}
.komut {
  border-bottom: 1px solid var(--cizgi);
  transition: background 0.15s;
  animation: yukari 0.35s var(--yumusak) both;
}
.komut:nth-child(2) { animation-delay: 20ms; }
.komut:nth-child(3) { animation-delay: 40ms; }
.komut:nth-child(4) { animation-delay: 60ms; }
.komut:nth-child(5) { animation-delay: 80ms; }
.komut:nth-child(n + 6) { animation-delay: 100ms; }
.komut:last-child {
  border-bottom: 0;
}
.komut:hover {
  background: var(--vurgu);
}
.komut.mesgul {
  opacity: 0.7;
}
.komut-bilgi {
  min-width: 0;
}
.komut-bilgi b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}
.komut-bilgi small {
  display: block;
  font-size: 12.5px;
  color: var(--metin-2);
}
.komut-adlar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.komut-adlar code {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--dolgu);
  color: var(--metin);
}
.komut-takma {
  font-size: 11.5px;
  color: var(--metin-3);
}
.komut-yok {
  color: var(--metin-3);
}
.girdi.onek-girdi {
  width: 64px;
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-weight: 700;
}

/* ---------- Görsel yükleme ---------- */
.gorsel-secici {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gorsel-onizleme {
  display: block;
  max-width: min(100%, 320px);
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--cizgi);
  animation: acil 0.25s var(--yumusak);
}

/* ---------- Kurulum listesi (modül açılmadan önce gerekenler) ---------- */
.kurulum-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.kurulum-listesi a {
  animation: acil 0.3s var(--yay) both;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--metin);
  background: var(--dolgu);
  transition: background 0.15s;
}
.kurulum-listesi a:hover {
  background: var(--dolgu-2);
}
.kurulum-listesi svg {
  width: 13px;
  height: 13px;
  color: var(--metin-3);
}
.kurulum-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--renk, var(--mavi));
}

/* =========================================================================
   Duyarlı
   ========================================================================= */
@media (max-width: 1180px) {
  .tasarim {
    grid-template-columns: minmax(0, 1fr);
  }
  .tasarim-sol {
    border-right: 0;
    border-bottom: 1px solid var(--cizgi);
  }
  .tasarim-sag-ic {
    position: static;
  }
}
@media (max-width: 1080px) {
  .iki-sutun {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .kabuk {
    grid-template-columns: minmax(0, 1fr);
  }
  .kenar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    padding: 10px;
    transform: translateX(-105%);
    transition: transform 0.42s var(--yay);
  }
  .kenar.acik {
    transform: none;
  }
  .kenar-perde {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, 0.4);
    animation: perde-gir 0.22s both;
  }
  .kenar-ic {
    background: var(--yuzey-kati);
  }
  .menu-dugme {
    display: grid;
  }
  .icerik {
    padding: 0 16px 80px;
  }
  .ust-cubuk {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .kapak-metin {
    max-width: 100%;
  }
  .kapak-gorsel {
    height: 110px;
    opacity: 0.35;
  }
  .kahraman-ic {
    max-width: 100%;
    padding: 22px;
  }
  .kahraman-wumpus {
    height: 140px;
    right: 8px;
    bottom: auto;
    top: 8px;
  }
  .satir-deger {
    max-width: 150px;
  }
  .girdi.dar {
    width: 150px;
  }
  .perde {
    align-items: end;
    padding: 0;
  }
  .kagit {
    width: 100%;
    border-radius: 26px 26px 0 0;
    max-height: 88vh;
  }
  .giris-maskot.kup,
  .giris-maskot.nelly,
  .sus {
    display: none;
  }
  .giris-maskot.wumpus {
    width: 140px;
    right: -10px;
    bottom: 2vh;
  }
}
@media (max-width: 640px) {
  .modul-baslik {
    flex-wrap: wrap;
    padding: 16px;
  }
  .modul-baslik h1 {
    font-size: 22px;
  }
  .modul-salter {
    width: 100%;
    justify-content: space-between;
  }
  .kayit-alan.yatay {
    align-items: flex-start;
  }
}

/* ---------- Mesaj Oluşturucu (Discohook benzeri) ---------- */
.mo-ust {
  gap: 10px;
}
.girdi.mo-ad {
  flex: 1;
  min-width: 0;
  height: 36px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  border-color: transparent;
}
.girdi.mo-ad:hover,
.girdi.mo-ad:focus {
  background: var(--dolgu);
}
.mo-sol {
  padding: 4px 0 16px;
}
.mo-bolum {
  display: grid;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cizgi);
}
.mo-bolum:last-child {
  border-bottom: 0;
}
.mo-bolum-ust h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.mo-bolum-ust small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--metin-3);
}
.mo-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: start;
}
textarea.girdi.mo-textarea {
  font-family: var(--yazi);
  font-size: 14px;
}
.mo-metin {
  display: grid;
  gap: 6px;
}
.dugme.mo-ekle {
  justify-self: start;
}
.mo-gorsel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mo-gorsel .girdi {
  flex: 1;
  min-width: 0;
}
.mo-gorsel-kucuk {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--dolgu);
}
.mo-gorsel-ad {
  flex: 1;
  font-size: 13px;
  color: var(--metin-2);
}
.mo-alan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto;
  gap: 8px;
  align-items: start;
}
.mo-yan {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  font-size: 12.5px;
  color: var(--metin-2);
  white-space: nowrap;
  cursor: pointer;
}
.mo-renk {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
}
.mo-sil {
  align-self: end;
}
.mo-eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.mo-eylemler .dugme {
  flex: 1 1 auto;
  justify-content: center;
}
.mo-eylemler.ikincil {
  gap: 4px 16px;
  margin-top: 10px;
}
.baglanti-dugme.tehlike {
  color: var(--kirmizi);
}
.baglanti-dugme:disabled {
  opacity: 0.4;
  text-decoration: none;
  cursor: default;
}
.mo-not {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--metin-3);
}
textarea.girdi.mo-json {
  font-size: 12px;
  white-space: pre;
}
@media (max-width: 640px) {
  .mo-alan {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mo-alan textarea {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* ---------- Şablonlar (28.09.2026) ---------- */
.sablon-filtre {
  padding: 12px 16px 4px;
  overflow-x: auto;
}
.sablon-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  padding: 12px 16px 16px;
}
.sablon-kart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: var(--vurgu);
  border: 1px solid var(--cizgi);
  cursor: pointer;
  transition: transform 0.3s var(--yay), background 0.2s, border-color 0.2s;
  animation: yukari 0.45s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.sablon-kart:hover {
  transform: translateY(-3px);
  border-color: var(--cizgi-guclu);
  background: color-mix(in srgb, var(--yuzey) 86%, var(--metin) 7%);
}
.sablon-kart:active {
  transform: scale(0.98);
}
.sablon-kart:focus-visible {
  outline: 2px solid var(--mavi);
  outline-offset: 2px;
}
.sablon-ust {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sablon-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--camgobegi);
  background: color-mix(in srgb, var(--camgobegi) 15%, transparent);
  transition: transform 0.35s var(--yay);
}
.sablon-ikon svg {
  width: 18px;
  height: 18px;
}
.sablon-kart:hover .sablon-ikon {
  transform: scale(1.08) rotate(-4deg);
}
.sablon-ad {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sablon-ad b {
  font-size: 14.5px;
}
.sablon-ad small {
  font-size: 11.5px;
  color: var(--metin-3);
}
.sablon-kart p {
  margin: 0;
  flex: 1;
  font-size: 13px;
  color: var(--metin-2);
}
.sablon-kullan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mavi);
}
.sablon-kullan svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--yay);
}
.sablon-kart:hover .sablon-kullan svg {
  transform: translateX(3px);
}
.sablon-onizleme {
  margin: 0 0 12px;
  max-height: 46vh;
  overflow: auto;
  border-radius: 16px;
}
.sablon-ayar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  align-items: start;
}
.sablon-bolum {
  margin: 18px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--metin-3);
}
@media (max-width: 640px) {
  .sablon-ayar {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hareket (28.09.2026) — yalnızca transform / opacity, bulanıklık YOK ----------
   Modül sayfasında gruplar sırayla gelir; grup açılınca satırlar kısa aralıkla belirir. */
.modul-govde > .grup:nth-child(2) { animation-delay: 40ms; }
.modul-govde > .grup:nth-child(3) { animation-delay: 80ms; }
.modul-govde > .grup:nth-child(4) { animation-delay: 120ms; }
.modul-govde > .grup:nth-child(5) { animation-delay: 160ms; }
.modul-govde > .grup:nth-child(6) { animation-delay: 200ms; }
.modul-govde > .grup:nth-child(n + 7) { animation-delay: 240ms; }
.grup.katlanir.acik .grup-govde > .satir {
  animation: yukari 0.32s var(--yumusak) both;
}
.grup.katlanir.acik .grup-govde > :nth-child(2) { animation-delay: 25ms; }
.grup.katlanir.acik .grup-govde > :nth-child(3) { animation-delay: 50ms; }
.grup.katlanir.acik .grup-govde > :nth-child(4) { animation-delay: 75ms; }
.grup.katlanir.acik .grup-govde > :nth-child(5) { animation-delay: 100ms; }
.grup.katlanir.acik .grup-govde > :nth-child(n + 6) { animation-delay: 120ms; }
.durum-hap {
  transition: background 0.25s, color 0.25s;
}
.kahraman-cip {
  font-variant-numeric: tabular-nums;
}
.grup-ust {
  transition: background 0.2s;
}
.grup.katlanir .grup-ust:hover {
  background: var(--vurgu);
}
.satir-ok,
.secici-ok {
  transition: transform 0.25s var(--yay);
}
.satir:hover .satir-ok,
.secici:hover .secici-ok {
  transform: translateX(2px);
}

/* ---------- Sunucu Nabzı — Genel Bakış panosu (29.09.2026) ----------
   Gerçek veri: 14 günlük grafik (uPlot) · şu an seste · son katılanlar · haftanın en aktifleri. */
.pano {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.pano-kart {
  grid-column: span 6;
  min-width: 0;
  padding: 16px 18px 18px;
  border-radius: var(--r);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
  animation: yukari 0.5s var(--yumusak) both;
}
.pano-nabiz > .pano-kart:nth-child(1) {
  grid-column: span 8;
}
.pano-nabiz > .pano-kart:nth-child(2) {
  grid-column: span 4;
}
.pano > .pano-kart:nth-child(2) {
  animation-delay: 60ms;
}
.pano > .pano-kart:nth-child(3) {
  animation-delay: 120ms;
}
.pano > .pano-kart:nth-child(n + 4) {
  animation-delay: 180ms;
}
@media (max-width: 1100px) {
  .pano-kart,
  .pano-nabiz > .pano-kart:nth-child(1),
  .pano-nabiz > .pano-kart:nth-child(2) {
    grid-column: span 12;
  }
}
.pano-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pano-ust h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.pano-ust small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--metin-3);
}
.pano-ust .canli-nokta {
  animation: nabiz 2s ease-in-out infinite;
}
@keyframes nabiz {
  50% {
    transform: scale(0.6);
    opacity: 0.55;
  }
}
.pano-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pano-sekme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid var(--cizgi);
  background: transparent;
  color: var(--metin-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--yay);
}
.pano-sekme svg {
  width: 14px;
  height: 14px;
}
.pano-sekme:hover {
  color: var(--metin);
  border-color: var(--cizgi-guclu);
}
.pano-sekme:active {
  transform: scale(0.95);
}
.pano-sekme.secili {
  color: var(--renk);
  border-color: color-mix(in srgb, var(--renk) 45%, transparent);
  background: color-mix(in srgb, var(--renk) 14%, transparent);
}
.pano-sekmeler.kucuk .pano-sekme {
  padding: 4px 10px;
}
.pano-deger {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 40px;
  margin-bottom: 6px;
}
.pano-deger b {
  font-family: var(--baslik-yazi);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--metin);
}
.pano-deger b small {
  font-family: var(--yazi);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--metin-3);
}
.degisim {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.degisim svg {
  width: 13px;
  height: 13px;
}
.degisim.iyi {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 14%, transparent);
}
.degisim.kotu {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
}
.degisim.notr {
  color: var(--metin-3);
  background: var(--dolgu);
}
.pano-cizim {
  position: relative;
  min-height: 200px;
}
.pano-cizim.canli {
  animation: cizim-gir 0.45s var(--yumusak) both;
}
@keyframes cizim-gir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.pano-cizim .uplot,
.pano-cizim .u-wrap {
  font-family: inherit;
}
.pano-cizim .u-cursor-x {
  border-right: 1px dashed var(--cizgi-guclu);
}
.pano-cizim .u-cursor-y {
  display: none;
}
.pano-cizim .u-over {
  cursor: crosshair;
}
.pano-ipucu {
  position: absolute;
  top: 0;
  left: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 140px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--yuzey-ust);
  border: 1px solid var(--cizgi-guclu);
  box-shadow: var(--golge-hafif);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.12s var(--yumusak);
}
.pano-ipucu.gorunur {
  opacity: 1;
}
.pano-ipucu b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pano-ek {
  font-size: 12px;
  font-weight: 700;
  color: var(--renk);
}
.pano-ipucu-ikinci {
  font-size: 12px;
  font-weight: 600;
  color: var(--kirmizi);
}
.pano-ipucu small {
  font-size: 11.5px;
  color: var(--metin-3);
}
.pano-liste {
  display: grid;
  gap: 4px;
}
.pano-liste > * {
  animation: yukari 0.4s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.pano-kanal {
  padding: 9px 10px;
  border-radius: 14px;
  transition: background 0.2s;
}
.pano-kanal:hover,
.pano-kisi:hover {
  background: var(--vurgu);
}
.pano-kanal-ust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.pano-kanal-ust svg {
  width: 15px;
  height: 15px;
  color: var(--metin-3);
}
.pano-kanal-ust b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.pano-kanal-ust small {
  font-size: 12px;
  font-weight: 700;
  color: var(--metin-3);
}
.canli-rozet {
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--kirmizi);
}
.avatar-yigini {
  display: flex;
  align-items: center;
  padding-left: 6px;
}
.yigin-oge {
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid var(--yuzey-kati);
  transition: transform 0.25s var(--yay);
}
.yigin-oge:hover {
  transform: translateY(-3px);
  z-index: 1;
}
.yigin-oge.yayinda {
  border-color: var(--kirmizi);
}
.yigin-oge.sagir {
  opacity: 0.5;
}
.seste-kisiler {
  display: grid;
  gap: 2px;
  padding-left: 22px;
}
.seste-kisi {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 0;
  font-size: 13px;
  color: var(--metin-2);
}
.seste-kisi > span:not(.canli-rozet) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seste-kisi svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--metin-3);
}
.seste-kisi .kapali-ikon {
  color: var(--kirmizi);
  opacity: 0.8;
}
.seste-kisi.sagir {
  opacity: 0.55;
}
.yigin-fazla {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--metin-2);
}
.pano-avatar {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--dolgu);
  font-size: 13px;
  font-weight: 700;
  color: var(--metin-2);
}
.pano-kisi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 14px;
  transition: background 0.2s;
}
.pano-kisi-metin {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pano-kisi-metin b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}
.pano-kisi-metin small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--metin-3);
}
.pano-fisler {
  display: flex;
  gap: 5px;
  flex: none;
}
.pano-fis {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: var(--metin-2);
  background: var(--dolgu);
}
.pano-fis.yesil {
  color: var(--yesil);
  background: color-mix(in srgb, var(--yesil) 14%, transparent);
}
.pano-fis.turuncu {
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 14%, transparent);
}
.pano-sira {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--metin-2);
  background: var(--dolgu);
}
.pano-sira.s1 {
  color: #3a2a00;
  background: var(--altin);
}
.pano-sira.s2 {
  color: #1f2328;
  background: #c3cad3;
}
.pano-sira.s3 {
  color: #2b1605;
  background: #cd8a4c;
}
.pano-cubuk {
  height: 5px;
  border-radius: 3px;
  background: var(--dolgu);
  overflow: hidden;
}
.pano-cubuk span {
  display: block;
  height: 100%;
  width: calc(var(--oran, 0) * 100%);
  border-radius: 3px;
  background: var(--renk);
  transform-origin: left;
  animation: cubuk-dol 0.8s var(--yumusak) both;
}
@keyframes cubuk-dol {
  from {
    transform: scaleX(0);
  }
}
.pano-sayi {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pano-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 0 14px;
  font-size: 13px;
  color: var(--metin-3);
}
.pano-bos img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.8;
}

/* ---------- Bekleyen işler (Genel Bakış) ---------- */
.bekleyen-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) {
  .bekleyen-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bekleyen-oge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--cizgi);
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: background 0.2s, border-color 0.2s, transform 0.25s var(--yay), opacity 0.2s;
  animation: yukari 0.4s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.bekleyen-oge.var {
  opacity: 1;
  border-color: var(--cizgi-guclu);
}
.bekleyen-oge:hover {
  opacity: 1;
  background: var(--vurgu);
  transform: translateY(-2px);
}
.bekleyen-metin {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bekleyen-metin b {
  font-family: var(--baslik-yazi);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bekleyen-metin small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--metin-3);
}
.bekleyen-ok {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--metin-3);
  transition: transform 0.25s var(--yay);
}
.bekleyen-oge:hover .bekleyen-ok {
  transform: translateX(3px);
}

/* ---------- Başvuru geçmişi (29.09.2026) ---------- */
.gecmis-suzgec {
  padding: 12px 16px 4px;
  overflow-x: auto;
}
.gecmis-liste {
  padding: 6px 8px 12px;
}
.gecmis-satir {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gecmis-ok {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--metin-3);
  transition: transform 0.25s var(--yumusak);
}
.gecmis-oge.acik .gecmis-ok {
  transform: rotate(180deg);
}
.pano-fis.mavi {
  color: var(--mavi);
  background: color-mix(in srgb, var(--mavi) 14%, transparent);
}
.pano-fis.mor {
  color: var(--mor);
  background: color-mix(in srgb, var(--mor) 14%, transparent);
}
.pano-fis.kirmizi {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
}
.gecmis-ayrinti {
  margin: 2px 8px 10px 52px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--vurgu);
  animation: acil 0.2s var(--yumusak);
}
.gecmis-karar {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--metin-2);
}
.gecmis-karar span {
  color: var(--metin);
}
.gecmis-cevap {
  margin-bottom: 8px;
}
.gecmis-cevap small {
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-3);
}
.gecmis-cevap p {
  margin: 2px 0 0;
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.gecmis-baglantilar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Analiz sayfası (29.09.2026) ---------- */
.analiz-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.analiz-sekme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 8px;
  border-radius: 99px;
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  color: var(--metin-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--yay);
}
.analiz-sekme:hover {
  color: var(--metin);
  border-color: var(--cizgi-guclu);
}
.analiz-sekme:active {
  transform: scale(0.96);
}
.analiz-sekme-ikon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--renk);
  background: color-mix(in srgb, var(--renk) 16%, transparent);
  transition: background 0.2s, color 0.2s;
}
.analiz-sekme-ikon svg {
  width: 15px;
  height: 15px;
}
.analiz-sekme.secili {
  color: var(--metin);
  border-color: color-mix(in srgb, var(--renk) 50%, transparent);
  background: color-mix(in srgb, var(--renk) 12%, var(--yuzey));
}
.analiz-sekme.secili .analiz-sekme-ikon {
  color: #fff;
  background: var(--renk);
}
.analiz-govde {
  animation: sayfa-gir 0.35s var(--yumusak) both;
}
.analiz-kutular {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1250px) {
  .analiz-kutular {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .analiz-kutular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.analiz-kutu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
  animation: yukari 0.45s var(--yumusak) both;
}
.analiz-kutu:nth-child(2) { animation-delay: 30ms; }
.analiz-kutu:nth-child(3) { animation-delay: 60ms; }
.analiz-kutu:nth-child(4) { animation-delay: 90ms; }
.analiz-kutu:nth-child(5) { animation-delay: 120ms; }
.analiz-kutu:nth-child(6) { animation-delay: 150ms; }
.analiz-kutu-ust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--renk);
}
.analiz-kutu-ust svg {
  width: 14px;
  height: 14px;
}
.analiz-kutu > b {
  font-family: var(--baslik-yazi);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.analiz-kutu > small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--metin-3);
}
.pano-kart.genis {
  grid-column: span 12;
}
.dagilim {
  display: grid;
  gap: 10px;
}
.dagilim-satir {
  display: grid;
  grid-template-columns: minmax(90px, 34%) 1fr auto 38px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  animation: yukari 0.4s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.dagilim-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--metin-2);
}
.dagilim-satir b {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dagilim-satir small {
  font-size: 12px;
  color: var(--metin-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pano-cubuk.kalin {
  height: 8px;
  border-radius: 4px;
}
.cinsiyet-cubuk {
  display: flex;
  gap: 4px;
  height: 14px;
  margin: 8px 0 14px;
  border-radius: 7px;
  overflow: hidden;
}
.cinsiyet-cubuk span {
  transform-origin: left;
  animation: cubuk-dol 0.8s var(--yumusak) both;
}
.cinsiyet-cubuk .erkek,
.cinsiyet-aciklama i.erkek {
  background: var(--mavi);
}
.cinsiyet-cubuk .kadin,
.cinsiyet-aciklama i.kadin {
  background: var(--pembe);
}
.cinsiyet-aciklama {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--metin-2);
}
.cinsiyet-aciklama span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cinsiyet-aciklama i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.cinsiyet-aciklama b {
  color: var(--metin);
}
.isi-harita {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.isi-saat,
.isi-gun {
  font-size: 10.5px;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.isi-saat {
  text-align: left;
  min-height: 14px;
}
.isi-hucre {
  aspect-ratio: 1;
  min-height: 12px;
  border-radius: 4px;
  background: var(--renk);
  opacity: calc(0.07 + var(--o, 0) * 0.93);
  transition: transform 0.2s var(--yay);
  animation: isi-gir 0.5s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 2ms);
}
.isi-hucre:hover {
  transform: scale(1.25);
}
@keyframes isi-gir {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
.isi-lejant {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--metin-3);
}
.isi-lejant i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--blurple);
  opacity: calc(0.07 + var(--o) * 0.93);
}
.isi-lejant span:first-child {
  margin-right: 4px;
}
.isi-lejant span:last-child {
  margin-left: 4px;
}
.tablo-kap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -6px;
}
.analiz-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.analiz-tablo th {
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--metin-3);
  text-align: left;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.analiz-tablo th.sayi {
  text-align: right;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.analiz-tablo th.sayi:hover,
.analiz-tablo th.secili {
  color: var(--altin);
}
.analiz-tablo td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--cizgi);
}
.analiz-tablo td.sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.analiz-tablo tbody tr {
  animation: yukari 0.35s var(--yumusak) both;
  animation-delay: calc(var(--i, 0) * 30ms);
  transition: background 0.2s;
}
.analiz-tablo tbody tr:hover {
  background: var(--vurgu);
}
.tablo-kisi {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 140px;
  font-weight: 600;
}
.tablo-puan {
  display: grid;
  grid-template-columns: 70px auto;
  align-items: center;
  justify-content: end;
  gap: 8px;
}
.puan-kurallari {
  display: grid;
  gap: 8px;
}
.puan-kurallari > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--metin-2);
}
.puan-kurallari svg {
  width: 16px;
  height: 16px;
  color: var(--metin-3);
}
.puan-kurallari span {
  flex: 1;
}
.puan-kurallari .baglanti-dugme {
  justify-self: start;
  margin-top: 4px;
}
.son-ceza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  transition: background 0.2s;
}
.son-ceza:hover {
  background: var(--vurgu);
}
.son-ceza > .pano-fis:first-child {
  flex: none;
}
@media (max-width: 640px) {
  .isi-harita {
    grid-template-columns: 28px repeat(24, minmax(0, 1fr));
    gap: 2px;
  }
  .isi-hucre {
    min-height: 8px;
    border-radius: 2px;
  }
  .dagilim-satir {
    grid-template-columns: minmax(70px, 30%) 1fr auto;
  }
  .dagilim-satir small {
    display: none;
  }
}

/* ---------- Başlık yazısı (29.09.2026): başlıklar ve büyük sayılar Plus Jakarta Sans, gövde Inter ---------- */
h1,
h2,
h3,
.parcacik-deger,
.kapak h2 {
  font-family: var(--baslik-yazi);
}

/* ---------- Kesinti Dedektörü (02.10.2026): durum kutuları + kesinti geçmişi ---------- */
.dedektor {
  margin-bottom: 18px;
}
.dedektor-kutular {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dedektor-kutular .analiz-kutu > b {
  font-size: 22px;
}
@media (max-width: 1100px) {
  .dedektor-kutular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dedektor-gecmis .gecmis-satir:disabled {
  cursor: default;
  opacity: 0.72;
}
.dedektor-sure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-width: 92px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--metin-2);
  background: var(--dolgu);
}
.dedektor-sure svg {
  width: 13px;
  height: 13px;
}
.dedektor-sure.uzun {
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 14%, transparent);
}
.dedektor-gecmis .gecmis-ayrinti {
  margin-left: 12px;
}
.dedektor-kisiler + .dedektor-kisiler {
  margin-top: 10px;
}
.dedektor-kisiler > small {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--metin-3);
}
.dedektor-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dedektor-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--yuzey-ust);
  border: 1px solid var(--cizgi);
}
.dedektor-cip.soluk {
  padding-left: 10px;
  color: var(--metin-3);
}
.dedektor-cip.sorunlu {
  border-color: color-mix(in srgb, var(--kirmizi) 45%, transparent);
  color: var(--kirmizi);
}
.dedektor-cip svg {
  width: 13px;
  height: 13px;
}
.dedektor-sorun {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--renk);
}

/* =========================================================================
   GÖRÜNÜM: CİDDİ (03.10.2026, kullanıcı: "bazı yerler güzel olmuş ama biraz daha ciddileştir")
   Kullanıcı menüsünden seçilir (Ciddi / Canlı), varsayılan Ciddi; `html[data-stil]`.
   KİMLİK KORUNUR — Discord renkleri, renkli modül ikonları, 3D görseller yerinde (27.09'da renkleri silen
   "siyah-beyaz" tasarım reddedilmişti). Ciddiyet şunlardan gelir: daha köşeli hatlar, yaylanmayan sakin hareket,
   kartlarda boya yerine ince renk çizgisi, daha düz başlık yazısı, daha sıkı ölçüler, soluk zemin süsleri.
   Yalnızca üstüne yazan kurallar: "Canlı" seçilince bu blok tümüyle devre dışı kalır.
   ========================================================================= */
[data-stil='ciddi'] {
  --r: 14px;
  --r-buyuk: 18px;
  --yay: cubic-bezier(0.22, 0.61, 0.36, 1); /* yaylanma (taşma) yok */
  --baslik-yazi: var(--yazi); /* başlıklar da Inter — daha düz */
}
/* Zemindeki uçuşan 3D parçalar geri planda kalsın (kapak / kahraman görselleri yerinde) */
[data-stil='ciddi'] .sus {
  opacity: 0.2;
}
[data-stil='ciddi'][data-tema='acik'] .sus {
  opacity: 0.14;
}
/* --- Köşeler: büyük yüzeyler 16, orta 12, haplar ve çipler 7 --- */
[data-stil='ciddi'] :is(.modul-karti, .parcacik, .kahraman, .kagit, .giris-kart) {
  border-radius: 16px;
}
[data-stil='ciddi'] :is(.analiz-kutu, .bildirim, .zil-panel, .sablon-kart, .kutu, .dc, .acilir-menu, .arama-sonuc, .bekleyen-oge, .sablon-onizleme, .kurulum-sorular) {
  border-radius: 12px;
}
[data-stil='ciddi'] :is(.durum-hap, .rozet-kucuk, .kapak-cip, .kahraman-cip, .cip, .fis, .pano-fis, .menu-rozet, .suzgec-cip, .suzgec-cip span, .dedektor-cip, .dedektor-sure) {
  border-radius: 7px;
}
[data-stil='ciddi'] :is(.arama input, .kategori-ara input) {
  border-radius: 9px;
}
[data-stil='ciddi'] .rozet-pro {
  border-radius: 5px;
}
[data-stil='ciddi'] .rozet-pro.kucuk {
  border-radius: 4px;
}
[data-stil='ciddi'] :is(h1, h2, h3) {
  letter-spacing: -0.02em;
}
/* --- Kenar çubuğu --- */
[data-stil='ciddi'] .menu a {
  border-radius: 9px;
}
[data-stil='ciddi'] .menu-kutu {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
[data-stil='ciddi'] .menu a:hover .menu-kutu {
  transform: none;
}
[data-stil='ciddi'] .sunucu-kimlik img {
  border-radius: 10px;
}
[data-stil='ciddi'] .kullanici-kart {
  border-radius: 10px;
}
/* --- Kategori kapağı: daha alçak, daha az boya, görsel küçük --- */
[data-stil='ciddi'] .kapak {
  min-height: 136px;
  padding: 22px 24px;
  margin-bottom: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--renk) 12%, transparent), transparent 55%),
    var(--yuzey);
}
[data-stil='ciddi'] .kapak h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
[data-stil='ciddi'] .kapak p {
  margin: 4px 0 11px;
  font-size: 14px;
}
[data-stil='ciddi'] .kapak .simge-kare {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
[data-stil='ciddi'] .kapak .simge-kare svg {
  width: 25px;
  height: 25px;
}
[data-stil='ciddi'] .kapak-gorsel {
  height: 148px;
  right: 18px;
}
[data-stil='ciddi'] .kategori-serit {
  height: 6px;
  border-radius: 4px;
}
[data-stil='ciddi'] .kategori-serit i {
  border-radius: 2px;
}
/* --- Süzgeçler: hap yerine köşeli, daha alçak --- */
[data-stil='ciddi'] .suzgec-cip {
  height: 32px;
  padding: 0 5px 0 11px;
  font-size: 12.5px;
}
[data-stil='ciddi'] .suzgec-cip:active {
  transform: none;
}
[data-stil='ciddi'] .kategori-ara input {
  height: 36px;
}
/* --- Modül kartı: boya yerine solda ince renk çizgisi, ikon yumuşak tonlu, başlık düz, filigran daha silik --- */
[data-stil='ciddi'] .modul-grid {
  gap: 12px;
}
[data-stil='ciddi'] .modul-karti {
  min-height: 166px;
  padding: 15px 15px 12px;
}
[data-stil='ciddi'] .modul-karti.acik {
  background: var(--yuzey);
  border-color: var(--cizgi);
}
[data-stil='ciddi'] .modul-karti.acik::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--renk, var(--gri));
}
[data-stil='ciddi'] .modul-karti.sorunlu {
  border-color: color-mix(in srgb, var(--turuncu) 28%, var(--cizgi));
}
[data-stil='ciddi'] .modul-karti:hover,
[data-stil='ciddi'] .modul-karti.acik:hover {
  border-color: var(--cizgi-guclu);
  transform: translateY(-1px);
}
[data-stil='ciddi'] .modul-karti-fon {
  opacity: 0.035;
  transform: rotate(-8deg);
}
[data-stil='ciddi'] .modul-karti.acik .modul-karti-fon {
  opacity: 0.08;
}
[data-stil='ciddi'] .modul-karti:hover .modul-karti-fon {
  opacity: 0.06;
  transform: rotate(-8deg) translate(-4px, -4px);
}
[data-stil='ciddi'] .modul-karti.acik:hover .modul-karti-fon {
  opacity: 0.12;
}
[data-stil='ciddi'] .modul-karti .modul-ikon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
[data-stil='ciddi'] .modul-karti .modul-ikon svg {
  width: 20px;
  height: 20px;
}
[data-stil='ciddi'] .modul-karti.acik .modul-ikon {
  color: var(--renk, var(--gri));
  background: color-mix(in srgb, var(--renk, var(--gri)) 16%, transparent);
}
[data-stil='ciddi'] .modul-karti:hover .modul-ikon {
  transform: none;
}
[data-stil='ciddi'] .modul-karti-ad {
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
[data-stil='ciddi'] .modul-karti > p {
  font-size: 13px;
}
[data-stil='ciddi'] .modul-karti-alt {
  margin-top: 12px;
}
[data-stil='ciddi'] .modul-karti-git {
  border-radius: 8px;
}
[data-stil='ciddi'] .modul-ikon.buyuk {
  border-radius: 13px;
}
/* --- Bildirim çipleri --- */
[data-stil='ciddi'] .bildirim-liste :is(button, span) {
  border-radius: 7px;
}

/* =========================================================================
   RAZORU HESAP SAYFALARI (03.10.2026): /sunucular (sunucu seçimi) · /yonetim (sahip paneli)
   Panelle aynı dil: cam kartlar, Discord renkleri; parıltı / renkli gölge yok.
   ========================================================================= */
.hs {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.hs-ust {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--zemin) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cizgi);
}
/* Razoru logosu: çizim yok — eğik blurple kesik + büyük harf, geniş aralıklı kelime (siteyle aynı işaret) */
.hs-marka {
  display: flex;
  align-items: center;
  color: var(--metin);
}
/*
 * LOGO (05.10.2026) — kullanıcının koyduğu razorulogo.png. Görsel iki maskeye ayrılır (scripts/logo-uret.mjs →
 * /img/logo-yazi.png + /img/logo-simge.png), RENGİ burada verilir: harfler bulunduğu yerin yazı rengini alır
 * (koyu temada açık, açık temada koyu), simge temanın renk geçişini. Simge kutunun
 * %47–69'unu kaplar; geçiş yalnızca o aralığa yayılır (yoksa simgede geçişin ortası görünürdü).
 */
.logo {
  position: relative;
  display: inline-block;
  flex: none;
  height: 22px;
  aspect-ratio: 2516 / 575;
}
.logo-harf,
.logo-simge {
  position: absolute;
  inset: 0;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.logo-harf {
  background: currentColor;
  -webkit-mask-image: url('/img/logo-yazi.png');
  mask-image: url('/img/logo-yazi.png');
}
.logo-simge {
  background: var(--logo-gecis, linear-gradient(135deg, #5865f2 0%, #8b5cf6 52%, #eb459e 100%)) 60.4% 0 / 22.3% 100% no-repeat;
  -webkit-mask-image: url('/img/logo-simge.png');
  mask-image: url('/img/logo-simge.png');
}
/* Açık temada simgenin geçişi bir ton koyu: beyaz zeminde solmasın */
[data-tema='acik'] .logo-simge {
  --logo-gecis: linear-gradient(135deg, #4a55e8 0%, #7c3aed 52%, #db2777 100%);
}
.hs-ust-sag {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hs-bag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--metin-2);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.hs-bag:hover {
  background: var(--vurgu);
  color: var(--metin);
}
.hs-bag svg {
  width: 17px;
  height: 17px;
}
.hs-kullanici {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 4px;
  height: 36px;
  border-radius: 99px;
  background: var(--dolgu);
  font-size: 14px;
}
.hs-kullanici img,
.hs-bas {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blurple);
  color: #fff;
  font-weight: 700;
}
.hs-govde {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px clamp(16px, 4vw, 40px) 80px;
}
.hs-baslik h1 {
  margin: 0;
  font-family: var(--baslik-yazi);
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.03em;
}
.hs-baslik p {
  margin: 8px 0 26px;
  color: var(--metin-2);
  max-width: 640px;
}
.hs-baslik a,
.hs-uyari a,
.hs-dipnot a {
  color: var(--blurple-2);
  font-weight: 600;
}
.hs-uyari {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--metin-2);
  background: color-mix(in srgb, var(--mavi) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mavi) 24%, transparent);
}
.hs-uyari.kirmizi {
  background: color-mix(in srgb, var(--kirmizi) 10%, transparent);
  border-color: color-mix(in srgb, var(--kirmizi) 26%, transparent);
}
.hs-uyari svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.hs-ara {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  height: 40px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: var(--dolgu);
  color: var(--metin-3);
}
/* Boyutu verilmeyen SVG esnek kutuyu dolduruyordu: arama simgesi kutunun tamamı kadar büyüyüp sayfayı kaplıyordu */
.hs-ara svg {
  flex: none;
  width: 17px;
  height: 17px;
}
.hs-ara input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 14.5px;
}
.hs-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 12px;
}
.hs-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  transition: transform 0.2s var(--yumusak), border-color 0.2s;
}
.hs-kart:hover {
  transform: translateY(-2px);
  border-color: var(--cizgi-guclu);
}
.hs-kart.ana {
  border-color: color-mix(in srgb, var(--altin) 40%, var(--cizgi));
}
.hs-simge {
  flex: none;
  border-radius: 16px;
  object-fit: cover;
  background: var(--dolgu);
}
.hs-simge-harf {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--metin-2);
}
.hs-kart-metin {
  flex: 1;
  min-width: 0;
}
.hs-kart-metin b {
  display: block;
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.hs-rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--metin-2);
  background: var(--dolgu);
}
.hs-rozet i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hs-rozet.yesil { color: var(--yesil); background: color-mix(in srgb, var(--yesil) 14%, transparent); }
.hs-rozet.altin { color: var(--altin); background: color-mix(in srgb, var(--altin) 15%, transparent); }
.hs-rozet.mor { color: #b39dff; background: color-mix(in srgb, #8c6bff 16%, transparent); }
.hs-rozet.pembe { color: #ff86b8; background: color-mix(in srgb, #f0609e 15%, transparent); }
.hs-rozet.turuncu { color: var(--turuncu); background: color-mix(in srgb, var(--turuncu) 15%, transparent); }
.hs-rozet.kirmizi { color: var(--kirmizi); background: color-mix(in srgb, var(--kirmizi) 15%, transparent); }
[data-tema='acik'] .hs-rozet.mor { color: #6a4cff; }
[data-tema='acik'] .hs-rozet.pembe { color: #d0306f; }
.hs-dugme {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  color: var(--metin);
  background: var(--dolgu-2);
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.hs-dugme:hover:not(:disabled):not(.pasif) {
  background: var(--dolgu);
  transform: translateY(-1px);
}
.hs-dugme svg {
  width: 16px;
  height: 16px;
}
.hs-dugme.ana {
  background: var(--blurple);
  color: #fff;
}
.hs-dugme.ana:hover:not(:disabled) {
  background: var(--blurple-2);
}
.hs-dugme.tehlike {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 12%, transparent);
}
.hs-dugme.pasif,
.hs-dugme:disabled {
  opacity: 0.55;
  cursor: default;
}
.hs-dipnot {
  margin-top: 22px;
  color: var(--metin-3);
  font-size: 14px;
  text-align: center;
}
/* --- Sahip paneli --- */
.hs-kutu {
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.hs-kutu > header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.hs-kutu > header > div {
  flex: 1;
  min-width: 0;
}
.hs-kutu h2 {
  margin: 0;
  font-size: 18px;
}
.hs-kutu header p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--metin-2);
}
.hs-kutu-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--blurple-2);
  background: color-mix(in srgb, var(--blurple) 16%, transparent);
}
.hs-kutu-ikon svg {
  width: 20px;
  height: 20px;
}
.hs-bot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--dolgu);
}
.hs-bot > img,
.hs-bot > .hs-bas {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.hs-bot > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.hs-bot small {
  display: block;
  color: var(--metin-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.hs-bot-sayilar {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--metin-2);
}
.hs-bot-sayilar b {
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}
.hs-satir {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.hs-kod {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--dolgu);
  font-size: 12.5px;
  color: var(--metin-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.hs-form label,
.hs-alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}
.hs-form label span,
.hs-alan > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-2);
}
.hs-form input {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--cizgi);
  background: var(--dolgu);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.hs-form input:focus {
  border-color: var(--blurple);
}
.hs-form .hs-alan {
  flex: 0 0 auto;
}
.hs-alan .bolumlu {
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.hs-alan .bolumlu button {
  min-width: 0;
  /* 34 + 2×2 iç boşluk = 38: yanındaki girdilerle aynı yükseklik (etiketler aynı hizada dursun) */
  height: 34px;
  padding: 0 11px;
  white-space: nowrap;
}
/* Etiketin içindeki teknik ad (merchant_id gibi): soluk ve küçük */
.hs-form label span i {
  margin-left: 4px;
  font-style: normal;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--metin-3);
}
/* Formda satır kırıcı: sonraki alanlar alt satıra iner */
.hs-kir {
  flex-basis: 100%;
  height: 0;
}
.hs-saga {
  margin-left: auto;
}
.hs-not {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--metin-3);
}
.hs-tablo {
  margin-top: 16px;
  border-top: 1px solid var(--cizgi);
}
.hs-tablo-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(110px, auto) 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--cizgi);
}
.hs-tablo-satir.soluk {
  opacity: 0.5;
}
.hs-tablo-ad {
  min-width: 0;
}
.hs-tablo-ad b {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-tablo-ad small,
.hs-tablo-sure {
  font-size: 12px;
  color: var(--metin-3);
}
.hs-ikon-dugme {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--metin-3);
}
.hs-ikon-dugme:hover {
  color: var(--kirmizi);
  background: color-mix(in srgb, var(--kirmizi) 12%, transparent);
}
.hs-ikon-dugme svg {
  width: 16px;
  height: 16px;
}
.hs-bos {
  margin: 14px 0 0;
  color: var(--metin-3);
  font-size: 13.5px;
}
/* --- Sahip paneli: sekmeler, özet, kullanıcılar, ödeme (03.10.2026) --- */
.hs-govde.genis {
  max-width: 1160px;
}
.hs-sekmeler {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--r, 14px);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.hs-sekmeler::-webkit-scrollbar {
  display: none;
}
.hs-sekmeler button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  color: var(--metin-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.hs-sekmeler button:hover {
  color: var(--metin);
  background: var(--vurgu);
}
.hs-sekmeler button.secili {
  color: #fff;
  background: var(--blurple);
}
.hs-sekmeler svg {
  width: 16px;
  height: 16px;
}
.hs-sekmeler button i {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--turuncu);
  color: #1a1206;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.hs-sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.hs-sayi {
  display: grid;
  gap: 2px;
  padding: 16px;
  text-align: left;
  border-radius: 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  transition: transform 0.2s var(--yumusak), border-color 0.2s;
}
.hs-sayi:hover {
  transform: translateY(-2px);
  border-color: var(--cizgi-guclu);
}
.hs-sayi svg {
  width: 18px;
  height: 18px;
  margin-bottom: 8px;
  color: var(--blurple-2);
}
.hs-sayi b {
  font-family: var(--baslik-yazi);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hs-sayi span {
  font-size: 12.5px;
  color: var(--metin-2);
}
.hs-sayi.gelir svg {
  color: var(--yesil);
}
.hs-sayi.gelir b {
  font-size: 21px;
}
.hs-adimlar {
  display: grid;
  gap: 6px;
}
.hs-adim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  text-align: left;
  border-radius: 12px;
  background: var(--dolgu);
  transition: background 0.15s;
}
.hs-adim:hover {
  background: var(--dolgu-2);
}
.hs-adim > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--metin-3);
}
.hs-adim-isaret {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cizgi-guclu);
}
.hs-adim.tamam .hs-adim-isaret {
  border-color: var(--yesil);
  background: var(--yesil);
  color: #06210f;
}
.hs-adim-isaret svg {
  width: 13px;
  height: 13px;
}
.hs-adim-metin {
  flex: 1;
  min-width: 0;
}
.hs-adim-metin b {
  display: block;
  font-size: 14px;
}
.hs-adim-metin small {
  font-size: 12.5px;
  color: var(--metin-3);
}
.hs-kutu h3 {
  margin: 20px 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--metin-2);
}
.hs-kutu code {
  font-size: 0.92em;
}
.hs-ara.genis {
  max-width: none;
  border: 1px solid var(--cizgi);
}
.hs-form label.tam {
  flex: 1 1 100%;
}
.hs-hesap {
  border-bottom: 1px solid var(--cizgi);
}
.hs-hesap-satir {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 4px;
  text-align: left;
  border-radius: 10px;
  transition: background 0.15s;
}
.hs-hesap-satir:hover {
  background: var(--vurgu);
}
.hs-hesap-satir > img,
.hs-hesap-satir > .hs-bas {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.hs-hesap-satir .hs-tablo-ad {
  flex: 1;
}
.hs-hesap-satir > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--metin-3);
}
.hs-ayrinti {
  padding: 4px 4px 18px;
}
.hs-ayrinti-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.hs-ayrinti-ozet span {
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--dolgu);
  min-width: 0;
}
.hs-ayrinti-ozet small {
  display: block;
  font-size: 11.5px;
  color: var(--metin-3);
}
.hs-ayrinti-ozet b {
  font-size: 13.5px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.hs-ayrinti-eylem {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--cizgi);
}
.hs-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hs-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--dolgu);
  font-size: 13px;
  color: var(--metin-2);
}
a.hs-cip:hover {
  color: var(--metin);
  background: var(--dolgu-2);
}
.hs-cip svg {
  width: 13px;
  height: 13px;
}
.hs-cip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yesil);
}
.hs-cip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #b39dff;
}
.hs-cip em.pembe {
  color: #ff86b8;
}
.hs-cip em.altin {
  color: var(--altin);
}
.hs-tablo.sade {
  margin-top: 0;
  border-top: 0;
}
.hs-tablo-satir.genis {
  grid-template-columns: minmax(0, 1fr) auto minmax(110px, auto) auto;
}
.hs-satir-eylem {
  display: flex;
  gap: 6px;
}
.hs-dugme.kucuk {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}
.hs-dugme.buyuk {
  height: 46px;
  width: 100%;
  font-size: 15px;
  border-radius: 13px;
}
.hs-yukselt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blurple-2);
}
.hs-yukselt:hover {
  text-decoration: underline;
}
.hs-yukselt svg {
  width: 12px;
  height: 12px;
}
.hs-liste {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--metin-2);
}
.hs-fiyatlar {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.hs-fiyat-izgara {
  display: grid;
  grid-template-columns: max-content repeat(var(--sutun, 2), minmax(110px, 160px));
  align-items: center;
  gap: 8px 12px;
  font-size: 13.5px;
}
.hs-fiyat-izgara > b {
  font-weight: 600;
  color: var(--metin-2);
}
.hs-fiyat {
  position: relative;
  display: block;
}
.hs-fiyat input {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 12px;
  border-radius: 10px;
  border: 1px solid var(--cizgi);
  background: var(--dolgu);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.hs-fiyat input:focus {
  border-color: var(--blurple);
}
.hs-fiyat i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  color: var(--metin-3);
}

/* --- Ödeme sayfası --- */
.od {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.od-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blurple) 18%, transparent);
  color: var(--blurple-2);
  font-family: var(--baslik-yazi);
  font-weight: 800;
  font-size: 14px;
}
.od-sunucular {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px;
}
.od-sunucu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  text-align: left;
  border-radius: 13px;
  background: var(--dolgu);
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.od-sunucu:hover {
  background: var(--dolgu-2);
}
.od-sunucu.secili {
  border-color: var(--blurple);
  background: color-mix(in srgb, var(--blurple) 10%, var(--dolgu));
}
.od-sunucu .hs-simge {
  border-radius: 12px;
}
.od-sunucu > span:not(.hs-simge) {
  flex: 1;
  min-width: 0;
}
.od-sunucu b {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-secim {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cizgi-guclu);
  color: transparent;
}
.od-sunucu.secili .od-secim {
  border-color: var(--blurple);
  background: var(--blurple);
  color: #fff;
}
.od-secim svg {
  width: 11px;
  height: 11px;
}
.od-ozet {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 20px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.od-ozet h2 {
  margin: 0;
  font-size: 18px;
}
.od-ozet dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}
.od-ozet dt {
  color: var(--metin-3);
}
.od-ozet dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.od-toplam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--cizgi);
  font-size: 13.5px;
  color: var(--metin-2);
}
.od-toplam b {
  font-family: var(--baslik-yazi);
  font-size: 26px;
  color: var(--metin);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.od-onay {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--metin-2);
  cursor: pointer;
}
.od-onay input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--blurple);
}
.od-onay a {
  color: var(--blurple-2);
  font-weight: 600;
}
.od-ozet .hs-not {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.od-ozet .hs-not svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.od-ozet .hs-uyari {
  margin: 0;
}
.od-cerceve-sar {
  max-width: 760px;
  margin: 0 auto;
}
.od-cerceve-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 16px 16px 0 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-bottom: 0;
  font-size: 14px;
  color: var(--metin-2);
}
.od-cerceve-ust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.od-cerceve-ust svg {
  width: 16px;
  height: 16px;
  color: var(--yesil);
}
.od-cerceve-ust b {
  font-size: 16px;
  color: var(--metin);
}
.od-cerceve {
  display: block;
  width: 100%;
  height: 780px;
  border: 1px solid var(--cizgi);
  border-radius: 0 0 16px 16px;
  background: #fff;
}
.od-bos,
.od-sonuc {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 24px auto 0;
  padding: 36px 28px;
  text-align: center;
  border-radius: 22px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.od-bos h2,
.od-sonuc h2 {
  margin: 6px 0 0;
  font-family: var(--baslik-yazi);
  font-size: 24px;
  letter-spacing: -0.02em;
}
.od-bos p,
.od-sonuc p {
  margin: 0;
  color: var(--metin-2);
}
.od-sonuc .hs-dugme.buyuk {
  width: auto;
  padding: 0 22px;
  margin-top: 10px;
}
.od-isaret {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kirmizi) 16%, transparent);
  color: var(--kirmizi);
}
.od-sonuc.tamam .od-isaret {
  background: color-mix(in srgb, var(--yesil) 18%, transparent);
  color: var(--yesil);
}
.od-isaret.bekle {
  background: var(--dolgu);
  color: var(--blurple-2);
}
.od-isaret svg {
  width: 30px;
  height: 30px;
}
.od-eylemler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* --- Giriş sayfası: Razoru --- */
.giris-logo {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--metin);
}
.giris-logo .logo {
  height: 34px;
}
.giris-kapali {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  text-align: left;
  border-radius: 14px;
  font-size: 14px;
  color: var(--metin-2);
  background: color-mix(in srgb, var(--mavi) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mavi) 24%, transparent);
}
.giris-kapali svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.giris-kapali b {
  display: block;
  color: var(--metin);
}
.giris-kapali.tamam {
  background: color-mix(in srgb, var(--yesil) 10%, transparent);
  border-color: color-mix(in srgb, var(--yesil) 26%, transparent);
}
.giris-kapali.tamam svg {
  color: var(--yesil);
}
.giris-kapali + .giris-kapali,
.giris-kapali + .discord-dugme,
.giris-kapali + .giris-ikincil,
.discord-dugme + .giris-ikincil {
  margin-top: 12px;
}
/* Girişteki ikincil düğme (kurucu girişi, Sunucularım): Discord düğmesinin sade hâli */
.giris-ikincil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.giris-not.kisa {
  margin-top: 8px;
}
.giris-baglar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 18px 0 0;
  font-size: 12.5px;
}
.giris-baglar a {
  color: var(--metin-3);
}
.giris-baglar a:hover {
  color: var(--metin);
}
[data-stil='ciddi'] .hs-sekmeler button,
[data-stil='ciddi'] .hs-adim,
[data-stil='ciddi'] .od-sunucu {
  border-radius: 8px;
}
@media (max-width: 900px) {
  .od {
    grid-template-columns: 1fr;
  }
  .od-ozet {
    position: static;
  }
}
@media (max-width: 640px) {
  .hs-tablo-satir {
    grid-template-columns: minmax(0, 1fr) 32px;
  }
  .hs-tablo-satir > .hs-rozet,
  .hs-tablo-sure {
    grid-column: 1;
  }
  .hs-kullanici b {
    display: none;
  }
  .hs-tablo-satir.genis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Tek sütunda rozet satırın tamamına yayılıp renkli bir çubuğa dönüşüyordu */
  .hs-tablo-satir > .hs-rozet {
    justify-self: start;
  }
  /* Dar ekranda sekmeler yana kaymaz (seçili sekme ekran dışında kalıyordu): alt alta satırlara dizilir */
  .hs-sekmeler {
    flex-wrap: wrap;
    overflow: visible;
  }
  .hs-sekmeler button {
    flex: 1 1 auto;
    justify-content: center;
  }
  .hs-hesap-satir .hs-tablo-sure {
    display: none;
  }
  .od-cerceve {
    height: 880px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Eski düz liste (bot listesi, geçmiş, sistem) ---------- */
.liste {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-hafif);
}
.grup-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--metin-2);
}
.grup-baslik button {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--mavi);
}
.grup-alt {
  padding: 8px 18px 0;
  font-size: 12.5px;
  color: var(--metin-2);
}

/* Genel Bakış › Dikkat Gerekenler: açık ama çalışamayan modüller (tıklanınca modül sayfası) */
.dikkat-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.dikkat-satir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--turuncu) 45%, var(--cizgi));
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.dikkat-satir:hover {
  background: var(--vurgu);
}
.dikkat-metin {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dikkat-metin b {
  font-size: 14px;
}
.dikkat-metin small {
  font-size: 12px;
  color: var(--metin-2);
  overflow-wrap: anywhere;
}

/* ---------- Kurulum → Özelleştirme (28.09.2026) ----------
   Modül kurulana kadar görünüm / gelişmiş ayarlar tek kartta bekler. */
.ozel-kart {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px dashed var(--cizgi-guclu);
  background: var(--vurgu);
  animation: sayfa-gir 0.45s var(--yumusak) both;
}
.ozel-kart-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--mor);
  background: color-mix(in srgb, var(--mor) 16%, transparent);
}
.ozel-kart-ikon svg {
  width: 20px;
  height: 20px;
}
.ozel-kart-metin {
  flex: 1;
  min-width: 0;
}
.ozel-kart-metin h3 {
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ozel-kart-sayi {
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  color: var(--metin-2);
  background: var(--dolgu);
}
.ozel-kart-metin p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--metin-2);
}
.ozel-kart-fisler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ozel-kart-fisler span {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 99px;
  color: var(--metin-2);
  border: 1px solid var(--cizgi);
}
@media (max-width: 640px) {
  .ozel-kart {
    flex-wrap: wrap;
  }
  .ozel-kart .dugme {
    width: 100%;
  }
}
.ozel-bekleyen {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-top: 1px solid var(--cizgi);
  background: transparent;
  color: var(--metin-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.ozel-bekleyen:hover {
  background: var(--vurgu);
}
.ozel-bekleyen svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--mor);
}
.ozel-bekleyen span:not(.ozel-bekleyen-sag) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ozel-bekleyen b {
  color: var(--metin);
  font-weight: 600;
}
.ozel-bekleyen-sag {
  flex: none;
  color: var(--mavi);
  font-weight: 600;
}
.kurulum-not {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--metin-2);
  background: var(--vurgu);
}
.kurulum-not svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--mavi);
}
.kurulum-sorular {
  display: grid;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--cizgi);
  overflow: hidden;
  background: var(--yuzey);
}
.kurulum-sorular > .iskelet + .iskelet {
  margin-top: 6px;
}

/* =========================================================================
   05.10.2026 — Discord desenli düğmeler · tema düğmesi · kenar çubuğu (mert4) ·
   açık tema (iOS havası: yumuşak renk geçişli zemin, beyaz kartlar, net yazı)
   Kullanıcı: "mavi butonların arka planına Discord duvar kâğıdı gibi bir şey koy,
   %80 karart" · "soldaki kısmı geliştir" · "white tema da ekle, renk geçişlerine
   ve modernliğe önem ver". Parıltı / renkli gölge yok; geçişler durağan (ucuz).
   ========================================================================= */

/* `--desen`: proje kökündeki button.png (sunucu küçültüp /img/dugme.webp olarak sunar; dosya yoksa çizgi desen döner) */
:root {
  --desen: url('/img/dugme.webp');
}

/* ---------- 1) Ana (mavi) düğmeler: kullanıcının görseli + %20 karartma ----------
   İlk hâli %80 karartma + iç beyaz çizgiydi; kullanıcı: "kenarlarda hafif beyazlık kalıyor, karartmayı %20'ye indirelim"
   → çizgi kalktı, görsel artık açık. Yazı görselin üstünde okunsun diye hafif koyu yazı gölgesi (düğmenin gölgesi değil). */
.dugme.ana,
.discord-dugme,
.hs-dugme.ana {
  background-color: var(--blurple);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--desen);
  background-size: auto, cover;
  /* Görselde karakterlerin yüzleri ortanın biraz altında: dar düğmede o şerit görünsün */
  background-position: center, center 62%;
  background-repeat: no-repeat;
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 6, 30, 0.9), 0 0 10px rgba(4, 6, 30, 0.6);
}
.dugme.ana:hover:not(:disabled),
.discord-dugme:hover:not(:disabled),
.hs-dugme.ana:hover:not(:disabled) {
  background-color: var(--blurple);
  background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--desen);
  background-size: auto, cover;
  background-position: center, center 62%;
  background-repeat: no-repeat;
}
.dugme.ana svg,
.discord-dugme svg,
.hs-dugme.ana svg {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(4, 6, 30, 0.7));
}

/* ---------- Tema düğmesi (üst çubuk · hesap sayfaları · giriş) ---------- */
.tema-dugme {
  margin-left: auto;
  flex: none;
}
.tema-dugme + .zil-kap {
  margin-left: 0;
}
.tema-dugme svg {
  transition: transform 0.35s var(--yumusak);
}
.tema-dugme:hover svg {
  transform: rotate(18deg);
}
.hs-tema {
  padding: 0 9px;
}
.hs-tema svg {
  margin: 0;
}
.giris-tema {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5;
  margin: 0;
}

/* ---------- 3) Kenar çubuğu: mert4 ---------- */
.mert4 .kenar-ust {
  padding: 12px 12px 6px;
}
.mert4 .sunucu-kimlik {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 16px;
  color: #fff;
  background-color: var(--blurple);
  background-image: linear-gradient(90deg, rgba(8, 9, 22, 0.8) 0%, rgba(8, 9, 22, 0.52) 58%, rgba(8, 9, 22, 0.2) 100%), var(--desen);
  background-size: auto, cover;
  background-position: center, center 60%;
  background-repeat: no-repeat;
  text-shadow: 0 1px 3px rgba(4, 6, 30, 0.7);
}
.mert4 .sunucu-kimlik img {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}
.mert4 .sunucu-kimlik b {
  color: #fff;
}
.mert4 .sunucu-kimlik span {
  color: rgba(255, 255, 255, 0.74);
}
.mert4 .menu {
  padding: 2px 10px 6px;
  scrollbar-width: none;
}
.mert4 .menu::-webkit-scrollbar {
  display: none;
}
.mert4 .menu-bolum {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 14px;
  padding: 8px 10px 3px;
}
.mert4 .menu a {
  --renk: var(--blurple);
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 11px 0 5px;
  margin-bottom: 2px;
  border-radius: 12px;
  color: var(--metin-2);
  font-size: 14px;
  font-weight: 550;
  transition: background 0.15s, color 0.15s;
}
.mert4 .menu a:hover {
  background: var(--vurgu);
  color: var(--metin);
}
.mert4 .menu a.etkin {
  background: color-mix(in srgb, var(--renk) 14%, transparent);
  color: var(--metin);
  font-weight: 650;
}
.m4-kutu {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--dolgu);
  color: var(--metin-2);
  transition: background 0.18s, color 0.18s, transform 0.25s var(--yumusak);
}
.m4-kutu svg {
  width: 16px;
  height: 16px;
}
.mert4 .menu a:hover .m4-kutu {
  color: var(--metin);
  transform: scale(1.05);
}
.mert4 .menu a.etkin .m4-kutu {
  background: linear-gradient(145deg, color-mix(in srgb, var(--renk) 78%, #fff), var(--renk));
  color: #fff;
  transform: none;
}
.m4-ad {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m4-sayi {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.mert4 .menu a.etkin .m4-sayi {
  color: color-mix(in srgb, var(--renk) 62%, var(--metin));
}
.m4-sayi.uyari {
  padding: 1px 7px;
  border-radius: 99px;
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 16%, transparent);
}
.m4-nokta {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: -3px;
  border-radius: 50%;
  background: var(--turuncu);
}
[data-stil='ciddi'] .mert4 .menu a {
  border-radius: 10px;
}
[data-stil='ciddi'] .m4-kutu {
  border-radius: 7px;
}
[data-stil='ciddi'] .mert4 .sunucu-kimlik {
  border-radius: 12px;
}

/* ---------- 4) AÇIK TEMA ---------- */
[data-tema='acik'] {
  --zemin: #f4f5fa;
  --perde-ust: rgba(244, 245, 250, 0);
  --perde-alt: rgba(244, 245, 250, 0);
  --yuzey: rgba(255, 255, 255, 0.92);
  --yuzey-kati: #ffffff;
  --yuzey-ust: #ffffff;
  --vurgu: rgba(24, 28, 70, 0.045);
  --cam: rgba(255, 255, 255, 0.74);
  --cizgi: rgba(28, 32, 70, 0.09);
  --cizgi-guclu: rgba(28, 32, 70, 0.17);
  --metin: #0c0d16;
  --metin-2: rgba(38, 40, 62, 0.78);
  --metin-3: rgba(38, 40, 62, 0.5);
  --dolgu: rgba(88, 92, 132, 0.1);
  --dolgu-2: rgba(88, 92, 132, 0.18);
  --golge: 0 24px 60px rgba(30, 34, 92, 0.16);
  --golge-hafif: 0 1px 1px rgba(30, 34, 92, 0.04), 0 10px 28px rgba(30, 34, 92, 0.07);
}
/* Zemin: bulanık sunucu görseli yerine yumuşak renk geçişleri (iOS duvar kâğıdı havası) — durağan, ucuz */
[data-tema='acik'] .duvar {
  background:
    radial-gradient(58% 46% at 8% 0%, rgba(124, 140, 255, 0.34) 0%, rgba(124, 140, 255, 0) 62%),
    radial-gradient(48% 42% at 100% 6%, rgba(255, 138, 196, 0.26) 0%, rgba(255, 138, 196, 0) 60%),
    radial-gradient(54% 48% at 88% 100%, rgba(96, 205, 255, 0.26) 0%, rgba(96, 205, 255, 0) 62%),
    radial-gradient(46% 44% at 0% 100%, rgba(186, 140, 255, 0.24) 0%, rgba(186, 140, 255, 0) 60%),
    #f4f5fa;
}
[data-tema='acik'] .duvar::after {
  background: none;
}
[data-tema='acik'] .cam {
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: var(--golge-hafif);
}
[data-tema='acik'] .ust-cubuk.dolu {
  background: rgba(250, 250, 253, 0.72);
}
/* Kenar çubuğu: sunucu kartı canlı blurple geçiş (açık temada koyu blok yerine renk) */
[data-tema='acik'] .mert4 .sunucu-kimlik {
  background-image: linear-gradient(90deg, rgba(40, 46, 150, 0.84) 0%, rgba(78, 66, 200, 0.5) 58%, rgba(110, 84, 230, 0.2) 100%), var(--desen);
}
[data-tema='acik'] .m4-kutu {
  background: rgba(60, 64, 110, 0.08);
}
[data-tema='acik'] .mert4 .menu a.etkin {
  background: color-mix(in srgb, var(--renk) 12%, #fff);
}
[data-tema='acik'] .arama input {
  background: rgba(60, 64, 110, 0.07);
}
[data-tema='acik'] .zil-dugme {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}
[data-tema='acik'] .zil-dugme:hover,
[data-tema='acik'] .zil-dugme.acik {
  background: #fff;
}

/* ---------- 2) Analiz: "… kurulu değil" kutusu ---------- */
.analiz-eksik {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--r);
  border: 1px dashed var(--cizgi-guclu);
  background: var(--vurgu);
  color: var(--metin-2);
}
.analiz-eksik-ikon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--dolgu);
  color: var(--metin-2);
}
.analiz-eksik-ikon svg {
  width: 18px;
  height: 18px;
}
.analiz-eksik-metin {
  flex: 1;
  min-width: 0;
}
.analiz-eksik-metin b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--metin);
}
.analiz-eksik-metin small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
}
.analiz-eksik .dugme {
  flex: none;
}
.analiz-eksik .dugme svg {
  width: 13px;
  height: 13px;
}
/* Sayı kutularının arasında: kapalı sistemin kutularının yerini tutar */
.analiz-kutular > .analiz-eksik {
  grid-column: span 2;
  margin-bottom: 0;
}
.analiz-kutular > .analiz-eksik.genis {
  grid-column: span 4;
}
/* İki sütunluk dar hâl: yazı yan yana sıkışmasın — başlık, açıklama ve düğme alt alta */
.analiz-kutular > .analiz-eksik:not(.genis) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
}
.analiz-kutular > .analiz-eksik:not(.genis) .analiz-eksik-ikon {
  display: none;
}
/* Kartın içinde: kartın kendi çerçevesi yeter */
.pano-kart > .analiz-eksik {
  margin: 4px 0 0;
  padding: 12px;
}
@media (max-width: 1250px) {
  .analiz-kutular > .analiz-eksik,
  .analiz-kutular > .analiz-eksik.genis {
    grid-column: 1 / -1;
  }
  .analiz-kutular > .analiz-eksik:not(.genis) {
    flex-direction: row;
    align-items: center;
  }
  .analiz-kutular > .analiz-eksik:not(.genis) .analiz-eksik-ikon {
    display: grid;
  }
}
@media (max-width: 640px) {
  .analiz-eksik {
    flex-wrap: wrap;
  }
  .analiz-eksik .dugme {
    margin-left: 49px;
  }
}

/* ---------- 6) Genel Bakış › modül panosu ----------
   Kullanıcı: "modüller çok karışık ve kötü görünüyor, hızlıca göstermenin daha iyi bir yolu var mı?" → her kategori tek
   kart, modüller tek satır (nokta + ad). Kartlar sütunlara dizilir (boyları eşit değil); sütun düzeninde transform
   kırpıldığı için kartta hareket yok, yalnızca opaklık ve zemin rengi. Köşeler --r'den: Ciddi'de köşeli, Canlı'da yuvarlak. */
.mp-baslik {
  align-items: center;
}
.mp-baslik h3 small {
  margin-left: 9px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mp-baslik .suzgec-cip {
  height: 30px;
  font-size: 12.5px;
}
.suzgec-cip.eksik:not(.secili) span {
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 15%, transparent);
}
.mp {
  columns: 3;
  column-gap: 10px;
  margin-bottom: 18px;
}
.mp-kart,
.mp-iskelet {
  break-inside: avoid;
  margin: 0 0 10px;
}
.mp-kart {
  padding: 6px;
  border-radius: var(--r);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  animation: mp-belir 0.4s var(--yumusak) both;
  animation-delay: calc(var(--sira, 0) * 30ms);
}
@keyframes mp-belir {
  from {
    opacity: 0;
  }
}
.mp-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px 6px 6px;
  border-radius: calc(var(--r) - 6px);
  color: inherit;
  text-decoration: none;
  transition: background 0.18s;
}
.mp-ust:hover {
  background: var(--dolgu);
}
.mp-ikon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: calc(var(--r) - 10px);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--renk) 16%, transparent);
  color: var(--renk);
}
.mp-ikon svg {
  width: 17px;
  height: 17px;
}
.mp-ad {
  flex: 1;
  min-width: 0;
  font-family: var(--baslik-yazi);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-oran {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--metin-3);
  font-variant-numeric: tabular-nums;
}
.mp-oran b {
  font-weight: 700;
  color: var(--metin);
}
/* Işık şeridi: modül başına bir parça — kaçının açık olduğu okumadan görülür */
.mp-serit {
  display: flex;
  gap: 3px;
  margin: 5px 9px 7px;
}
.mp-serit i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--dolgu);
}
.mp-serit i.acik {
  background: var(--renk);
}
.mp-serit i.eksik {
  background: var(--turuncu);
}
.mp-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.mp-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: calc(var(--r) - 8px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--metin-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.mp-satir.acik {
  font-weight: 600;
  color: var(--metin);
}
.mp-satir:hover {
  background: var(--dolgu);
  color: var(--metin);
}
.mp-nokta {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--metin-3);
}
.mp-satir.acik .mp-nokta {
  border-color: var(--yesil);
  background: var(--yesil);
}
.mp-satir.eksik .mp-nokta {
  border-color: var(--turuncu);
  background: var(--turuncu);
}
.mp-modul {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-not {
  flex: none;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--turuncu);
}
@media (max-width: 1180px) {
  .mp {
    columns: 2;
  }
}
/* Telefon: kartlar alt alta, modüller kartın içinde iki sütun (sayfa uzamasın); eksik yazısı yerine turuncu nokta yeter */
@media (max-width: 640px) {
  .mp {
    columns: 1;
  }
  .mp-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mp-not {
    display: none;
  }
  .mp-baslik .kategori-suzgec {
    margin-left: 0;
  }
}

/* ---------- 7) Model kartları (modülün üstünde "hangi düzen?" — Kayıt: normal / cinsiyetli) ----------
   Kart = şablon: adı, tek cümle, küçük bir örnek (komut → verilen roller). Seçili kart blurple çerçeve + "Seçili".
   Parıltı / gölge yok; köşeler --r'den. */
.model {
  margin: 0 0 14px;
  padding: 16px;
  border-radius: var(--r-buyuk);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.model-ust h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.model-ust p {
  margin: 3px 0 13px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--metin-2);
}
.model-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}
.model-kart {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px 14px;
  border-radius: var(--r);
  border: 1.5px solid var(--cizgi);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.model-kart:hover:not(.secili):not(:disabled) {
  border-color: var(--cizgi-guclu);
  background: var(--dolgu);
}
.model-kart:disabled {
  cursor: default;
}
.model-kart.secili {
  border-color: var(--blurple);
  background: color-mix(in srgb, var(--blurple) 9%, transparent);
  cursor: default;
}
.model-kart-ust {
  display: flex;
  align-items: center;
  gap: 10px;
}
.model-kart-ust b {
  flex: 1;
  min-width: 0;
  font-family: var(--baslik-yazi);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.model-ikon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: calc(var(--r) - 8px);
  display: grid;
  place-items: center;
  background: var(--dolgu);
  color: var(--metin-2);
}
.model-ikon svg {
  width: 17px;
  height: 17px;
}
.model-kart.secili .model-ikon {
  background: var(--blurple);
  color: #fff;
}
.model-isaret {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  border: 1px solid var(--cizgi);
  font-size: 12px;
  font-weight: 650;
  color: var(--metin-2);
}
.model-isaret svg {
  width: 12px;
  height: 12px;
}
.model-kart.secili .model-isaret {
  border-color: transparent;
  background: var(--blurple);
  color: #fff;
}
.model-ozet {
  font-size: 13px;
  line-height: 1.45;
  color: var(--metin-2);
}
/* Örnek: yetkilinin yazdığı komut → üyenin aldığı roller (+ takma ad) */
.model-ornek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--cizgi);
}
.model-ornek > svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--metin-3);
}
.model-ornek-sol,
.model-ornek-sag {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.model-ornek code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--dolgu);
  font-size: 12px;
  color: var(--metin);
  white-space: nowrap;
}
.model-rol {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--dolgu);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.model-rol::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yesil);
}
.model-rol + .model-rol::before {
  background: var(--blurple);
}
.model-ad {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-2);
}
[data-stil='ciddi'] .model-isaret {
  border-radius: 7px;
}
@media (max-width: 640px) {
  .model {
    padding: 13px;
  }
  .model-ornek {
    flex-wrap: wrap;
  }
}