/* ==================== TEMA BELİRTEÇLERİ ====================
   Sitenin BÜTÜN renkleri bu belirteçlerden gelir. Kuşanılan Darkin teması
   base.html'de yalnız bu blokla aynı adları ezer — böylece tek yerden
   dokunarak nav, kart, tablo, anahtar, buton… hepsi birden değişir.
   Sabit renk yazmak yerine her zaman bir belirteç kullan. */
:root {
  --dl-bg: #0f1117;        /* sayfa zemini (en koyu) */
  --dl-card: #171a23;      /* kart yüzeyi */
  --dl-yuzey0: #13161e;    /* çukur yüzey — grup başlıkları */
  --dl-yuzey2: #22262f;    /* yükseltilmiş yüzey — embed, hover, kaydet çubuğu */
  --dl-yuzey3: #3d4354;    /* en yüksek — buton önizleme, kaydırak yuvası */
  --dl-border: #262a36;
  --dl-accent: #7c5cff;
  --dl-accent2: #00d4aa;
  --dl-metin: #e6e8ef;
  --dl-metin-sonuk: #8b90a3;
  --dl-nav1: #14161f;      /* nav degradesi — sol */
  --dl-nav2: #1b1430;      /* nav degradesi — sağ */
  --dl-buton-metin: #fff;  /* vurgu zemin üstündeki yazı */
}

body {
  background: var(--dl-bg);
  color: var(--dl-metin);
}

.dl-nav {
  background: linear-gradient(90deg, var(--dl-nav1) 0%, var(--dl-nav2) 100%);
  border-bottom: 1px solid var(--dl-border);
}

.dl-logo { color: var(--dl-accent); }

.dl-dev {
  background: linear-gradient(90deg, var(--dl-accent), var(--dl-accent2));
  color: var(--dl-bg);
  font-weight: 700;
  letter-spacing: .5px;
}

.card {
  background: var(--dl-card);
  border: 1px solid var(--dl-border);
  border-radius: .75rem;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--dl-border);
  font-weight: 600;
}

.dl-stat {
  border-left: 3px solid var(--dl-accent);
}
.dl-stat .dl-num {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.dl-stat .dl-lbl {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dl-metin-sonuk);
}

/* Discord embed görünümü */
.dl-embed {
  border-left: 4px solid var(--dl-accent);
  background: var(--dl-yuzey2);
  border-radius: .35rem;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}
.dl-embed-baslik { font-weight: 700; margin-bottom: .35rem; }
.dl-embed-alan { margin-top: .55rem; }
.dl-embed-alan .ad { font-size: .82rem; font-weight: 700; color: var(--dl-metin-sonuk); }
.dl-embed-alan .deger { font-size: .9rem; white-space: pre-wrap; }
.dl-embed-alt {
  margin-top: .6rem; font-size: .75rem; color: var(--dl-metin-sonuk);
  border-top: 1px solid var(--dl-border); padding-top: .4rem;
}
.dl-mesaj {
  background: var(--dl-yuzey2); border-radius: .35rem; padding: .7rem .9rem;
  white-space: pre-wrap; margin-bottom: .6rem;
}

.dl-buton-onizleme {
  display: inline-block; padding: .25rem .7rem; margin: .15rem .25rem 0 0;
  background: var(--dl-yuzey3); border-radius: .25rem; font-size: .82rem;
}

table.dl-tablo { font-size: .86rem; }
table.dl-tablo td { max-width: 320px; overflow-wrap: anywhere; }

.dl-kod {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .85rem;
}

/* Kullanıcı gösterimi: nick öncelikli, ID ikincil */
.dl-kullanici {
  text-decoration: none;
  font-weight: 500;
}
.dl-kullanici:hover { text-decoration: underline; }

.dl-kullanici-tam .dl-nick {
  display: block;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.25;
}
.dl-kullanici-tam .dl-nick:hover { text-decoration: underline; }
.dl-kullanici-tam .dl-id {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .72rem;
  color: var(--dl-metin-sonuk);
  line-height: 1.25;
}

.dl-yan-liste {
  max-height: 70vh; overflow-y: auto;
}
.dl-yan-liste .list-group-item {
  background: transparent; border-color: var(--dl-border); cursor: pointer;
}
.dl-yan-liste .list-group-item:hover { background: var(--dl-yuzey2); }
.dl-yan-liste .list-group-item.active {
  background: var(--dl-accent); border-color: var(--dl-accent);
}

.dl-giris-kutu { max-width: 460px; margin: 6vh auto; }

/* ==================== Discord tarzı ayar satırı ====================
   Sol: başlık + açıklama · Sağ: kaydırmalı tuş. Discord'un sunucu
   ayarları ekranındaki alışkanlığı korur. */

.dl-ayar-grup {
  border: 1px solid var(--dl-border);
  border-radius: .75rem;
  background: var(--dl-card);
  overflow: hidden;
  margin-bottom: 1rem;
}
.dl-ayar-grup-baslik {
  padding: .7rem 1.1rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dl-metin-sonuk);
  border-bottom: 1px solid var(--dl-border);
  background: var(--dl-yuzey0);
}

.dl-ayar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--dl-border);
  transition: background .12s;
}
.dl-ayar:last-child { border-bottom: none; }
.dl-ayar:hover { background: var(--dl-yuzey2); }

.dl-ayar-metin { flex: 1 1 auto; min-width: 0; }
.dl-ayar-baslik {
  font-weight: 600;
  font-size: .96rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .18rem;
}
.dl-ayar-aciklama {
  font-size: .845rem;
  color: var(--dl-metin-sonuk);
  line-height: 1.45;
}
.dl-ayar-not {
  font-size: .8rem;
  margin-top: .4rem;
  padding: .35rem .6rem;
  border-radius: .35rem;
  background: color-mix(in srgb, var(--dl-accent) 14%, transparent);
  border-left: 2px solid var(--dl-accent);
  color: var(--dl-accent);
}
.dl-ayar-kilit {
  font-size: .8rem;
  margin-top: .4rem;
  color: var(--dl-metin-sonuk);
}

/* Alt seviye (özellik) anahtarları biraz içeride dursun */
.dl-ayar.dl-ozellik { padding-left: 2.4rem; }
.dl-ayar.dl-ozellik .dl-ayar-baslik { font-weight: 500; font-size: .92rem; }

/* Kaydırmalı tuş */
.dl-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  margin-top: .1rem;
}
.dl-switch input { opacity: 0; width: 0; height: 0; }
.dl-switch .dl-kaydirak {
  position: absolute;
  inset: 0;
  background: var(--dl-yuzey3);
  border-radius: 24px;
  cursor: pointer;
  transition: background .18s;
}
.dl-switch .dl-kaydirak::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
}
.dl-switch input:checked + .dl-kaydirak { background: var(--dl-accent2); }
.dl-switch input:checked + .dl-kaydirak::before { transform: translateX(20px); }
.dl-switch input:disabled + .dl-kaydirak { opacity: .4; cursor: not-allowed; }
.dl-switch.dl-bekliyor .dl-kaydirak { opacity: .5; }

/* Sağlık rozeti */
.dl-saglik {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
}
.dl-saglik-yesil  { background: rgba(25,135,84,.15);  color: #4ade80; }
.dl-saglik-sari   { background: rgba(255,193,7,.15);  color: #ffcf4d; }
.dl-saglik-kirmizi{ background: rgba(220,53,69,.15);  color: #ff6b7a; }

.dl-bulgu {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid var(--dl-border);
}
.dl-bulgu:last-child { border-bottom: none; }
.dl-bulgu-aksiyon {
  font-size: .82rem; color: var(--dl-accent2); margin-top: .2rem;
}

/* ==================== KAYDETME ÇUBUĞU (Discord tarzı) ====================
   Değişiklik yapılınca aşağıdan belirir, kaydedilene ya da sıfırlanana kadar
   durur. Ekonomi ayarları çok sayıda birbirine bağlı anahtar içerdiği için
   tek tek anında kaydetmek yerine toplu onay daha güvenli: kullanıcı üç kutuyu
   işaretleyip sonucu bir kerede görüyor, yanlışsa "Sıfırla" ile başa dönüyor. */
.dl-kaydet-cubugu {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 150%);
  width: min(820px, calc(100% - 2rem));
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.dl-kaydet-cubugu.acik {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.dl-kaydet-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--dl-yuzey2);
  border: 1px solid var(--dl-border);
  border-left: 4px solid #f0b232;
  border-radius: 10px;
  padding: .7rem 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
}
.dl-kaydet-metin { font-size: .9rem; }
.dl-kaydet-metin .bi { color: #f0b232; }
.dl-kaydet-butonlar { display: flex; align-items: center; gap: .5rem; }
.dl-kaydet-cubugu.dl-bekliyor .dl-kaydet-ic { opacity: .6; pointer-events: none; }

/* Kaydedilmemiş alanı görsel olarak işaretle — hangi ayarı değiştirdiğini unutma */
.dl-degisti { outline: 2px solid #f0b232 !important; outline-offset: 2px; border-radius: 6px; }
.dl-switch.dl-degisti { outline-offset: 3px; }

@media (max-width: 576px) {
  .dl-kaydet-ic { flex-direction: column; align-items: stretch; }
  .dl-kaydet-butonlar { justify-content: flex-end; }
}

/* ==================== PAZAR: sparkline ve tıklanabilir satır (Faz 12) ==== */
.dl-spark {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: -1px;
  color: var(--dl-accent2);
  font-size: .9rem;
}
.dl-esya-satir { transition: background .12s ease; }
.dl-esya-satir:hover { background: color-mix(in srgb, var(--dl-accent) 14%, transparent) !important; }
.dl-esya-satir:hover strong { color: var(--dl-accent); }

/* ==================== BOOTSTRAP'İ TEMAYA BAĞLA ====================
   Bootstrap'in kendi birincil rengi (mavi) ve koyu tablo/form zeminleri
   sabittir; kuşanılan tema bunlara ulaşamıyordu, sayfanın yarısı temalı
   yarısı mavi kalıyordu. Aşağısı Bootstrap'in bileşen değişkenlerini bizim
   belirteçlerimize bağlar — böylece --dl-accent değişince butonlar, sekmeler,
   çubuklar, tablolar ve formlar da birlikte döner. */

.btn-primary {
  --bs-btn-bg: var(--dl-accent);
  --bs-btn-border-color: var(--dl-accent);
  --bs-btn-color: var(--dl-buton-metin);
  --bs-btn-hover-bg: color-mix(in srgb, var(--dl-accent) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--dl-accent) 82%, #000);
  --bs-btn-hover-color: var(--dl-buton-metin);
  --bs-btn-active-bg: color-mix(in srgb, var(--dl-accent) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--dl-accent) 70%, #000);
  --bs-btn-active-color: var(--dl-buton-metin);
  --bs-btn-disabled-bg: var(--dl-accent);
  --bs-btn-disabled-border-color: var(--dl-accent);
  --bs-btn-disabled-color: var(--dl-buton-metin);
}
.btn-outline-primary {
  --bs-btn-color: var(--dl-accent);
  --bs-btn-border-color: var(--dl-accent);
  --bs-btn-hover-bg: var(--dl-accent);
  --bs-btn-hover-border-color: var(--dl-accent);
  --bs-btn-hover-color: var(--dl-buton-metin);
  --bs-btn-active-bg: var(--dl-accent);
  --bs-btn-active-border-color: var(--dl-accent);
  --bs-btn-active-color: var(--dl-buton-metin);
  --bs-btn-disabled-color: var(--dl-accent);
  --bs-btn-disabled-border-color: var(--dl-accent);
}

/* Sarı / mavi / yeşil Bootstrap kutuları temayı dinlemiyordu — ocağa gir,
   uyarı şeridi, rozet. Vurgu ve ikinci vurgu belirteçlerine bağlanır. */
.btn-warning {
  --bs-btn-bg: var(--dl-accent);
  --bs-btn-border-color: var(--dl-accent);
  --bs-btn-color: var(--dl-buton-metin);
  --bs-btn-hover-bg: color-mix(in srgb, var(--dl-accent) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--dl-accent) 82%, #000);
  --bs-btn-hover-color: var(--dl-buton-metin);
  --bs-btn-active-bg: color-mix(in srgb, var(--dl-accent) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--dl-accent) 70%, #000);
  --bs-btn-active-color: var(--dl-buton-metin);
  --bs-btn-disabled-bg: var(--dl-accent);
  --bs-btn-disabled-border-color: var(--dl-accent);
  --bs-btn-disabled-color: var(--dl-buton-metin);
}
.btn-info, .btn-success {
  --bs-btn-bg: var(--dl-accent2);
  --bs-btn-border-color: var(--dl-accent2);
  --bs-btn-color: var(--dl-buton-metin);
  --bs-btn-hover-bg: color-mix(in srgb, var(--dl-accent2) 82%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--dl-accent2) 82%, #000);
  --bs-btn-hover-color: var(--dl-buton-metin);
  --bs-btn-active-bg: color-mix(in srgb, var(--dl-accent2) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--dl-accent2) 70%, #000);
  --bs-btn-active-color: var(--dl-buton-metin);
  --bs-btn-disabled-bg: var(--dl-accent2);
  --bs-btn-disabled-border-color: var(--dl-accent2);
  --bs-btn-disabled-color: var(--dl-buton-metin);
}

.alert-warning {
  --bs-alert-color: var(--dl-metin);
  --bs-alert-bg: color-mix(in srgb, var(--dl-accent) 16%, var(--dl-card));
  --bs-alert-border-color: color-mix(in srgb, var(--dl-accent) 45%, var(--dl-border));
  --bs-alert-link-color: var(--dl-accent);
}
.alert-info {
  --bs-alert-color: var(--dl-metin);
  --bs-alert-bg: color-mix(in srgb, var(--dl-accent2) 16%, var(--dl-card));
  --bs-alert-border-color: color-mix(in srgb, var(--dl-accent2) 45%, var(--dl-border));
  --bs-alert-link-color: var(--dl-accent2);
}
.alert-success {
  --bs-alert-color: var(--dl-metin);
  --bs-alert-bg: color-mix(in srgb, var(--dl-accent2) 18%, var(--dl-card));
  --bs-alert-border-color: color-mix(in srgb, var(--dl-accent2) 50%, var(--dl-border));
  --bs-alert-link-color: var(--dl-accent2);
}
.alert-secondary {
  --bs-alert-color: var(--dl-metin);
  --bs-alert-bg: var(--dl-yuzey0);
  --bs-alert-border-color: var(--dl-border);
  --bs-alert-link-color: var(--dl-accent);
}

.bg-warning {
  background-color: var(--dl-accent) !important;
  color: var(--dl-buton-metin) !important;
}
.bg-info, .bg-success {
  background-color: var(--dl-accent2) !important;
  color: var(--dl-buton-metin) !important;
}
.badge.bg-warning, .badge.bg-warning.text-dark,
.bg-warning.text-dark,
.badge.bg-info, .badge.bg-info.text-dark,
.bg-info.text-dark,
.badge.bg-success {
  color: var(--dl-buton-metin) !important;
}
.text-warning { color: var(--dl-accent) !important; }
.text-info, .text-success { color: var(--dl-accent2) !important; }

.bg-primary { background-color: var(--dl-accent) !important; color: var(--dl-buton-metin) !important; }
.text-primary { color: var(--dl-accent) !important; }
.border-primary { border-color: var(--dl-accent) !important; }
.progress { background-color: var(--dl-yuzey0); }
.progress-bar:not([class*="bg-"]) { background-color: var(--dl-accent); }

/* Gövde bağlantıları vursun; nav/buton/menü bağlantıları kendi rengini korusun */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(.alert-link) {
  color: var(--dl-accent);
}

.nav-tabs { border-bottom-color: var(--dl-border); }
.nav-tabs .nav-link { color: var(--dl-metin-sonuk); }
.nav-tabs .nav-link:hover { border-color: transparent transparent var(--dl-accent); color: var(--dl-metin); }
.nav-tabs .nav-link.active {
  background: var(--dl-card);
  border-color: var(--dl-border) var(--dl-border) transparent;
  color: var(--dl-accent);
}

/* Tablolar: kendi koyu zeminleri yerine kartın (temalı) zemini görünsün */
.table-dark, .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dl-metin);
  --bs-table-border-color: var(--dl-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--dl-accent) 7%, transparent);
  --bs-table-striped-color: var(--dl-metin);
  --bs-table-hover-bg: color-mix(in srgb, var(--dl-accent) 14%, transparent);
  --bs-table-hover-color: var(--dl-metin);
}

/* Form denetimleri */
.form-control, .form-select, .input-group-text {
  background-color: var(--dl-yuzey0);
  border-color: var(--dl-border);
  color: var(--dl-metin);
}
.form-control:focus, .form-select:focus {
  background-color: var(--dl-yuzey0);
  color: var(--dl-metin);
  border-color: var(--dl-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dl-accent) 25%, transparent);
}
.form-control::placeholder { color: var(--dl-metin-sonuk); }

.dropdown-menu {
  --bs-dropdown-bg: var(--dl-card);
  --bs-dropdown-border-color: var(--dl-border);
  --bs-dropdown-link-color: var(--dl-metin);
  --bs-dropdown-link-hover-bg: var(--dl-yuzey2);
  --bs-dropdown-link-hover-color: var(--dl-metin);
  --bs-dropdown-link-active-bg: var(--dl-accent);
  --bs-dropdown-link-active-color: var(--dl-buton-metin);
}
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--dl-metin); --bs-list-group-border-color: var(--dl-border); }
.modal-content { background: var(--dl-card); border: 1px solid var(--dl-border); }

/* Kuşanılan temanın nav'daki göstergesi */
.dl-tema-rozet {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  background: color-mix(in srgb, var(--dl-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--dl-accent) 45%, transparent);
  color: var(--dl-accent);
  text-decoration: none;
}
.dl-tema-rozet:hover { background: color-mix(in srgb, var(--dl-accent) 30%, transparent); color: var(--dl-accent); }

/* Tema menüsü — her satırda temanın kendi renklerinden bir örnek yuvarlağı,
   böylece oyuncu adı okumadan hangi tema olduğunu görür. */
.dl-tema-menu { min-width: 15rem; }
.dl-tema-menu form { margin: 0; }
.dl-tema-menu .dropdown-item { width: 100%; border: 0; background: none; }
.dl-tema-menu .dropdown-item:disabled { opacity: 1; color: var(--dl-accent); font-weight: 600; }
.dl-tema-ornek {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--o1) 0%, var(--o2) 55%, var(--o3) 100%);
  border: 1px solid color-mix(in srgb, var(--o3) 60%, transparent);
  box-shadow: 0 0 0 1px #0006;
}

/* Tablodaki kopyalanabilir ID rozeti — küratör formları ürün/kişi ID'si
   istediğinde, ID'yi görecek ve tek tıkla alacak bir yer olsun diye. */
.dl-id-kopya {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .78rem; line-height: 1;
  padding: .2rem .4rem; border-radius: .3rem; cursor: pointer;
  background: var(--dl-yuzey0);
  border: 1px solid var(--dl-border);
  color: var(--dl-metin-sonuk);
  white-space: nowrap;
}
.dl-id-kopya:hover { border-color: var(--dl-accent); color: var(--dl-accent); }
.dl-id-kopya.kopyalandi {
  background: var(--dl-accent); border-color: var(--dl-accent);
  color: var(--dl-buton-metin);
}

/* ==================== AVATAR + YEDEĞİ ====================
   Discord CDN her zaman erişilebilir olmayabilir (ağ kesintisi, engel, dev
   girişinde hash yokluğu). Resim yüklenemezse kırık ikon göstermek yerine
   arkadaki baş harf dairesi ortaya çıkar — uydurma bir resim değil, açıkça
   yer tutucu. img `onerror` ile kendini kaldırır. */
.dl-avatar {
  position: relative; flex: 0 0 auto;
  width: var(--boyut, 40px); height: var(--boyut, 40px);
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--dl-accent), var(--dl-yuzey3));
  display: inline-flex; align-items: center; justify-content: center;
}
.dl-avatar-yedek {
  font-weight: 700; color: var(--dl-buton-metin);
  font-size: calc(var(--boyut, 40px) * .42); line-height: 1;
  user-select: none; text-transform: uppercase;
}
.dl-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.dl-sv {
  display: inline-flex; align-items: center; gap: .55rem;
  min-width: 0; max-width: 100%;
}
.dl-sv-ikon {
  width: 36px; height: 36px; border-radius: 10px;
  object-fit: cover; flex: 0 0 auto;
  background: var(--dl-yuzey2);
  border: 1px solid var(--dl-border);
}
.dl-sv-ikon-yok {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: var(--dl-metin-sonuk);
}
.dl-sv-ad { font-weight: 600; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-sv-buyuk .dl-sv-ikon { width: 48px; height: 48px; border-radius: 14px; }
.dl-sv-buyuk .dl-sv-ad { font-size: 1.15rem; }

/* Nav'daki künye — hesaba giden yol tıklanabilir görünsün (eskiden düz yazıydı,
   kimse tıklanabileceğini anlamıyordu). */
.dl-kunye {
  padding: .2rem .6rem .2rem .25rem; border-radius: 999px;
  border: 1px solid transparent; color: var(--dl-metin);
  transition: background .12s, border-color .12s;
}
.dl-kunye:hover {
  background: color-mix(in srgb, var(--dl-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--dl-accent) 45%, transparent);
  color: var(--dl-metin);
}

/* Panel üstündeki profil şeridi — tıklanabilir olduğu belli olsun */
.dl-profil-serit { transition: border-color .12s, transform .12s; }
.dl-profil-serit:hover {
  border-color: var(--dl-accent);
  transform: translateY(-2px);
}

/* ---------- Kılık (dev: "kullanıcı gözünden bak") ---------- */
/* Şerit bilerek dikkat çekici: kılıktayken sahip gerçekten kısıtlıdır ve
   "neden bu sayfa 403 veriyor?" sorusunun cevabı bir bakışta görünmeli. */
.dl-kilik-serit {
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff8ed;
  padding: .45rem 1rem;
  font-size: .85rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
}
.dl-kilik-serit .btn { vertical-align: baseline; }
.dl-tema-rozet.dl-kilik-acik {
  border-color: #d97706;
  color: #fbbf24;
}

/* ---------- Cihaz listesi ---------- */
.dl-cihaz {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .8rem;
  background: var(--dl-yuzey0);
  border: 1px solid var(--dl-border);
  border-radius: .5rem;
}
.dl-cihaz-simge { font-size: 1.3rem; color: var(--dl-accent); }
.dl-cihaz-bu { border-color: var(--dl-accent); }

/* ---------- Zindan Fetihi: üçlü daire seçimi ---------- */
/* Düğme sırası yerine daire: "bir yere gidiyorsun" hissi veriyor ve üç
   seçenek bir bütün olarak okunuyor. Nokta, orada yapılacak bir iş
   olduğunu söylüyor (süren av, hazır kazı). */
.ft-secim { display: flex; gap: 1rem; justify-content: center; }
/* Altı daire × 4,5rem + beş boşluk × 1rem = 512 piksel. 375 piksellik bir
   ekranda satır SIĞMIYOR ve sayfaya yatay kaydırma ekliyordu (mobil
   taramasında ölçüldü: 444/375). Dar ekranda satır sarıyor ve daireler
   küçülüyor — altısı iki satırda üçerli duruyor. */
@media (max-width: 575.98px) {
  .ft-secim { flex-wrap: wrap; gap: .6rem; }
  .ft-daire { flex: 0 0 calc(33.333% - .4rem); min-width: 0; }
  .ft-daire-ikon { width: 2.9rem; height: 2.9rem; font-size: 1.3rem; }
  .ft-daire-ad { font-size: .74rem; }
  .ft-nokta { right: calc(50% - 1.6rem); }
}
.ft-daire {
  position: relative; text-decoration: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  flex: 1 1 0; min-width: 4.5rem;
}
.ft-daire-ikon {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem;
  /* Zemin ve kenar VURGU renginden türüyor, yüzey belirteçlerinden değil.
     `--dl-yuzey0` bazı temalarda (ör. Alev) tam siyaha çözülüyor ve daire
     kartın üstünde görünmez oluyordu — canlı ekranda böyle yakalandı.
     Vurgu her temada zeminden ayrık olmak zorunda, bu yüzden güvenli. */
  background: color-mix(in srgb, var(--dl-accent) 14%, var(--dl-card));
  border: 2px solid color-mix(in srgb, var(--dl-accent) 45%, transparent);
  transition: border-color .15s, transform .15s, background .15s;
}
.ft-daire:hover .ft-daire-ikon {
  border-color: var(--dl-accent); transform: translateY(-2px);
  background: color-mix(in srgb, var(--dl-accent) 28%, var(--dl-card));
}
.ft-daire-ad { font-size: .82rem; color: var(--dl-metin-sonuk); }
.ft-daire:hover .ft-daire-ad { color: var(--dl-metin); }
.ft-nokta {
  position: absolute; top: -2px; right: calc(50% - 1.9rem);
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--dl-accent); border: 2px solid var(--dl-card);
}

/* ---------- Hesap sayfasındaki sancaklar ---------- */
/* Karakter görseli olmayan bir oyunda kimliği bu taşıyor. Mülkiyetin
   hemen altında duruyor: ikisi de "neye sahipsin" sorusunun cevabı. */
.hs-bayrak {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem; line-height: 1.05; white-space: pre; letter-spacing: .02em;
}
.hs-bayrak-mini { font-size: .5rem; line-height: 1.05; }
.hs-ganimet {
  background: var(--dl-yuzey0);
  border: 1px solid color-mix(in srgb, var(--dl-accent) 22%, var(--dl-border));
  border-radius: .45rem; padding: .35rem .45rem; text-align: center;
}
.hs-ganimet-ad {
  font-size: .62rem; color: var(--dl-metin-sonuk); margin-top: .15rem;
  max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==================== SANCAK (ASCII bayrak) ====================
   Bayrak önce yalnız hesap ve donanım sayfalarındaydı ve her sayfa kendi
   CSS'ini yazıyordu. Ortak sınıf hem tekrarı bitiriyor hem de sancağı
   sisteme yaymayı ucuzlatıyor.

   Renk sancaktan (`--sancak-renk`, kurucudan türüyor) ama ZEMİN ve KENAR
   tema değişkenlerinden geliyor: sancak temanın içinde durmalı, üstünde
   değil. Karanlık/aydınlık geçişinde de bu yüzden kendiliğinden uyuyor. */
.dl-sancak {
  --sancak-renk: var(--dl-accent);
  color: var(--sancak-renk);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: .82rem;
  line-height: 1.06;
  letter-spacing: .02em;
  margin: 0;
  padding: .5rem .6rem;
  display: inline-block;
  white-space: pre;
  background: color-mix(in srgb, var(--sancak-renk) 7%, var(--dl-yuzey0));
  border: 1px solid color-mix(in srgb, var(--sancak-renk) 32%, var(--dl-border));
  border-radius: .5rem;
  /* Sancağın "kumaş" hissi: hafif bir iç gölge, dışarı taşmayan bir hâle. */
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--sancak-renk) 12%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--sancak-renk) 35%, transparent);
}
.dl-sancak.boy-kucuk { font-size: .66rem; padding: .35rem .45rem; }
.dl-sancak.boy-mini  { font-size: .5rem;  padding: .25rem .3rem; line-height: 1.02; }

/* Listede yan yana duran sancaklar. */
.dl-sancak-sira { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }

/* İki sancak karşı karşıya — savaş ekranı. */
.dl-sancak-karsi { display: flex; align-items: center; justify-content: center;
                   gap: 1.2rem; flex-wrap: wrap; }
.dl-sancak-karsi .vs { font-weight: 800; color: var(--dl-metin-sonuk);
                       font-size: 1.1rem; letter-spacing: .1em; }

/* Yüklenemeyen görselin yerine geçen simge (base.html'deki yakalayıcı basar).
   Kırık bir resim simgesi yerine, o kutuya ne konması gerektiğini anlatan
   bir işaret duruyor — boşluk da bir bilgi vermiyordu. */
.dl-gorsel-yedek {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem; line-height: 1; opacity: .8;
  filter: drop-shadow(0 2px 8px #0008);
  user-select: none;
}

/* ==================== ORTAK PROFİL KARTI ====================
   Discord profil kartı düzeni: renkli banner, üstüne taşan yuvarlak
   avatar, görünen ad, sonra rozetler.

   Bu düzen yalnız "Hesabım" sayfasında vardı ve orada güzel duruyordu;
   oyuncu detayında, donanımda, sıralamalarda ise aynı kişi çıplak bir
   satır ya da ham bir kimlikti. Aynı kişinin iki farklı görünmesi, o
   kişiyi tanımayı zorlaştırıyordu. Artık tek bir yerde tanımlı ve
   `_makrolar.html`'deki `profil_karti` her yerde onu basıyor. */
.dl-profil-banner {
  height: 110px; border-radius: .75rem .75rem 0 0;
  background: linear-gradient(120deg, var(--dl-nav1) 0%, var(--dl-accent) 140%);
}
.dl-profil-banner.kucuk { height: 66px; }
.dl-profil-avatar { border: 6px solid var(--dl-card); }
.dl-profil-durum {
  position: absolute; right: .1rem; bottom: .1rem;
  width: 26px; height: 26px; border-radius: 50%;
  border: 5px solid var(--dl-card); background: #3ba55d;
}
.dl-profil-etiket {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dl-metin-sonuk); font-weight: 700;
}
.dl-profil-kutu {
  background: var(--dl-yuzey0); border-radius: .5rem; padding: .7rem .85rem;
}

/* Dar ekranda banner alçalıyor ve avatar küçülüyor: 375 pikselde 110px'lik
   bir banner + 104px'lik avatar, ekranın yarısını kimliğe ayırıyordu. */
@media (max-width: 575.98px) {
  .dl-profil-banner { height: 76px; }
  .dl-profil-banner.kucuk { height: 52px; }
  .dl-profil-avatar { border-width: 4px; }
  .dl-profil-durum { width: 20px; height: 20px; border-width: 4px; }
}

/* ==================== YUMUŞATMA ====================
   Bootstrap'in varsayılan köşeleri keskin: `.btn` 6px, `.btn-sm` 4px,
   `.badge` 6px, form alanları 6px. Kartlar ve kutular ise bu sitede
   12px'e yuvarlanmış. Sonuç, aynı ekranda iki farklı köşe dili
   konuşuluyordu — düğmeler kartların içine yapıştırılmış gibi duruyordu.

   Yarıçaplar TEK yerde: aşağıdaki üç belirteç. Bir gün "daha yuvarlak"
   ya da "daha keskin" denirse dokunulacak yer burası, altmış ayrı
   kural değil. */
:root {
  --dl-yaricap:      .75rem;   /* kart, kutu, uyarı */
  --dl-yaricap-org:  .6rem;    /* düğme, form alanı, açılır menü */
  --dl-yaricap-kucuk: .45rem;  /* küçük düğme, rozet, sekme */
}

.btn,
.btn-group > .btn,
.form-control, .form-select, .input-group-text,
.dropdown-menu, .list-group-item,
.alert, .toast, .modal-content, .accordion-item, .accordion-button {
  border-radius: var(--dl-yaricap-org) !important;
}
.btn-sm, .form-control-sm, .form-select-sm, .btn-close,
.badge, .nav-pills .nav-link, .nav-tabs .nav-link, .page-link {
  border-radius: var(--dl-yaricap-kucuk) !important;
}
.card, .modal-content, .dl-profil-kutu { border-radius: var(--dl-yaricap); }

/* Yuvarlaklığı zaten "hap" olan şeyler bozulmasın. */
.badge.rounded-pill, .rounded-pill, .rounded-circle,
.dl-kunye, .dl-avatar, .dl-profil-durum, .form-switch .form-check-input {
  border-radius: 999px !important;
}
.rounded-circle, .dl-avatar { border-radius: 50% !important; }

/* Bitişik düğme grubunda yalnız UÇLAR yuvarlak kalsın; hepsi
   yuvarlanınca grup, birbirine değen ayrı düğmeler gibi görünüyordu. */
.btn-group > .btn:not(:first-child),
.input-group > :not(:first-child):not(.dropdown-menu) {
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}
.btn-group > .btn:not(:last-child),
.input-group > :not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}

/* Basınca hafifçe içeri çökme — dokunmatik ekranda "bastım mı?" sorusunu
   cevaplayan tek geri bildirim bu (hover yok). */
.btn:active { transform: translateY(1px); }
.btn { transition: transform .06s ease, filter .12s ease; }

/* Dokunma hedefi: mobilde 32px'lik bir düğmeye isabet ettirmek zor.
   WCAG en az 44px öneriyor; küçük düğmeleri de o bandın yakınına
   çıkarıyoruz ama YAZIYI büyütmeden — düzen bozulmasın. */
@media (max-width: 767.98px) {
  .btn { min-height: 42px; padding-inline: .9rem; }
  .btn-sm { min-height: 36px; }
  .btn-link, .btn-close { min-height: 0; }
  .form-control, .form-select { min-height: 42px; }
  .form-control-sm, .form-select-sm { min-height: 36px; }
}

/* ==================== DAR EKRAN DÜZELTMELERİ ====================
   375 pikselde ölçülerek bulundu (mobil taraması).

   Bootstrap `.badge`'e `white-space: nowrap` veriyor. Kısa etiketlerde
   doğru ama uzun bir ad ("🗿 Obsidyen Muhafız Nişanı iz_obsidyen_kale")
   368 piksel sürüyor ve SAYFAYA yatay kaydırma ekliyor. Yatay kaydırma
   telefonda en can sıkıcı kusur: dikey kaydırmaya çalışırken sayfa yana
   kayıyor ve okuduğun satırı kaybediyorsun. */
@media (max-width: 767.98px) {
  .badge {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  /* Uzun kod/kimlik dizgileri de sarılsın. */
  .dl-kod, code, .dl-id { overflow-wrap: anywhere; }

  /* `btn-link` genel dokunma hedefi kuralının dışında bırakılmıştı
     (satır içi bağlantı gibi görünsün diye) ama "✕ çıkar" gibi GERÇEK
     düğmeler de o sınıfı kullanıyor ve 21 piksel kalıyordu — parmakla
     isabet ettirmesi zor. Yüksekliği değil DOKUNMA ALANINI büyütüyoruz:
     yazı aynı boyutta kalıyor, düzen bozulmuyor. */
  .btn-link, .dl-id-kopya { position: relative; }
  .btn-link::after, .dl-id-kopya::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* Kimlik kopyalama çipi dar ekranda satıra sığmıyordu. */
  .dl-id-kopya { overflow-wrap: anywhere; max-width: 100%; }
}

/* ==================== UYARI YIĞINI ====================
   Uyarı sayfanın en üstüne basılıyordu. Bir form sayfanın altındaysa ve
   `#çapa` ile geri dönüyorsa tarayıcı aşağı atlıyor ve uyarı EKRANIN
   DIŞINDA kalıyordu: kullanıcı düğmeye basıyor, sayfa yenileniyor, hiçbir
   şey görmüyor ve "çalışmıyor" diyor. Sistem cevabı vermişti —
   gösterilmiyordu. */
.dl-uyari-yigin {
  position: fixed; z-index: 1080;
  top: 4.5rem; left: 50%; transform: translateX(-50%);
  width: min(46rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: .4rem;
  pointer-events: none;
}
.dl-uyari-yigin .alert {
  pointer-events: auto; margin: 0;
  box-shadow: 0 10px 30px #0007;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
@media (max-width: 767.98px) {
  .dl-uyari-yigin { top: 4rem; width: calc(100vw - 1rem); }
}