/* ===================================================================
   ELDORIA — Discord bileşen kiti (site geneli)
   Tek dosya; hem style.css hem eldoria.css sayfalarında çalışır:
   ortak olmayan değişkenler (--gold-2 / --gold-l, --text-dim / --muted)
   var() zinciriyle çözülür, hiçbir sayfa temasına dokunulmaz.
   Bileşenler: nav rozeti, büyük kart, panel şeridi, ana sayfa tanıtımı, ince şerit.
   =================================================================== */
.dsc {
  --dsc-blurple: #5865f2;
  --dsc-blurple-l: #8b93ff;
  --dsc-green: #57cf8a;
  --dsc-gold: var(--gold, #c9a25b);
  --dsc-gold-l: var(--gold-2, var(--gold-l, #eccf8c));
  --dsc-dim: var(--text-dim, var(--muted, #98a4c8));
  --dsc-text: var(--text, #dde4f5);
  --dsc-line: var(--line, rgba(201, 162, 91, .28));
  --dsc-panel: var(--panel, var(--ink-2, #151c30));
  --dsc-panel-2: var(--panel-2, var(--ink-3, #101626));
  font-family: "Inter", system-ui, sans-serif;
  text-align: left;   /* .auth-card ortalıyor; bileşen her zaman sola hizalı okunur */
}
.dsc *, .dsc *::before, .dsc *::after { box-sizing: border-box; }
.dsc-logo { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---------- Nav rozeti (her sayfa) ----------
   Ölçüler menüdeki .btn ile BİREBİR (Cinzel .92rem / .72em 1.4em / radius 10px):
   düğmelerle aynı yükseklikte oturur, yanlarında yamuk durmaz. */
.nav > a.dsc-chip, .nav a.dsc-chip, a.dsc-chip, .dsc-chip {
  display: inline-flex; text-transform: none; align-items: center; justify-content: center; gap: .5em;
  font-family: "Cinzel", serif; font-size: .92rem; font-weight: 600; letter-spacing: .03em;
  padding: .72em 1.2em; border-radius: 10px; white-space: nowrap;  /* satır yüksekliği .btn ile aynı kalsın: ayarlanmaz */
  border: 1px solid rgba(88, 101, 242, .5); color: #c7cdff; text-decoration: none;
  background: linear-gradient(180deg, rgba(88, 101, 242, .2), rgba(88, 101, 242, .07));
  transition: border-color .18s, box-shadow .18s, transform .18s, color .18s;
}
.nav .dsc-chip { margin-left: 6px; }
.dsc-chip:hover { color: #fff; border-color: var(--dsc-blurple-l); box-shadow: 0 8px 22px rgba(88, 101, 242, .38); transform: translateY(-2px); }
.dsc-chip .dsc-logo { width: 1.1em; height: 1.1em; }
.dsc-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dsc-gold-l); flex: none; }
.dsc-chip--todo .dsc-chip__dot { animation: dsc-pulse 2.2s ease-in-out infinite; }
.dsc-chip--ok { border-color: rgba(87, 207, 138, .42); background: linear-gradient(180deg, rgba(87, 207, 138, .16), rgba(87, 207, 138, .05)); color: #bde9cf; }
.dsc-chip--ok:hover { border-color: var(--dsc-green); box-shadow: 0 6px 18px rgba(87, 207, 138, .28); }
.dsc-chip--ok .dsc-chip__dot { background: var(--dsc-green); }
.dsc-chip__avatar { width: 18px; height: 18px; border-radius: 50%; flex: none; }
@keyframes dsc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 207, 140, .55); } 50% { box-shadow: 0 0 0 5px rgba(236, 207, 140, 0); } }
/* Mobil menü dikey bir sütun (align-items:stretch) — rozet tam genişlikte ve ortalı dursun. */
@media (max-width: 900px) { .dsc-chip { font-size: .8rem; justify-content: center; margin: 10px 0 2px; } }

/* ---------- Ortak parçalar ---------- */
/* Kart dar bir sütunda da durabiliyor: başlık bloğu sıkışmasın, rozet gerekirse alt satıra insin. */
.dsc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 10px; }
.dsc-head > div { flex: 1 1 200px; min-width: 0; }
.dsc-mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 1.45rem;
  background: linear-gradient(145deg, var(--dsc-blurple), #3f48c9);
  box-shadow: 0 10px 26px rgba(88, 101, 242, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.dsc-title { font-family: "Cinzel", serif; font-size: 1.28rem; color: var(--dsc-gold-l); margin: 0; line-height: 1.2; }
.dsc-sub { color: var(--dsc-dim); font-size: .9rem; margin: 3px 0 0; }
.dsc-badge {
  display: inline-flex; align-items: center; gap: .45em; margin-left: auto; flex: none;
  font-size: .74rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: .38em .8em; border-radius: 999px;
  border: 1px solid rgba(87, 207, 138, .4); background: rgba(87, 207, 138, .12); color: #9fe3bd;
}
.dsc-badge--todo { border-color: rgba(201, 162, 91, .45); background: rgba(201, 162, 91, .12); color: var(--dsc-gold-l); }
.dsc-p { color: var(--dsc-dim); font-size: .98rem; line-height: 1.6; margin: 14px 0 0; }
.dsc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dsc-btn {
  display: inline-flex; align-items: center; gap: .55em; cursor: var(--uo-hand, pointer);
  font-family: "Cinzel", serif; font-weight: 600; font-size: .92rem; letter-spacing: .6px;
  padding: .72em 1.35em; border-radius: 9px; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}
.dsc-btn--brand { background: linear-gradient(180deg, #6873f5, #4752e0); color: #fff; box-shadow: 0 10px 26px rgba(88, 101, 242, .35); }
.dsc-btn--brand:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(88, 101, 242, .5); color: #fff; }
.dsc-btn--ghost { border-color: var(--dsc-line); color: var(--dsc-gold-l); background: rgba(255, 255, 255, .02); }
.dsc-btn--ghost:hover { border-color: var(--dsc-gold); transform: translateY(-2px); }
.dsc-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.dsc-msg { display: none; margin-top: 14px; padding: .8em 1em; border-radius: 10px; font-size: .92rem; line-height: 1.5; }
.dsc-msg.is-on { display: block; }
.dsc-msg.is-ok { background: rgba(87, 207, 138, .1); border: 1px solid rgba(87, 207, 138, .35); color: #b6e8cd; }
.dsc-msg.is-err { background: rgba(192, 70, 58, .12); border: 1px solid rgba(192, 70, 58, .4); color: #f0b3ac; }

/* Dar ekran: başlık bloğu 46px işaret ile rozet arasında sıkışmasın — kendi satırına insin. */
@media (max-width: 560px) {
  .dsc-head { flex-wrap: wrap; row-gap: 10px; }
  .dsc-head > div { flex: 1 1 100%; order: 3; }
  .dsc-title { font-size: 1.15rem; }
}

/* ---------- Kazanım listesi ---------- */
.dsc-gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding: 0; list-style: none; }
.dsc-gains li {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(88, 101, 242, .09), rgba(88, 101, 242, .03));
  border: 1px solid rgba(88, 101, 242, .22);
}
.dsc-gains b { display: block; color: var(--dsc-text); font-size: .93rem; font-weight: 600; margin-bottom: 2px; }
.dsc-gains span { color: var(--dsc-dim); font-size: .85rem; line-height: 1.45; }
.dsc-gains i { font-style: normal; font-size: 1.15rem; line-height: 1.2; flex: none; }
@media (max-width: 720px) { .dsc-gains { grid-template-columns: 1fr; } }

/* ---------- Büyük kart (Hesabım) ---------- */
.dsc-card { position: relative; overflow: hidden; }
.dsc-card .dsc-gains { grid-template-columns: 1fr; }  /* kart yan sütunda duruyor: tek kolon okunur */
.dsc-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, var(--dsc-blurple), transparent); opacity: .8;
}
.dsc-who { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 14px 16px; border-radius: 13px;
  background: var(--dsc-panel-2); border: 1px solid var(--dsc-line); }
.dsc-who__avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--dsc-blurple); }
.dsc-who__name { color: var(--dsc-text); font-weight: 600; font-size: 1rem; }
.dsc-who__meta { color: var(--dsc-dim); font-size: .84rem; margin-top: 2px; }
.dsc-group { margin-top: 20px; }
.dsc-group__title {
  font-family: "Cinzel", serif; font-size: .82rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--dsc-gold); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--dsc-line);
}
.dsc-opt { display: flex; align-items: center; gap: 13px; padding: 10px 2px; cursor: var(--uo-hand, pointer); }
.dsc-opt + .dsc-opt { border-top: 1px solid rgba(201, 162, 91, .08); }
.dsc-opt__label { flex: 1; color: var(--dsc-text); font-size: .93rem; line-height: 1.45; }
.dsc-opt__label small { display: block; color: var(--dsc-dim); font-size: .82rem; margin-top: 2px; }
.dsc-switch { position: relative; width: 42px; height: 24px; flex: none; }
.dsc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: var(--uo-hand, pointer); }
.dsc-switch i {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: #2a3149; border: 1px solid var(--dsc-line); transition: background .18s, border-color .18s;
}
.dsc-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dsc-dim); transition: transform .18s, background .18s;
}
.dsc-switch input:checked + i { background: rgba(88, 101, 242, .45); border-color: var(--dsc-blurple); }
.dsc-switch input:checked + i::after { transform: translateX(18px); background: #fff; }
.dsc-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(88, 101, 242, .35); }
.dsc-note { color: var(--dsc-dim); font-size: .84rem; line-height: 1.55; margin-top: 16px; opacity: .85; }

/* ---------- Panel şeridi (Panelim) ---------- */
.dsc-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 16px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .04) 55%, transparent),
              linear-gradient(180deg, var(--dsc-panel), var(--dsc-panel-2));
  border: 1px solid rgba(88, 101, 242, .3);
}
.dsc-banner__text { flex: 1 1 260px; min-width: 0; }
.dsc-banner__text b { display: block; font-family: "Cinzel", serif; color: var(--dsc-gold-l); font-size: 1.05rem; }
.dsc-banner__text span { color: var(--dsc-dim); font-size: .9rem; }
.dsc-banner .dsc-actions { margin-top: 0; }
.dsc-banner--ok { border-color: rgba(87, 207, 138, .28); background: linear-gradient(135deg, rgba(87, 207, 138, .1), transparent 55%), linear-gradient(180deg, var(--dsc-panel), var(--dsc-panel-2)); padding: 14px 18px; }

/* ---------- Ana sayfa tanıtımı ---------- */
.dsc-promo {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center;
  padding: 34px; border-radius: 20px;
  background: radial-gradient(700px 300px at 12% 0%, rgba(88, 101, 242, .2), transparent 62%),
              linear-gradient(180deg, var(--dsc-panel, #151c30), var(--dsc-panel-2, #101626));
  border: 1px solid var(--dsc-line); box-shadow: var(--shadow, 0 18px 50px rgba(0, 0, 0, .55));
}
.dsc-promo__title { font-family: "Cinzel", serif; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--dsc-gold-l); margin: 12px 0 0; }
.dsc-promo__lead { color: var(--dsc-dim); font-size: 1.02rem; line-height: 1.65; margin-top: 12px; }
.dsc-promo .dsc-gains { grid-template-columns: 1fr; gap: 10px; margin: 0; }
@media (max-width: 900px) { .dsc-promo { grid-template-columns: 1fr; gap: 24px; padding: 26px 20px; } }

/* ---------- İnce şerit (giriş / e-posta onayı) ---------- */
.dsc-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(88, 101, 242, .12), rgba(88, 101, 242, .04));
  border: 1px solid rgba(88, 101, 242, .28);
}
.dsc-strip p { flex: 1 1 200px; margin: 0; color: var(--dsc-dim); font-size: .88rem; line-height: 1.5; }
.dsc-strip b { color: var(--dsc-text); font-weight: 600; }
.dsc-strip a.dsc-btn { padding: .55em 1.05em; font-size: .84rem; }
.dsc-skeleton { color: var(--dsc-dim); font-size: .92rem; opacity: .8; }