/* ============================================================
   Niyaziler DND — ortak stil dosyası
   Tema: eski bir kampanya günlüğü / meyhane duyuru panosu
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --ink: #14100b;
  --panel: #1d1611;
  --panel-raised: #271d15;
  --panel-line: #3a2c1e;

  --parchment: #ece0c3;
  --parchment-dim: #d6c69c;
  --parchment-faint: #9b8a68;

  --wax: #7c2a2a;
  --wax-bright: #9c3a3a;

  --brass: #b3863f;
  --brass-bright: #d6ab61;

  --danger: #a6402f;
  --success: #4c7a4f;

  --shadow-deep: 0 20px 45px rgba(0, 0, 0, 0.55);
  --radius: 3px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--parchment);
  background:
    radial-gradient(ellipse at top, rgba(255, 220, 160, 0.05), transparent 55%),
    linear-gradient(180deg, #0f0c09 0%, #171009 60%, #0f0c09 100%);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', 'Crimson Text', serif;
  color: var(--parchment);
  letter-spacing: 0.02em;
  margin: 0 0 0.5em 0;
  font-weight: 600;
}

a {
  color: var(--brass-bright);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

p {
  color: var(--parchment-dim);
}

button, input {
  font-family: inherit;
  font-size: 1rem;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}

/* ---------- Genel sayfa iskeleti ---------- */

.page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wax-bright), var(--wax) 70%);
  border: 2px solid #5b1c1c;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 -4px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1d9b0;
}

.brand-mark h1 {
  font-size: 1.5rem;
  text-align: center;
  margin: 0;
}

.brand-mark .subtitle {
  color: var(--parchment-faint);
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

/* ---------- Kart / form panelleri ---------- */

.card {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow-deep);
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(179, 134, 63, 0.18);
  border-radius: 2px;
  pointer-events: none;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--parchment-dim);
  font-size: 0.95rem;
}

.field input {
  width: 100%;
  padding: 11px 13px;
  background: #100c08;
  border: 1px solid var(--panel-line);
  border-radius: 2px;
  color: var(--parchment);
  transition: border-color 0.15s ease;
}

.field input::placeholder {
  color: #5c503a;
}

.field input:focus {
  border-color: var(--brass);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  color: #241a0d;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.btn:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--parchment-dim);
  border: 1px solid var(--panel-line);
}

.btn-ghost:hover {
  border-color: var(--brass);
  color: var(--parchment);
}

.btn-danger {
  background: linear-gradient(180deg, #b95a4a, var(--danger));
  border-color: #8a3325;
  color: #f4e6df;
}

.btn-small {
  width: auto;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.form-footer {
  margin-top: 20px;
  text-align: center;
  color: var(--parchment-faint);
  font-size: 0.95rem;
}

.notice {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 0.92rem;
  display: none;
}

.notice.show {
  display: block;
}

.notice.error {
  background: rgba(166, 64, 47, 0.15);
  border: 1px solid rgba(166, 64, 47, 0.5);
  color: #eab8ab;
}

.notice.success {
  background: rgba(76, 122, 79, 0.15);
  border: 1px solid rgba(76, 122, 79, 0.5);
  color: #bcdcbe;
}

.notice.info {
  background: rgba(179, 134, 63, 0.12);
  border: 1px solid rgba(179, 134, 63, 0.4);
  color: var(--parchment-dim);
}

/* ---------- Üst gezinme çubuğu (dashboard / admin / profil) ---------- */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--panel-line);
  background: rgba(20, 15, 10, 0.6);
}

.top-bar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar .brand .seal {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}

.top-bar .brand span {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--parchment);
}

.top-bar .who {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--parchment-faint);
  font-size: 0.95rem;
}

.top-bar .who strong {
  color: var(--brass-bright);
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---------- Dashboard duyuru panosu ---------- */

.journal-entry {
  margin-bottom: 36px;
}

.journal-entry .date {
  color: var(--parchment-faint);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.board-card {
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.board-card::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

.board-card h3 {
  font-size: 1.25rem;
}

.board-card p {
  flex-grow: 1;
  font-size: 0.98rem;
}

.board-card:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}

/* ---------- Onay bekleyen sayfası ---------- */

.pending-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px dashed var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--brass-bright);
}

/* ---------- Admin / DM onay paneli ---------- */

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--panel-line);
  padding-bottom: 10px;
}

.section-heading h2 {
  font-size: 1.3rem;
  margin: 0;
}

.count-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--brass-bright);
  padding: 3px 10px;
  border-radius: 12px;
}

.scroll-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
}

.scroll-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.scroll-item .who-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scroll-item .who-info .name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--parchment);
}

.scroll-item .who-info .meta {
  font-size: 0.85rem;
  color: var(--parchment-faint);
}

.scroll-item .actions {
  display: flex;
  gap: 10px;
}

.status-tag {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.02em;
}

.status-tag.pending {
  background: rgba(179, 134, 63, 0.18);
  color: var(--brass-bright);
  border: 1px solid rgba(179, 134, 63, 0.4);
}

.status-tag.approved {
  background: rgba(76, 122, 79, 0.18);
  color: #9fcfa2;
  border: 1px solid rgba(76, 122, 79, 0.4);
}

.status-tag.rejected {
  background: rgba(166, 64, 47, 0.18);
  color: #e0a89a;
  border: 1px solid rgba(166, 64, 47, 0.4);
}

.empty-state {
  color: var(--parchment-faint);
  font-style: italic;
  padding: 18px 4px;
}

/* ---------- Profil sayfası ---------- */

.profile-card {
  max-width: 520px;
  margin: 0 auto;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--panel-line);
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row .label {
  color: var(--parchment-faint);
}

.profile-row .value {
  color: var(--parchment);
  font-weight: 600;
}

/* ---------- Karakter görseli ---------- */

.avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brass);
  box-shadow: var(--shadow-deep);
  background: var(--panel);
}

.avatar-small .avatar-img {
  width: 72px;
  height: 72px;
}

/* ---------- Skill puanları / statlar ---------- */

.points-line {
  color: var(--parchment-dim);
  margin-bottom: 14px;
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
}

.stat-name {
  color: var(--parchment);
  flex: 1;
}

.stat-code {
  color: var(--parchment-faint);
  font-size: 0.85rem;
}

.stat-value {
  font-family: 'Cinzel', serif;
  color: var(--brass-bright);
  min-width: 26px;
  text-align: center;
}

.stat-plus,
.stat-minus {
  width: auto;
  padding: 4px 12px;
}

/* ---------- Inline formlar (karakter adı, görsel, puan) ---------- */

.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.inline-form input[type='text'],
.inline-form input[type='number'] {
  flex: 1;
  min-width: 120px;
  padding: 9px 12px;
  background: #100c08;
  border: 1px solid var(--panel-line);
  border-radius: 2px;
  color: var(--parchment);
}

.inline-form input[type='file'] {
  flex: 1;
  min-width: 140px;
  color: var(--parchment-dim);
  font-size: 0.85rem;
}

.inline-form .btn {
  width: auto;
}

.points-current {
  color: var(--parchment-faint);
  font-size: 0.9rem;
}

.points-current strong {
  color: var(--brass-bright);
}

/* ---------- DM panelinde karakter yönetimi ---------- */

.character-item {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.character-item .who-info {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.character-panel {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.character-panel .avatar-wrap {
  margin-bottom: 0;
}

.character-controls {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dm-subsection {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--panel-line);
}

.dm-subsection h4 {
  font-size: 1rem;
  color: var(--brass-bright);
  margin-bottom: 10px;
}

/* ---------- Profil sayfası — 5 kartlı düzen ---------- */

.container-wide {
  max-width: 1300px;
}

.profile-grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.profile-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.profile-mini-card {
  max-width: none;
  width: 100%;
}

@media (max-width: 980px) {
  .profile-grid-top,
  .profile-grid-bottom {
    grid-template-columns: 1fr;
  }
}

.hint-line {
  color: var(--parchment-faint);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: -6px;
}

.notes-textarea {
  width: 100%;
  min-height: 160px;
  padding: 11px 13px;
  background: #100c08;
  border: 1px solid var(--panel-line);
  border-radius: 2px;
  color: var(--parchment);
  resize: vertical;
  font-family: 'Crimson Text', Georgia, serif;
}

.notes-textarea:focus {
  border-color: var(--brass);
  outline: none;
}

/* ---------- Envanter ---------- */

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inventory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
}

.inventory-name {
  color: var(--parchment);
  flex: 1;
}

.inventory-qty {
  color: var(--brass-bright);
  font-family: 'Cinzel', serif;
}

/* ---------- Tanınan kişiler ---------- */

.acquaintance-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.acquaintance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
}

.acquaintance-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--brass);
  flex-shrink: 0;
}

.acquaintance-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.acquaintance-name {
  color: var(--parchment);
}

.acquaintance-type {
  color: var(--parchment-faint);
  font-size: 0.8rem;
}

.acquaintance-forms {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-form select {
  flex: 1;
  min-width: 120px;
  padding: 9px 12px;
  background: #100c08;
  border: 1px solid var(--panel-line);
  border-radius: 2px;
  color: var(--parchment);
}

/* ---------- Yardımcı sınıflar ---------- */

.text-center {
  text-align: center;
}

.mt-24 {
  margin-top: 24px;
}

.hidden {
  display: none !important;
}

@media (max-width: 560px) {
  .top-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .scroll-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .scroll-item .actions {
    width: 100%;
  }

  .scroll-item .actions .btn {
    flex: 1;
  }
}

/* Ana ekran ve DM çalışma alanı */
.home-page { max-width:1240px; }
.home-hero { margin:10px 0 38px; padding:34px 0 32px; border-bottom:1px solid #51402b; }
.home-eyebrow { margin:0 0 8px; color:var(--brass-bright); font:600 .74rem 'Cinzel',serif; letter-spacing:.14em; }
.home-hero .date { display:block; margin:0 0 12px; color:var(--parchment-faint); font-size:.86rem; }
.home-hero h1 { font-size:clamp(2rem,4vw,3.35rem); line-height:1.16; margin:0 0 12px; }
.home-hero > p:last-child { max-width:620px; margin:0; font-size:1.08rem; }
.home-layout { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr); gap:26px; align-items:start; }
.home-action-feature,.home-journal { padding:27px; border:1px solid #4a3724; background:linear-gradient(155deg,#302218,#19130f); box-shadow:var(--shadow-deep); }
.home-action-feature { min-height:270px; display:flex; flex-direction:column; align-items:flex-start; }
.home-action-symbol { color:var(--brass-bright); font-size:31px; margin-bottom:14px; }
.home-action-feature h2 { font-size:1.4rem; }
.home-action-feature p { margin:0 0 22px; font-size:.96rem; }
.home-action-feature .btn { margin-top:auto; justify-content:space-between; }
.home-links { display:grid; gap:10px; margin-top:12px; }
.home-links a { display:grid; grid-template-columns:25px 1fr 20px; column-gap:10px; align-items:center; padding:13px 18px; border:1px solid var(--panel-line); background:#211810; color:var(--parchment); }
.home-links a:hover { border-color:var(--brass); text-decoration:none; }
.home-links a > span { color:var(--brass-bright); font-size:23px; grid-row:span 2; }
.home-links strong { font:600 .91rem 'Cinzel',serif; }
.home-links small { color:var(--parchment-faint); grid-column:2; font-size:.79rem; }
.home-links b { color:var(--brass-bright); grid-column:3; grid-row:1 / span 2; }
.home-journal { min-height:420px; }
.home-journal-header { padding-bottom:18px; border-bottom:1px solid #59402a; }
.home-journal-header h2 { margin:4px 0 6px; font-size:1.7rem; }
.home-journal-header p { margin:0; font-size:.94rem; }
.home-journal-entries { max-height:600px; overflow-y:auto; }
.home-journal-entry { padding:22px 0; border-bottom:1px solid #453323; }
.home-journal-entry:last-child { border-bottom:0; }
.home-journal-entry time,.dm-content-card time { color:var(--brass-bright); font-size:.78rem; }
.home-journal-entry h3 { margin:5px 0 8px; font-size:1.15rem; }
.home-journal-entry p,.dm-content-card p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; }
.home-journal-empty { color:var(--parchment-faint); padding:28px 0; }
.dm-workspace { max-width:1150px; }
.dm-workspace-header { margin:0 0 23px; }
.dm-workspace-header h1 { font-size:clamp(1.7rem,4vw,2.6rem); margin:3px 0; }
.dm-workspace-header p { margin:0; }
.dm-tabs { display:flex; gap:5px; overflow-x:auto; border-bottom:1px solid #60482c; margin:0 0 27px; }
.dm-tab { flex:0 0 auto; padding:11px 17px; border:0; border-bottom:3px solid transparent; background:none; color:var(--parchment-faint); cursor:pointer; font:600 .82rem 'Cinzel',serif; }
.dm-tab:hover,.dm-tab.active { color:var(--parchment); background:#2b2016; border-color:var(--brass-bright); }
.dm-tab .count-pill { margin-left:6px; padding:2px 7px; }
.dm-tab-panel { min-height:310px; }
.dm-tab-panel .scroll-list { margin-bottom:10px; }
.dm-search-label { display:block; color:var(--parchment-dim); font-size:.89rem; margin-bottom:5px; }
.dm-search { width:100%; max-width:420px; padding:10px 12px; margin-bottom:18px; border:1px solid #60482c; background:#130e0a; color:var(--parchment); }
.character-item .character-detail { display:none; width:100%; }
.character-item.expanded .character-detail { display:block; }
.character-item .who-info { width:100%; }
.character-item .dm-character-toggle { margin-left:auto; }
.dm-danger-zone { margin-top:18px; padding-top:16px; border-top:1px solid #614032; }
.dm-section-hint { font-size:.9rem; }
.dm-editor-form { display:grid; gap:7px; padding:21px; border:1px solid var(--panel-line); background:var(--panel-raised); margin:18px 0 25px; }
.dm-editor-form label,.dm-recipient-field legend { color:var(--parchment-dim); font-size:.9rem; }
.dm-editor-form > input:not([type=file]),.dm-editor-form textarea { width:100%; padding:10px 12px; margin:0 0 7px; border:1px solid #5b422a; background:#110d0a; color:var(--parchment); }
.dm-editor-form textarea { resize:vertical; min-height:100px; }
.dm-editor-form input[type=file] { max-width:100%; margin-bottom:7px; color:var(--parchment); }
.dm-editor-actions { display:flex; gap:10px; flex-wrap:wrap; }
.dm-recipient-field { min-width:0; margin:5px 0 11px; border:1px solid #5b422a; padding:12px; }
.dm-recipients { display:flex; flex-wrap:wrap; gap:9px; }
.dm-recipients label { padding:6px 10px; border:1px solid #5b422a; background:#1a140e; cursor:pointer; }
.dm-content-list { display:grid; gap:12px; margin-bottom:26px; }
.dm-content-card { padding:18px; background:var(--panel-raised); border:1px solid var(--panel-line); }
.dm-content-card h3 { margin:5px 0 7px; font-size:1.06rem; }
.dm-content-card p { font-size:.9rem; }
.dm-content-actions { display:flex; gap:8px; margin-top:14px; }
.dm-content-recipients { color:var(--brass-bright); padding-top:8px; }
.dm-handout-preview { display:block; max-width:min(100%,300px); max-height:180px; object-fit:contain; margin-top:12px; }
.dm-workspace > #notice.show { position:fixed; z-index:100; left:50%; bottom:16px; transform:translateX(-50%); width:min(480px,calc(100vw - 32px)); margin:0; background:#211810; box-shadow:0 8px 28px rgba(0,0,0,.65); }
@media (max-width:820px) { .home-layout { grid-template-columns:1fr; } .home-page { padding-top:20px; } }
@media (max-width:560px) { .home-action-feature,.home-journal { padding:20px; } .dm-tab { padding:10px; font-size:.73rem; } .character-item .dm-character-toggle { margin-left:0; } }

/* ---------- Yeni giriş ekranı ---------- */
.auth-body { overflow-x:hidden; background:#0d0a08; }
.auth-body::before { content:''; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 18%,rgba(179,134,63,.12),transparent 30%),radial-gradient(circle at 85% 82%,rgba(124,42,42,.1),transparent 30%); }
.auth-shell { position:relative; z-index:1; width:min(1180px,calc(100% - 44px)); min-height:min(760px,calc(100vh - 64px)); margin:32px auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(390px,.8fr); border:1px solid #4a3826; background:#15100c; box-shadow:0 28px 80px rgba(0,0,0,.7); }
.auth-story { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:48px clamp(36px,6vw,78px); background:linear-gradient(125deg,rgba(15,11,8,.92),rgba(39,28,19,.8)),repeating-linear-gradient(115deg,transparent 0 28px,rgba(214,171,97,.025) 29px 30px); border-right:1px solid #4a3826; }
.auth-story::after { content:'D20'; position:absolute; right:-38px; bottom:-86px; color:rgba(214,171,97,.035); font:700 260px/1 'Cinzel',serif; transform:rotate(-12deg); pointer-events:none; }
.auth-brand,.auth-mobile-brand { display:flex; align-items:center; gap:14px; color:var(--parchment); font:600 1rem 'Cinzel',serif; letter-spacing:.05em; }
.auth-brand .seal,.auth-mobile-brand .seal { width:46px; height:46px; font-size:1.05rem; }
.auth-story-copy { max-width:680px; margin:auto 0 32px; }
.auth-story-copy h1 { max-width:640px; margin:0 0 19px; font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.06; }
.auth-story-copy > p:last-child { max-width:610px; margin:0; font-size:1.12rem; line-height:1.55; }
.auth-features { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid #4e3b29; background:#4e3b29; }
.auth-features > div { min-width:0; display:flex; gap:11px; padding:14px; background:rgba(18,13,9,.93); }
.auth-features b { color:var(--brass-bright); font:600 .75rem 'Cinzel',serif; }
.auth-features span,.auth-features strong,.auth-features small { display:block; min-width:0; }
.auth-features strong { color:var(--parchment); font:600 .77rem 'Cinzel',serif; }
.auth-features small { color:var(--parchment-faint); font-size:.73rem; line-height:1.3; }
.auth-quote { position:relative; z-index:1; margin:24px 0 0; color:#85765e; font-style:italic; font-size:.86rem; }
.auth-panel { display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,5vw,68px); background:linear-gradient(180deg,#241a13,#17110d); }
.auth-mobile-brand { display:none; margin-bottom:42px; }
.auth-panel-heading { margin-bottom:28px; }
.auth-panel-heading h2 { margin:0 0 8px; font-size:2rem; }
.auth-panel-heading p:last-child { margin:0; color:var(--parchment-faint); font-size:.94rem; }
.auth-field { margin-bottom:17px; }
.auth-field label { color:#d6c69c; font:600 .76rem 'Cinzel',serif; letter-spacing:.06em; }
.auth-input-wrap { display:flex; align-items:center; min-height:50px; border:1px solid #503c29; background:#100c09; transition:border-color .18s ease,box-shadow .18s ease; }
.auth-input-wrap:focus-within { border-color:var(--brass-bright); box-shadow:0 0 0 3px rgba(214,171,97,.09); }
.auth-input-wrap > span { width:43px; flex:0 0 43px; color:#7e6847; text-align:center; }
.auth-input-wrap input { min-width:0; flex:1; padding:12px 0; border:0; outline:0; background:transparent; color:var(--parchment); }
.auth-input-wrap input:focus { border:0; }
.password-toggle { align-self:stretch; padding:0 12px; border:0; border-left:1px solid #37291d; background:transparent; color:var(--brass-bright); cursor:pointer; font-size:.76rem; }
.remember-row { display:flex; align-items:center; gap:8px; margin:4px 0 19px; color:var(--parchment-faint); cursor:pointer; font-size:.86rem; }
.remember-row input { accent-color:var(--brass-bright); }
.auth-submit { display:flex; justify-content:space-between; align-items:center; min-height:51px; }
.auth-submit:disabled { opacity:.7; cursor:wait; }
.auth-submit.is-loading .auth-submit-arrow { animation:authPulse .8s ease-in-out infinite alternate; }
.auth-notice { margin-top:15px; }
.auth-panel .form-footer { margin-top:22px; padding-top:20px; border-top:1px solid #453323; }
.auth-security { margin:22px 0 0; color:#766951; font-size:.76rem; text-align:center; }
@keyframes authPulse { to { transform:translateX(5px); opacity:.45; } }

/* ---------- Kampanya merkezi ---------- */
.dashboard-body { background:radial-gradient(circle at 65% -10%,rgba(179,134,63,.09),transparent 38%),linear-gradient(180deg,#0f0c09,#171009 60%,#0f0c09); }
.campaign-topbar { border-bottom-color:#4a3826; background:rgba(16,12,9,.96); backdrop-filter:blur(10px); }
.campaign-topbar .brand { gap:11px; }
.campaign-topbar .brand .seal { width:38px; height:38px; font-size:.9rem; }
.campaign-topbar .brand small { margin-left:4px; padding-left:14px; border-left:1px solid #4d3a27; color:var(--parchment-faint); font:500 .7rem 'Cinzel',serif; }
.connection-chip { display:inline-flex; align-items:center; gap:6px; color:#8eaf8e; font-size:.76rem; }
.connection-chip i { width:7px; height:7px; border-radius:50%; background:#6fba72; box-shadow:0 0 9px #6fba72; }
.campaign-home { padding-bottom:55px; }
.campaign-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.campaign-hero > div:first-child { max-width:740px; }
.campaign-date { flex:0 0 auto; min-width:180px; padding:12px 0 3px 18px; border-left:1px solid #5a432d; }
.campaign-date span,.campaign-date time { display:block; }
.campaign-date span { color:var(--brass-bright); font:600 .65rem 'Cinzel',serif; letter-spacing:.14em; }
.campaign-date time { color:var(--parchment-dim); font-size:.9rem; text-transform:capitalize; }
.campaign-grid { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.5fr); gap:26px; align-items:start; }
.campaign-sidebar { display:grid; gap:13px; }
.character-summary { padding:20px; border:1px solid #4a3724; background:linear-gradient(145deg,#2b2017,#17110d); box-shadow:0 16px 38px rgba(0,0,0,.34); }
.character-summary-head { display:flex; align-items:center; gap:14px; padding-bottom:15px; border-bottom:1px solid #4a3724; }
.character-summary-avatar { width:66px; height:66px; flex:0 0 66px; display:grid; place-items:center; overflow:hidden; border:2px solid #8e6b38; border-radius:50%; background:#100c08; color:#e2c891; font:600 1rem 'Cinzel',serif; }
.character-summary-avatar img { width:100%; height:100%; object-fit:cover; }
.character-summary-head h2 { max-width:210px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.1rem; }
.character-summary-head p { margin:2px 0 0; color:var(--parchment-faint); font-size:.79rem; }
.home-condition-list { display:flex; flex-wrap:wrap; gap:5px; min-height:26px; margin:12px 0; }
.home-condition { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border:1px solid #806021; background:#291f0d; color:#e4cb82; font-size:.72rem; }
.home-condition b { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#d8a72e; color:#221707; font:bold 11px Arial,sans-serif; }
.home-muted { color:var(--parchment-faint); font-size:.78rem; }
.home-stat-list { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.home-stat-list div { padding:6px; border:1px solid #3d2f21; background:#130e0a; text-align:center; }
.home-stat-list span,.home-stat-list strong { display:block; }
.home-stat-list span { color:var(--parchment-faint); font:600 .62rem 'Cinzel',serif; }
.home-stat-list strong { color:var(--parchment); font-size:.9rem; }
.character-summary-link { display:flex; justify-content:space-between; margin-top:13px; color:var(--brass-bright); font-size:.8rem; }
.campaign-join-card { min-height:235px; }
.campaign-join-card .btn { width:100%; }
.campaign-content { min-width:0; display:grid; gap:13px; }
.campaign-overview { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.overview-card { position:relative; min-height:142px; display:grid; grid-template-columns:40px 1fr auto; align-content:start; gap:4px 12px; padding:19px; border:1px solid #4a3724; background:linear-gradient(145deg,#271d15,#17110d); }
.overview-icon { grid-row:1/span 2; width:38px; height:38px; display:grid; place-items:center; border:1px solid #655038; color:var(--brass-bright); background:#130e0a; }
.overview-card h2 { margin:0; font-size:1rem; }
.overview-card > strong { color:var(--brass-bright); font:600 1.7rem 'Cinzel',serif; }
.overview-card > p,.party-preview { grid-column:2/-1; margin:10px 0 0; color:var(--parchment-faint); font-size:.79rem; }
.party-preview { display:flex; align-items:center; min-height:34px; }
.party-avatar { position:relative; width:34px; height:34px; display:grid; place-items:center; overflow:hidden; margin-right:-6px; border:2px solid #60492f; border-radius:50%; background:#17110c; color:#d7c49f; font:600 .58rem 'Cinzel',serif; box-shadow:0 2px 8px #000; }
.party-avatar img { width:100%; height:100%; object-fit:cover; }
.party-avatar.online::after,.party-avatar.offline::after { content:''; position:absolute; right:0; bottom:0; width:7px; height:7px; border:1px solid #17110c; border-radius:50%; background:#777; }
.party-avatar.online::after { background:#69bc70; }
.campaign-journal { min-height:485px; }
.campaign-journal .home-journal-entries { max-height:570px; }

@media (max-width:900px) {
  .auth-shell { grid-template-columns:1fr; max-width:560px; }
  .auth-story { display:none; }
  .auth-mobile-brand { display:flex; }
  .campaign-grid { grid-template-columns:1fr; }
  .campaign-sidebar { grid-template-columns:1fr 1fr; align-items:stretch; }
  .campaign-sidebar .home-links { grid-column:1/-1; }
}
@media (max-width:620px) {
  .auth-shell { width:100%; min-height:100vh; margin:0; border:0; }
  .auth-panel { padding:32px 23px; }
  .campaign-topbar .brand small,.connection-chip { display:none; }
  .campaign-hero { display:block; }
  .campaign-date { margin-top:20px; padding-left:0; border-left:0; }
  .campaign-sidebar,.campaign-overview { grid-template-columns:1fr; }
  .campaign-sidebar .home-links { grid-column:auto; }
  .overview-card { min-height:126px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}