/* cSilkroad Design System — colors & type tokens */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* ---------- COLORS ---------- */

  /* Brand dark — body/frame (smoky charcoal) */
  --csr-body-bg: #282C32;
  --csr-body-bg-2: #1f2227;
  --csr-navbar: #232323;
  --csr-navbar-text: #d4d4d4;

  /* Menu bar — crimson/bordeaux banner */
  --csr-menu-bordeaux: #7A1E1E;
  --csr-menu-bordeaux-deep: #4a0f0f;
  --csr-menu-bordeaux-hover: #a02626;

  /* Parchment / scroll */
  --csr-parchment: #e8d6ae;       /* right-bg creamy paper */
  --csr-parchment-deep: #c9a96a;
  --csr-parchment-shadow: #7c693d;
  --csr-parchment-border: #865328;

  /* Bronze / gold accents */
  --csr-bronze: #B58A57;          /* submenu fill */
  --csr-bronze-light: #D2B892;    /* menu text parchment gold */
  --csr-bronze-dark: #6c3514;     /* heading brown */
  --csr-bronze-darker: #3b2c1f;

  /* Signature CTA yellow (OYUNU İNDİR) */
  --csr-yellow: #E7E33D;
  --csr-orange-glow: #F59003;     /* shadow */

  /* Form inputs */
  --csr-input-bg: #443D35;
  --csr-input-border: #E1D4B7;
  --csr-input-placeholder: #a39f9f;

  /* Table rows (ranks) */
  --csr-row-bg: #40372d;
  --csr-row-hover-bg: #473521;
  --csr-row-hover-border: #FFCF93;

  /* Status / semantic */
  --csr-red: #ED1C24;             /* alert / logout */
  --csr-red-deep: #B92829;
  --csr-green: #42c50c;            /* AKTİF server status */
  --csr-green-deep: #116A05;
  --csr-amber: #c9bd12;             /* server name */
  --csr-blue: #243040;              /* neutral table txt */
  --csr-link: #0B689B;

  /* Text on parchment */
  --csr-ink: #4f4f4f;
  --csr-ink-strong: #261f18;
  --csr-ink-muted: #695c45;

  /* ---------- TYPE ---------- */
  /* Originals: Trajan Pro Bold / Myriad Pro Semibold / Roboto Medium + Arial */
  /* Google Fonts substitutes (flagged) */
  --csr-font-display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;     /* Trajanpro-Bold → Cinzel */
  --csr-font-menu: 'Source Sans 3', 'Myriad Pro', 'Segoe UI', sans-serif;      /* MyriadPro-Semibold → Source Sans 3 */
  --csr-font-body: 'Roboto', Arial, 'Helvetica Neue', sans-serif;              /* Roboto Medium (direct) */
  --csr-font-mono: 'Times New Roman', Times, serif;                             /* pktable uses Times */

  /* Font sizes */
  --csr-fs-nav: 12px;
  --csr-fs-body: 13px;
  --csr-fs-small: 11px;
  --csr-fs-menu: 15px;
  --csr-fs-download: 20px;
  --csr-fs-h1: 16px;
  --csr-fs-h2: 14px;

  /* Weights */
  --csr-fw-display: 700;
  --csr-fw-menu: 600;
  --csr-fw-body: 500;

  /* Text shadows — used heavily in original */
  --csr-ts-download: 2px 2px 4px #F59003;
  --csr-ts-download-hover: 1px 1px 10px #000;
  --csr-ts-wars: 5px 0 5px #000;
  --csr-ts-notice-h1: 2px 2px 3px #000;

  /* ---------- LAYOUT ---------- */
  --csr-container: 1003px;      /* original fixed */
  --csr-container-bs: 1140px;   /* bootstrap target */
  --csr-sidebar-w: 223px;
  --csr-content-w: 786px;
  --csr-header-h: 191px;
  --csr-menu-h: 72px;
  --csr-navbar-h: 39px;

  /* Radii — essentially none in original, keep subtle */
  --csr-radius-xs: 2px;
  --csr-radius-sm: 3px;
  --csr-radius-md: 4px;

  /* Shadows */
  --csr-shadow-submenu: 0 0 5px 0 rgba(0, 0, 0, 0.9);
  --csr-shadow-panel: inset 0 1px 1px white, 0 1px 3px rgba(0, 0, 0, 0.5);

  /* Spacing scale */
  --csr-sp-0: 0;
  --csr-sp-1: 4px;
  --csr-sp-2: 8px;
  --csr-sp-3: 12px;
  --csr-sp-4: 16px;
  --csr-sp-5: 20px;
  --csr-sp-6: 24px;
  --csr-sp-8: 32px;
  --csr-sp-10: 40px;
  --csr-sp-12: 60px;

  /* Transitions */
  --csr-ease: 0.3s;
  --csr-ease-slow: 0.5s;
}

/* ---------- SEMANTIC ELEMENT STYLES ---------- */
.csr h1, .csr-h1 {
  font-family: var(--csr-font-display);
  font-weight: var(--csr-fw-display);
  font-size: var(--csr-fs-h1);
  color: var(--csr-bronze-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.csr h2, .csr-h2 {
  font-family: var(--csr-font-display);
  font-weight: 600;
  font-size: var(--csr-fs-h2);
  color: var(--csr-bronze-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.csr h3, .csr-h3 {
  font-family: var(--csr-font-body);
  font-weight: 700;
  font-size: var(--csr-fs-small);
  color: var(--csr-ink-muted);
}
.csr p, .csr-p {
  font-family: var(--csr-font-body);
  font-size: 12px;
  color: var(--csr-ink);
  line-height: 1.8;
}
.csr-menu-link {
  font-family: var(--csr-font-menu);
  font-weight: 600;
  font-size: 15px;
  color: var(--csr-bronze-light);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.csr-download-cta {
  font-family: var(--csr-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--csr-yellow);
  text-shadow: var(--csr-ts-download);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.csr-parchment-title {
  font-family: var(--csr-font-display);
  font-weight: 700;
  color: var(--csr-bronze-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.csr-wars-title {
  font-family: var(--csr-font-display);
  color: #fff;
  text-shadow: var(--csr-ts-wars);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}