/* ==========================================================================
   OLBİA DİJİTAL — Tasarım Sistemi
   Renk paleti, bileşenler ve düzen kuralları
   ========================================================================== */

:root {
  /* Ana renkler */
  --olbia-green: #1B6B3A;
  --olbia-green-dark: #14502B;
  --olbia-green-light: #2E8B4F;
  --olbia-green-soft: #E8F3EC;
  --olbia-orange: #F07C1F;
  --olbia-orange-dark: #D8650B;
  --olbia-orange-light: #FF9A45;
  --olbia-orange-soft: #FDF0E3;

  /* Nötrler */
  --bg: #FBF9F4;
  --surface: #FFFFFF;
  --surface-alt: #F7F4EE;
  --border: #E8E2D6;
  --border-strong: #D8CFBE;
  --text: #23301F;
  --text-muted: #7A7668;
  --text-soft: #A5A093;

  /* Rozet / madalya renkleri */
  --bronze: #C87B3E;
  --silver: #A8AFB6;
  --gold: #E0A32B;
  --emerald: #2FA860;
  --diamond: #59A9DE;
  --champion: #E2761B;

  /* Ölçüler */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(35, 48, 31, .06);
  --shadow-md: 0 6px 20px rgba(35, 48, 31, .08);
  --shadow-lg: 0 14px 40px rgba(35, 48, 31, .12);
  --ring: 0 0 0 4px rgba(240, 124, 31, .18);

  --font: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Sayfa köşe dekoru (görseldeki turuncu köşe) */
body::before {
  content: "";
  position: fixed;
  top: -160px; right: -160px;
  width: 420px; height: 420px;
  background: linear-gradient(135deg, var(--olbia-orange-light), var(--olbia-orange));
  border-radius: 50%;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   ÜST BAR / NAVİGASYON
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1360px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--olbia-green), var(--olbia-green-light) 55%, var(--olbia-orange));
  display: grid; place-items: center;
  color: #fff; font-size: 24px;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-text { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 1; }
.brand-text .b-green { color: var(--olbia-green); }
.brand-text .b-orange { color: var(--olbia-orange); }
.brand-sub { font-size: 11px; color: var(--text-soft); letter-spacing: .8px; text-transform: uppercase; margin-top: 3px; }

.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  transition: .18s;
}
.nav a:hover { background: var(--olbia-green-soft); color: var(--olbia-green); }
.nav a.active { background: var(--olbia-green); color: #fff; box-shadow: var(--shadow-sm); }

.op-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--olbia-orange), var(--olbia-orange-dark));
  color: #fff; font-weight: 800; font-size: 15px;
  padding: 9px 18px 9px 9px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(240,124,31,.32);
  flex: none;
}
.op-pill .coin {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--olbia-orange);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900;
}

/* ==========================================================================
   DÜZEN
   ========================================================================== */
.page { max-width: 1360px; margin: 0 auto; padding: 28px 24px 64px; position: relative; z-index: 1; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-sidebar { grid-template-columns: 340px 1fr; align-items: start; }
.stack { display: grid; gap: 20px; }

/* Yönetim paneli modül düzeni */
.admin-page { max-width: 1480px; }
.admin-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.admin-sidebar {
  position: sticky;
  top: 86px;
  align-self: start;
  max-height: calc(100dvh - 102px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 107, 58, .48) transparent;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 46px 14px 14px;
  box-shadow: var(--shadow-sm);
}
.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(27, 107, 58, .38);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(27, 107, 58, .65); }
.admin-home-btn {
  min-height: 42px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--olbia-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  transition: .16s;
}
.admin-home-btn:hover {
  background: var(--olbia-orange-dark);
  transform: translateY(-1px);
}
.admin-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.admin-sidebar-subhead {
  margin-top: 14px;
  padding-top: 14px;
}
.admin-sidebar-head b { font-size: 15px; color: var(--olbia-green); }
.admin-sidebar-head span {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.admin-menu-groups { display: grid; gap: 6px; }
.admin-menu-group {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
}
.admin-menu-group[open] {
  border-color: var(--border);
  background: var(--surface-alt);
}
.admin-menu-group summary {
  min-height: 42px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.admin-menu-group summary::-webkit-details-marker { display: none; }
.admin-menu-group summary:hover { color: var(--olbia-green); }
.admin-menu-group summary > span { text-align: center; font-weight: 900; }
.admin-menu-group summary > b { font-size: 13.5px; }
.admin-menu-group summary > i::before { content: '›'; display: block; font-style: normal; font-size: 20px; line-height: 1; transition: transform .16s; }
.admin-menu-group[open] summary > i::before { transform: rotate(90deg); }
.admin-menu-group > .admin-menu { padding: 0 5px 6px; gap: 2px; }
.admin-menu-group > .admin-menu button,
.admin-menu-group > .admin-menu a { min-height: 36px; padding: 7px 9px; font-size: 13px; }
.admin-menu {
  display: grid;
  gap: 5px;
}
.admin-menu button,
.admin-menu a {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  transition: .16s;
}
.admin-menu button span,
.admin-menu a span {
  width: 24px;
  flex: none;
  text-align: center;
  font-size: 16px;
}
.admin-menu button:hover,
.admin-menu a:hover {
  background: var(--olbia-green-soft);
  color: var(--olbia-green);
}
.admin-menu button.active,
.admin-menu a.active {
  background: var(--olbia-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.admin-page-links a {
  min-height: 38px;
  font-size: 13.5px;
}
.admin-panel-links {
  gap: 3px;
}
.admin-panel-links a {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 750;
}
.admin-content {
  min-width: 0;
}
.admin-module { min-width: 0; }
.admin-module:not(.active) { display: none; }
.admin-module > :last-child { margin-bottom: 0 !important; }
.admin-theme-preview .board-prev {
  max-width: 64px;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
.admin-theme-preview .board-prev .piece { font-size: 24px; }
.admin-name-card-preview .name-card-prev {
  width: 320px;
  min-height: 0;
  aspect-ratio: 3 / 1;
  margin: 0;
  padding: 12px 70px 10px;
  transform: scale(.86);
  transform-origin: left center;
}
.admin-name-card-preview .ncp-rank {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.admin-name-card-preview .ncp-name { font-size: 15px; }
.admin-name-card-preview .ncp-op { font-size: 10px; }
.view-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 800;
}
.view-picker .select {
  min-width: 150px;
  height: 42px;
  border-radius: 999px;
  font-weight: 850;
  color: var(--olbia-green);
}
.name-card-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  border: 1px dashed var(--olbia-orange);
  border-radius: var(--r-md);
  background: rgba(232,124,42,.07);
  color: var(--olbia-green);
  font-size: 12px;
  font-weight: 850;
  padding: 10px 12px;
  cursor: pointer;
}
.name-card-upload:hover {
  background: rgba(232,124,42,.12);
}
.name-card-upload input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.panel-anchor { scroll-margin-top: 92px; }
.panel-status-stack {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
.panel-status-stack > div:empty { display: none; }
body[data-sayfa="panelim"] .grid-sidebar {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 24px;
}
body[data-sayfa="panelim"] .page-head {
  margin-bottom: 18px;
}
body[data-sayfa="yonetim"] .topbar .nav,
body[data-sayfa="egitmen"] .topbar .nav,
body[data-sayfa="panelim"] .topbar .nav,
body[data-sayfa="odevlerim"] .topbar .nav,
body[data-sayfa="magaza"] .topbar .nav,
body[data-sayfa="liderlik"] .topbar .nav { display: none; }
body[data-sayfa="yonetim"] .topbar .brand,
body[data-sayfa="egitmen"] .topbar .brand,
body[data-sayfa="panelim"] .topbar .brand,
body[data-sayfa="odevlerim"] .topbar .brand,
body[data-sayfa="magaza"] .topbar .brand,
body[data-sayfa="liderlik"] .topbar .brand { margin-right: auto; }

/* ==========================================================================
   BAŞLIKLAR
   ========================================================================== */
.page-head { margin-bottom: 24px; }
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
.page-title .accent { color: var(--olbia-orange); }
.page-desc { color: var(--text-muted); font-size: 15px; margin-top: 6px; max-width: 620px; }

.section-title {
  display: flex; align-items: center; gap: 14px;
  font-size: 16px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--olbia-green);
  margin-bottom: 16px;
}
.section-title::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
  border-radius: 2px;
}
.section-title .ico { color: var(--olbia-orange); font-size: 18px; }

/* ==========================================================================
   KARTLAR
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.card-head h3 { font-size: 17px; font-weight: 800; }
.admin-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.card-outline-orange { border: 2px solid var(--olbia-orange); }
.card-outline-green { border: 2px solid var(--olbia-green); }

.op-duzeltme {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.op-duzeltme-baslik,
.op-duzeltme-ozet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.op-duzeltme-baslik { margin-bottom: 14px; }
.op-duzeltme-baslik h4 { margin: 0 0 4px; font-size: 17px; }
.op-duzeltme-baslik p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.op-duzeltme-ozet {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}
.op-duzeltme-ozet span { min-width: 0; }
.op-duzeltme-ozet small,
.op-duzeltme-ozet b { display: block; }
.op-duzeltme-ozet small { margin-bottom: 3px; color: var(--text-muted); }
.op-duzeltme-onizleme { margin: 0; }
.op-duzeltme-onizleme.danger { border-color: var(--danger, #c73a3a); color: var(--danger, #c73a3a); }

@media (max-width: 640px) {
  .op-duzeltme-baslik,
  .op-duzeltme-ozet { align-items: stretch; flex-direction: column; }
  .op-duzeltme-ozet { gap: 10px; }
}

/* Yeşil başlıklı liste kartı */
.list-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.list-card-head {
  background: linear-gradient(135deg, var(--olbia-green), var(--olbia-green-dark));
  color: #fff; padding: 13px 22px;
  font-weight: 800; font-size: 14px; letter-spacing: .8px; text-transform: uppercase;
}
.earn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px; font-weight: 600;
}
.earn-row:last-child { border-bottom: 0; }
.earn-row .ico { font-size: 19px; width: 26px; text-align: center; flex: none; }
.earn-row .val { margin-left: auto; color: var(--olbia-orange); font-weight: 800; white-space: nowrap; }

.op-history-modal {
  width: min(780px, 100%);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.op-history-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--border);
}
.op-history-head h3 { margin: 8px 0 0; font-size: 21px; }
.op-history-scroll {
  min-height: 180px;
  max-height: min(65dvh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.op-history-day + .op-history-day { border-top: 1px solid var(--border); }
.op-history-day-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 18px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.op-history-day-head strong { font-size: 14px; text-transform: capitalize; }
.op-history-day-head span { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.op-history-row { padding: 12px 18px; }
.op-history-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.op-history-modal > .modal-actions {
  margin: 0;
  padding: 14px 26px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width: 640px) {
  .op-history-head { align-items: flex-start; flex-direction: column; padding: 20px 18px 14px; }
  .op-history-day-head { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px 14px; }
  .op-history-row { padding: 12px 14px; gap: 10px; }
  .op-history-row .val { font-size: 13px; }
  .op-history-modal > .modal-actions { padding: 12px 18px 16px; }
}

/* Bilgi kutusu */
.note {
  display: flex; gap: 13px; align-items: flex-start;
  border: 2px solid var(--olbia-orange);
  background: var(--olbia-orange-soft);
  border-radius: var(--r-md);
  padding: 15px 18px;
  font-size: 13.5px; font-weight: 600; color: #6B4310;
}
.note .star {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--olbia-orange); color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.hint { font-size: 12.5px; color: var(--text-soft); display: flex; align-items: center; gap: 7px; }
.hint.danger { color: var(--danger, #c73a3a); font-weight: 700; }

/* ==========================================================================
   PROFİL KARTI
   ========================================================================== */
.profile-card { text-align: center; }
.avatar-ring {
  width: 168px; height: 168px; margin: 4px auto 16px;
  border-radius: 50%; position: relative;
  padding: 8px;
  background: conic-gradient(var(--olbia-green) 0 62%, var(--olbia-orange) 62% 100%);
  box-shadow: var(--shadow-md);
}
.avatar-ring::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; background: var(--surface);
}
.avatar-img {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--olbia-green-light), var(--olbia-green-dark));
  display: grid; place-items: center;
  font-size: 62px;
}
.asset-sprite {
  display: inline-block;
  width: 48px;
  aspect-ratio: 1;
  flex: none;
  object-fit: contain;
  vertical-align: middle;
}
.asset-profile {
  border-radius: 50%;
  background-color: #f7efe0;
}
.custom-avatar { object-fit: cover; }
.avatar-icon-sprite {
  display: inline-grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: #fff7e8;
  font-size: 28px;
  line-height: 1;
  vertical-align: middle;
}
.asset-badge,
.asset-badge18 {
  filter: drop-shadow(0 9px 12px rgba(20, 18, 14, .16));
}
.avatar-img .asset-profile,
.avatar-img .avatar-icon-sprite {
  width: 100%;
  height: 100%;
  display: grid;
  font-size: clamp(48px, 42%, 86px);
}
.leader-avatar-fill {
  width: 100%;
  height: 100%;
  display: block;
}
.tiny-avatar {
  width: 24px;
  height: 24px;
  display: block;
}
.modal.avatar-modal {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.avatar-crop-layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(240px, 1fr);
  gap: 24px;
  align-items: start;
}
.avatar-crop-layout > * { min-width: 0; }
.avatar-crop-stage {
  position: relative;
  width: min(460px, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  touch-action: none;
}
.avatar-crop-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.avatar-crop-stage canvas:active { cursor: grabbing; }
.avatar-crop-layout .stack { min-width: 0; }
.avatar-crop-layout .hint { overflow-wrap: anywhere; }
.avatar-crop-layout input[type="range"] { width: 100%; }
.modal.avatar-modal .modal-actions { flex-wrap: wrap; }
.modal.avatar-modal .who { min-width: 0; }
.modal.avatar-modal .who > div:last-child { min-width: 0; }
.modal.avatar-modal .who .nm,
.modal.avatar-modal .who .sub {
  overflow-wrap: anywhere;
}
.avatar-crop-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  border: 3px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 999px rgba(20, 18, 14, .28), inset 0 0 0 1px rgba(20, 18, 14, .16);
}
.rozet-crop-bg { z-index: 280; }
.rozet-crop-modal { width: min(940px, calc(100vw - 32px)); }
.rozet-crop-stage { border-radius: var(--r-sm); background-color: transparent; background-image: linear-gradient(45deg, #e8e5de 25%, transparent 25%), linear-gradient(-45deg, #e8e5de 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e5de 75%), linear-gradient(-45deg, transparent 75%, #e8e5de 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.rozet-crop-frame { position: absolute; inset: 3%; border: 2px solid rgba(255,255,255,.95); box-shadow: 0 0 0 999px rgba(20,18,14,.18), inset 0 0 0 1px rgba(20,18,14,.18); pointer-events: none; }
.rozet-crop-modes { width: 100%; }
.rozet-crop-modes button { flex: 1; }
.rozet-crop-preview-wrap { display: grid; gap: 8px; justify-items: start; }
.rozet-crop-preview-wrap canvas { width: 144px; height: 144px; border: 1px solid var(--border); border-radius: var(--r-sm); background-color: transparent; background-image: linear-gradient(45deg, #e8e5de 25%, transparent 25%), linear-gradient(-45deg, #e8e5de 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e5de 75%), linear-gradient(-45deg, transparent 75%, #e8e5de 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.avatar-edit {
  position: absolute; right: 6px; bottom: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--olbia-orange); color: #fff;
  border: 3px solid var(--surface);
  display: grid; place-items: center; cursor: pointer;
  font-size: 15px; box-shadow: var(--shadow-sm);
  transition: .18s;
}
.avatar-edit:hover { transform: scale(1.08); background: var(--olbia-orange-dark); }
.avatar-badge { position: absolute; left: 6px; top: 12px; z-index: 3; font-size: 26px; }
.avatar-badge .custom-accessory {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(20, 18, 14, .2));
}

.profil-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.profil-avatar-grid.profil-avatar-view-liste {
  grid-template-columns: 1fr;
}
.profil-avatar-grid.profil-avatar-view-galeri {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.profil-avatar-step {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
  padding: 46px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s, opacity .16s, background .16s;
}
.profil-avatar-view-liste .profil-avatar-step {
  grid-template-columns: 62px minmax(0, 1fr);
  padding: 14px 14px 14px 58px;
  min-height: 92px;
}
.profil-avatar-view-liste .profil-avatar-admin-preview {
  width: 56px;
  height: 56px;
  align-self: center;
}
.profil-avatar-view-liste .profil-avatar-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.profil-avatar-view-liste .profil-avatar-fields > .form-row:first-child {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px;
  gap: 10px;
}
.profil-avatar-view-liste .profil-avatar-meta {
  margin: 0;
  min-width: 190px;
}
.profil-avatar-view-liste .profil-avatar-actions {
  margin: 0;
  gap: 8px;
  flex-wrap: nowrap;
}
.profil-avatar-view-liste .profil-avatar-actions .input {
  max-width: 220px;
}
.profil-avatar-view-liste .profil-avatar-drag {
  left: 14px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}
.profil-avatar-view-liste .profil-avatar-step.is-dragging::after {
  left: 58px;
  top: 10px;
}
.profil-avatar-view-galeri .profil-avatar-step {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 52px 16px 16px;
}
.profil-avatar-view-galeri .profil-avatar-admin-preview {
  width: 118px;
  height: 118px;
}
.profil-avatar-view-galeri .profil-avatar-fields {
  width: 100%;
}
.profil-avatar-view-galeri .profil-avatar-fields > .form-row:first-child,
.profil-avatar-view-galeri .profil-avatar-actions {
  flex-direction: column;
  align-items: stretch;
}
.profil-avatar-view-galeri .profil-avatar-fields > .form-row:first-child .field {
  flex: 1 1 auto !important;
}
.profil-avatar-view-galeri .profil-avatar-meta {
  justify-content: center;
}
.profil-avatar-step.is-dragging {
  opacity: .88;
  transform: rotate(-.35deg) scale(.992);
  border-color: var(--olbia-orange);
  background:
    linear-gradient(135deg, rgba(232,124,42,.13), rgba(27,107,58,.08)),
    var(--surface);
  box-shadow: 0 16px 42px rgba(65, 42, 15, .18), 0 0 0 3px rgba(232,124,42,.16);
  cursor: grabbing;
  z-index: 4;
}
.profil-avatar-step.is-dragging::after {
  content: 'Taşınıyor';
  position: absolute;
  left: 14px;
  top: 12px;
  border-radius: 999px;
  background: var(--olbia-orange);
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.profil-avatar-step.is-drop-target {
  border-color: var(--olbia-orange);
  background: rgba(255, 247, 236, .94);
  box-shadow: 0 0 0 4px rgba(232,124,42,.18), var(--shadow-sm);
  transform: translateY(-2px);
}
.profil-avatar-drag {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(250,247,240,.92);
  color: var(--olbia-green);
  display: grid;
  place-items: center;
  cursor: grab;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.profil-avatar-drag:hover,
body.profil-avatar-is-dragging .profil-avatar-drag {
  border-color: var(--olbia-orange);
  background: var(--olbia-orange);
  color: #fff;
}
.profil-avatar-drag:active { cursor: grabbing; }
body.profil-avatar-is-dragging .profil-avatar-step { cursor: grabbing; }
.profil-avatar-admin-preview {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(var(--olbia-orange) 0 28%, var(--olbia-green) 28% 100%);
  display: grid;
  place-items: center;
}
.profil-avatar-admin-preview .asset-sprite,
.profil-avatar-admin-img {
  width: 100%;
  height: 100%;
  display: block;
}
.profil-avatar-fields { min-width: 0; }
.profil-avatar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.profil-avatar-actions {
  align-items: center;
}
.profil-avatar-actions .input {
  min-width: 0;
}
.onay-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
}

.profile-name { font-size: 27px; font-weight: 800; color: var(--olbia-green); letter-spacing: -.4px; }
.profile-role { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.profile-username { color: var(--text-soft); font-size: 13px; margin-top: 7px; }
.profile-username b { color: var(--olbia-green); }

.op-box {
  margin-top: 18px; padding: 18px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
}
.op-box-head { display: flex; align-items: center; gap: 10px; }
.op-box-head .coin {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--olbia-orange), var(--olbia-orange-dark));
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 13px;
}
.op-box-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--text-muted); text-transform: uppercase; }
.op-box-value { font-size: 34px; font-weight: 800; color: var(--olbia-green); letter-spacing: -1px; line-height: 1.1; margin: 6px 0 14px; }
.op-meta { font-size: 12.5px; color: var(--text-muted); display: flex; justify-content: space-between; margin-top: 6px; }
.op-meta b { color: var(--text); }

/* ==========================================================================
   İLERLEME ÇUBUĞU
   ========================================================================== */
.bar { height: 12px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--olbia-green), var(--olbia-green-light) 60%, var(--olbia-orange));
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.bar.thin { height: 8px; }

.level-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.level-hex {
  width: 48px; height: 48px; flex: none;
  background: linear-gradient(135deg, var(--olbia-orange), var(--olbia-orange-dark));
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  color: #fff; display: grid; place-items: center;
  font-size: 20px; font-weight: 900;
}
.rating-title { margin-top: 18px; }
.rating-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.rating-tile {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 10px 11px;
}
.rating-tile span,
.rating-tile small {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.rating-tile b {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.rating-empty,
.rating-chart-empty {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 12.5px;
}
.rating-spark,
.rating-chart {
  width: 100%;
  margin-top: 10px;
  overflow: visible;
}
.rating-spark { height: 78px; }
.rating-chart { height: 156px; }
.rating-spark line,
.rating-chart line {
  stroke: var(--border-strong);
  stroke-width: 1.4;
}
.rating-spark polyline,
.rating-chart polyline {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rating-spark .ukd,
.rating-chart .ukd { stroke: var(--olbia-orange); }
.rating-spark .elo,
.rating-chart .elo { stroke: var(--diamond); }
.rating-chart .seviye { stroke: var(--olbia-green); }
.rating-legend {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
}
.rating-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -1px;
}
.rating-legend .ukd::before { background: var(--olbia-orange); }
.rating-legend .elo::before { background: var(--diamond); }
.rating-admin-mini {
  display: grid;
  gap: 3px;
  min-width: 92px;
  font-size: 12px;
  color: var(--text-muted);
}
.rating-admin-mini b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rating-modal { width: min(860px, 100%) !important; }
.rating-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.rating-history {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}
.rating-history-row {
  display: grid;
  grid-template-columns: auto 72px 100px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12.5px;
}
.rating-history-row b {
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.rating-history-row small {
  color: var(--text-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}
.lichess-kopar-note {
  border-color: var(--danger, #c73a3a);
  background: #FFF4F1;
  color: #693126;
}
.lichess-kopar-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.lichess-kopar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(105,49,38,.16);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.lichess-kopar-row small {
  display: block;
  color: var(--text-muted);
  margin-top: 2px;
}
.lichess-kopar-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
.op-talep-note .star {
  min-width: 38px;
  padding-inline: 8px;
  font-size: 14px;
}
.op-talep-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.op-talep-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.58);
}
.op-talep-row small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  line-height: 1.4;
}
.op-talep-row strong.pos { color: var(--olbia-green); }
.op-talep-row strong.neg { color: #C0392B; }
.op-talep-aciklama {
  color: var(--text) !important;
  opacity: .74;
}
.op-talep-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.op-rule-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.op-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.op-rule-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.op-rule-main b {
  display: block;
  color: var(--text);
  overflow-wrap: anywhere;
}
.op-rule-main small {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E6F3EA;
  color: var(--olbia-green);
  font-weight: 800;
}
.op-rule-icon {
  width: 28px;
  text-align: center;
  font-size: 22px;
  flex: none;
}
.op-rule-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--olbia-orange);
  font-weight: 900;
}
.op-rule-points .input {
  min-width: 0;
  padding-inline: 10px;
  text-align: right;
}
.admin-details > summary {
  list-style: none;
  cursor: pointer;
  color: var(--olbia-green);
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-details > summary::-webkit-details-marker { display: none; }
.admin-details > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--text-muted);
}
.admin-details[open] > summary {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.admin-details[open] > summary::after {
  transform: rotate(180deg);
}
.avatar-select-modal {
  width: min(980px, 100%) !important;
}
.avatar-choice-section + .avatar-choice-section {
  margin-top: 22px;
}
.avatar-choice-title {
  color: var(--text-muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 13px;
  margin-bottom: 10px;
}
.avatar-choice-grid {
  display: grid;
  gap: 12px;
}
.avatar-choice-grid.profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.avatar-choice-grid.icon-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.avatar-choice {
  min-width: 0;
  min-height: 156px;
  border: 2px solid #e6dccb;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbf8f1);
  color: var(--text);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 12px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(38, 50, 35, .08);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.avatar-choice:hover:not(:disabled) {
  border-color: var(--olbia-orange);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(38, 50, 35, .13);
}
.avatar-choice.selected {
  border-color: var(--olbia-orange);
  box-shadow: 0 0 0 4px rgba(238, 121, 21, .13), 0 18px 34px rgba(38, 50, 35, .12);
}
.avatar-choice.selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--olbia-orange);
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.avatar-choice.is-unlocked {
  border-color: rgba(30, 120, 66, .34);
}
.avatar-choice.is-auto {
  border-color: rgba(75, 166, 219, .36);
  background: linear-gradient(180deg, #fff, #eef8ff);
}
.avatar-frame {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff 0 36%, #f3e9d9 37% 100%);
  border: 3px solid #eec174;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.72), 0 9px 18px rgba(38, 50, 35, .14);
}
.avatar-choice .avatar-choice-img,
.avatar-frame .asset-sprite {
  width: 76px;
  height: 76px;
  display: block;
}
.avatar-choice.icon-choice {
  min-height: 76px;
  font-size: 34px;
  border-radius: 12px;
  background: #fff;
}
.avatar-choice .avatar-name {
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.avatar-choice small {
  color: var(--text-muted);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  flex-wrap: wrap;
}
.avatar-choice small b {
  color: var(--text);
}
.avatar-open {
  color: var(--olbia-green);
}
.avatar-locked {
  color: #8b8174;
}
.avatar-lock {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2c332b;
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.20);
}
.avatar-choice.locked {
  opacity: .72;
  cursor: not-allowed;
  border-color: #d8d0c2;
  background: linear-gradient(180deg, #f5f2ec, #ebe7df);
  box-shadow: none;
}
.avatar-choice.locked .avatar-frame {
  border-color: #c9c1b2;
  filter: grayscale(1);
}
.avatar-choice.locked .avatar-choice-img,
.avatar-choice.locked .asset-sprite {
  opacity: .55;
}

/* ==========================================================================
   İSTATİSTİK KARTLARI
   ========================================================================== */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px;
  display: flex; align-items: center; gap: 15px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--olbia-green);
}
.stat.orange::after { background: var(--olbia-orange); }
.stat .s-ico {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: var(--olbia-green-soft); color: var(--olbia-green);
  display: grid; place-items: center; font-size: 21px;
}
.stat.orange .s-ico { background: var(--olbia-orange-soft); color: var(--olbia-orange); }
.stat .s-val { font-size: 25px; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
.stat .s-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* ==========================================================================
   LICHESS ÖZETİ
   ========================================================================== */
.lichess-games { margin-top: 16px; border-top: 1px solid var(--border); }
.lichess-games-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 8px;
}
.lichess-games-head strong { font-size: 13px; text-transform: uppercase; color: var(--olbia-green); }
.lichess-games-head span { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.lichess-game-row {
  min-height: 58px;
  display: grid; grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.lichess-game-row:last-child { border-bottom: 0; }
.lichess-result {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: var(--surface-alt); color: var(--text-muted);
}
.lichess-result.win { background: var(--olbia-green-soft); color: var(--olbia-green); }
.lichess-result.loss { background: #F8E7E4; color: #A63B2B; }
.lichess-result.draw { background: var(--surface-alt); color: var(--text-muted); }
.lichess-result.puzzle { background: #E8F0FF; color: #235A96; }
.lichess-game-main { min-width: 0; }
.lichess-game-main b, .lichess-game-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lichess-game-main b { font-size: 13.5px; }
.lichess-game-main small { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.lichess-rating { font-size: 12px; font-weight: 900; }
.lichess-rating.up { color: var(--olbia-green); }
.lichess-rating.down { color: #A63B2B; }
.lichess-racer-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.racer-task-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 2px solid var(--olbia-orange);
  border-radius: var(--r-md);
  background: linear-gradient(110deg, #fff7ed 0%, var(--surface) 68%);
  box-shadow: var(--shadow-sm);
}
.racer-task-icon,
.racer-task-modal-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--olbia-green);
  color: #fff;
  font-size: 30px;
}
.racer-task-copy { min-width: 0; }
.racer-task-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--olbia-orange);
  font-size: 11px;
  font-weight: 900;
}
.racer-task-copy h2 { margin: 0; font-size: 20px; }
.racer-task-copy p { margin: 4px 0; color: var(--text-muted); }
.racer-task-date { font-size: 12px; font-weight: 800; color: var(--olbia-green); }
.racer-task-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.racer-task-modal { max-width: 520px; text-align: center; }
.racer-task-modal-icon { margin: 0 auto 12px; }
.racer-task-modal .tag { display: inline-flex; margin-bottom: 10px; }
.racer-task-modal h3 { margin: 0 0 8px; font-size: 25px; }
.racer-task-modal p { color: var(--text-muted); }
.racer-task-modal .modal-actions { justify-content: center; }
@media (max-width: 720px) {
  .racer-task-card { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .racer-task-icon { width: 48px; height: 48px; font-size: 25px; }
  .racer-task-actions { grid-column: 1 / -1; justify-content: stretch; }
  .racer-task-actions .btn { flex: 1; }
}
.racer-bars {
  height: 92px;
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.racer-bars span {
  position: relative;
  flex: 1;
  min-width: 22px;
  max-width: 70px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--olbia-orange), var(--olbia-green));
}
.racer-bars b {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
}
.racer-last {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.racer-last a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.racer-last span { color: var(--text-muted); font-weight: 800; }
.racer-results-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.racer-results-mini span {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
}
.racer-results-mini em {
  margin-left: 5px;
  color: var(--olbia-orange);
  font-style: normal;
}
.lichess-activity-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lichess-activity-head,
.lichess-activity-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.5fr) minmax(82px, .75fr) minmax(112px, 1fr) minmax(74px, .65fr) minmax(82px, .7fr);
  align-items: center;
  gap: 12px;
  min-width: 680px;
}
.lichess-activity-head {
  padding: 10px 14px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lichess-activity-row {
  min-height: 62px;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}
.lichess-activity-row b,
.lichess-activity-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lichess-activity-row b { font-size: 13.5px; }
.lichess-activity-row small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
}
.lichess-activity-row > span { min-width: 0; }
.lichess-live {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
}
.lichess-live strong { font-size: 13.5px; }
.lichess-live span { color: var(--text-muted); font-size: 12.5px; font-weight: 700; }
.lichess-live.playing { border-color: var(--olbia-orange); background: var(--olbia-orange-soft); }
.lichess-live.playing strong { color: var(--olbia-orange-dark); }
.lichess-live.online { border-color: var(--olbia-green); background: var(--olbia-green-soft); }
.lichess-live.online strong { color: var(--olbia-green); }
.lichess-live.offline strong { color: var(--text-muted); }
.lichess-live-main { display: grid; gap: 3px; min-width: 0; }
.lichess-live-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.admin-student-select {
  width: auto;
  min-width: 220px;
  height: 36px;
  margin: 0 4px;
  padding-block: 6px;
  display: inline-block;
}
.level-op-input {
  max-width: 150px;
  text-align: right;
  margin-left: auto;
}
.compact-select {
  min-width: 150px;
}
.mini-input {
  min-height: 36px;
  padding-block: 7px;
  font-size: 12px;
}
.odul-icon-input {
  width: 54px;
  min-width: 54px;
  height: 54px;
  padding: 8px;
  text-align: center;
  font-size: 22px;
  border-radius: 14px;
}
.who.compact { gap: 10px; }
.ava.mini {
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 18px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.switch-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.switch-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--olbia-green);
}
.lichess-empty-report { max-width: 620px; margin: 0 auto; }
.lichess-empty-report h2 { font-size: 22px; margin-bottom: 8px; }
.lichess-empty-report p { margin: 0 auto 18px; max-width: 420px; }
.lichess-empty-icon {
  width: 70px; height: 70px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--olbia-green-soft);
  color: var(--olbia-green);
  font-size: 38px;
}
.lichess-report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.lichess-report-head h2 { font-size: 20px; }
.lichess-report-mark {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--olbia-green);
  color: #fff;
  font-size: 30px;
}
.lichess-report-list { display: grid; gap: 4px; }
.lichess-report-row {
  min-height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.lichess-report-row:last-child { border-bottom: 0; }
.lichess-report-row b, .lichess-report-row small { display: block; }
.lichess-report-row b { font-size: 13.5px; }
.lichess-report-row small { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.lichess-report-row > span:last-child { font-weight: 900; color: var(--olbia-green); }

/* ==========================================================================
   LICHESS OYUN TAHTASI
   ========================================================================== */
.lichess-board-page { max-width: 1760px; }
.lichess-board-shell {
  display: grid;
  grid-template-columns: 280px minmax(520px, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border-radius: 8px;
  background: #161512;
  box-shadow: 0 24px 46px rgba(0, 0, 0, .18);
  color: #BDB8AD;
}
.lichess-board-area { display: grid; gap: 10px; }
.lichess-side-rail {
  display: grid;
  align-content: start;
  gap: 12px;
}
.lichess-rail-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 6px;
  background: #24231F;
  color: #BDB8AD;
}
.lichess-rail-card strong,
.lichess-rail-card span { display: block; }
.lichess-rail-card strong { color: #E2DED3; font-size: 14px; }
.lichess-rail-card span { margin-top: 3px; color: #A7A196; font-size: 12.5px; line-height: 1.35; }
.lichess-rail-card .rail-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #7A746A;
  border: 3px solid #59544C;
  font-size: 26px;
  flex: none;
}
.lichess-rail-card.score {
  min-height: 112px;
  display: grid;
  place-items: center;
  text-align: center;
}
.lichess-rail-card.score b { font-size: 44px; line-height: 1; color: #D8D4CA; }
.lichess-rail-card.muted-card {
  display: grid;
  align-content: center;
}
.lichess-rail-card.menu-card {
  display: grid;
  gap: 8px;
  align-content: start;
}
.lichess-rail-card.menu-card strong { margin-bottom: 2px; }
.lichess-rail-card.menu-card a {
  display: block;
  padding: 7px 0;
  color: #BDB8AD;
  font-size: 13px;
  border-top: 1px solid #34322D;
}
.lichess-rail-card.menu-card a:hover { color: #4EA1F3; }
.lichess-board-stage {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lichess-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
}
.lichess-board-top strong,
.lichess-board-top span { display: block; }
.lichess-board-top strong { color: #ECE7DB; font-size: 15px; }
.lichess-board-top span { color: #9D978B; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.lichess-clock {
  min-width: 92px;
  padding: 9px 12px;
  border-radius: 5px;
  background: #24231F;
  border: 1px solid #34322D;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #D8D4CA;
}
.lichess-clock.active { border-color: #CA8A37; color: #F0D6A7; background: #332A1D; }
.olbia-chessboard {
  width: min(100%, calc(100vh - 210px), 980px);
  min-width: 520px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  background: var(--sq-dark, #B98B61);
}
.chess-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  font: inherit;
  transition: box-shadow .14s ease, filter .14s ease;
  touch-action: none;
}
.chess-square[data-draggable="1"] { cursor: grab; }
.chess-square[data-draggable="1"]:active { cursor: grabbing; }
.chess-square.drag-source .piece { opacity: .18; }
/* Mağazadan alınan tahta teması .th-* sınıflarıyla --sq-light / --sq-dark
   değişkenlerini tanımlıyor. Kareler bu değişkenleri OKUMUYORDU — renkler
   sabit yazılmıştı, yani satın alınan tema tahtaya hiç uygulanmıyordu.
   Varsayılan değerler yedek: tema kuşanılmamışsa klasik görünüm.
   Dokulu temalar aynı kare renklerinin üstüne --sq-*-texture bindirir. */
.chess-square.light {
  background-color: var(--sq-light, #F0D9B5);
  background-image: var(--sq-light-texture, none);
  background-size: var(--sq-texture-size, auto);
  background-position: center;
}
.chess-square.dark  {
  background-color: var(--sq-dark, #B98B61);
  background-image: var(--sq-dark-texture, none);
  background-size: var(--sq-texture-size, auto);
  background-position: center;
}
.chess-square:not(:disabled):hover { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .22); }
.chess-square.selected { outline: 4px solid #D6D95C; outline-offset: -4px; }
.chess-square.last::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: rgba(120, 143, 83, .65);
}
.chess-square small {
  position: absolute;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(85, 68, 49, .62);
  pointer-events: none;
}
.chess-square small.rank { left: 5px; top: 4px; }
.chess-square small.file { right: 6px; bottom: 4px; }
.chess-square.dark small { color: rgba(255, 255, 255, .6); }
/* ---- Taşlar ----

   Unicode'un DOLU glifleri kullanılıyor (♚♛♜♝♞♟). Beyaz taşlar bunların
   beyaza boyanmış hâli; eskiden tek piksellik bir gölgeyle
   sınırlandırılıyordu ve tahtanın açık karelerinde silik, "içi boş"
   görünüyordu.

   Şimdi gerçek bir kontur var (-webkit-text-stroke). Beyaz taş beyaz
   dolgu + koyu kontur, siyah taş siyah dolgu + ince açık kontur alıyor:
   ikisi de koyu ve açık karelerde okunuyor.

   Kontur glifin ortasına biniyor ve dolguyu içeriden yiyor; bunu
   dengelemek için punto biraz büyütüldü. */
.piece {
  position: relative;
  z-index: 1;
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 1;
  transform: translateY(-1px);
  -webkit-text-stroke-width: 1.6px;
  paint-order: stroke fill;
}
.piece.white {
  color: #FFFFFF;
  -webkit-text-stroke-color: #14120E;
  /* Katmanlı gölge konturu kalınlaştırıyor — text-stroke desteklenmeyen
     tarayıcılarda da taş belirgin kalıyor. */
  text-shadow:
     1px  0 0 #14120E, -1px  0 0 #14120E,
     0  1px 0 #14120E,  0 -1px 0 #14120E,
     0 3px 7px rgba(0, 0, 0, .38);
}
.piece.black {
  color: #14120E;
  -webkit-text-stroke-color: rgba(255, 255, 255, .5);
  text-shadow:
     1px  0 0 rgba(255, 255, 255, .35), -1px  0 0 rgba(255, 255, 255, .35),
     0  1px 0 rgba(255, 255, 255, .35),  0 -1px 0 rgba(255, 255, 255, .35),
     0 3px 7px rgba(0, 0, 0, .30);
}

/* Sürüklenen taş da aynı görünsün */
.lichess-drag-piece .piece { font-size: 58px; }

@media (max-width: 560px) {
  .piece { -webkit-text-stroke-width: 1.2px; }
}
body.lichess-dragging { user-select: none; }
.lichess-drag-piece {
  position: fixed;
  z-index: 9999;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .28));
}
.lichess-board-panel {
  position: sticky;
  top: 18px;
  align-self: start;
  background: #24231F;
  border-color: #2E2C27;
  color: #BDB8AD;
  box-shadow: none;
}
.lichess-board-panel .card-head h3 { color: #ECE7DB; }
.lichess-board-panel .btn-ghost {
  color: #D8D4CA;
  border-color: #5B564E;
  background: transparent;
}
.lichess-board-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lichess-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 4px;
  border: 1px solid #37342F;
  border-radius: 6px;
  background: #1D1C19;
}
.lichess-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8F897E;
  font-weight: 900;
  cursor: pointer;
}
.lichess-mode-tabs button.active {
  background: #2F2D28;
  color: #E2DED3;
  box-shadow: none;
}
.lichess-mode-pane[hidden] { display: none; }
.lichess-seek-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #37342F;
  border-radius: 6px;
  background: #1D1C19;
}
.lichess-seek-box[hidden] { display: none; }
.lichess-seek-box strong { color: #F0A14B; }
.lichess-seek-box span { color: #A7A196; font-size: 12.5px; font-weight: 700; }
.lichess-seek-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.lichess-seek-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 8px 4px;
  color: #8F897E;
  font-weight: 900;
  cursor: pointer;
}
.lichess-seek-tabs button.active {
  color: #F0A14B;
  border-bottom-color: #F0A14B;
}
.lichess-seek-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.seek-tile {
  min-height: 82px;
  border: 1px solid #3E3930;
  border-radius: 6px;
  background: #292722;
  color: #E2DED3;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.seek-tile b,
.seek-tile small { display: block; }
.seek-tile b { font-size: 24px; line-height: 1; }
.seek-tile small { margin-top: 8px; color: #9D978B; font-weight: 800; }
.seek-tile:hover { border-color: #F0A14B; color: #F0D6A7; }
.seek-custom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}
.seek-custom[hidden],
.seek-tile[hidden] { display: none; }
.seek-custom label span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 800;
}
.lichess-puzzle-tools {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.lichess-puzzle-tools label span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #A7A196;
  font-weight: 800;
}
.lichess-board-panel .input {
  background: #1D1C19;
  border-color: #4A453E;
  color: #E2DED3;
}
.lichess-board-panel .note {
  background: #2A251F;
  border-color: #7D542A;
  color: #EAD4BA;
}
.lichess-board-panel .note-success {
  background: #1E2B1F;
  border-color: #4F7D38;
  color: #D8E8C6;
}
.lichess-board-panel .note-error {
  background: #332020;
  border-color: #8B3E34;
  color: #F0C4BD;
}
.lichess-puzzle-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.lichess-puzzle-meta div {
  min-height: 58px;
  padding: 10px;
  border: 1px solid #37342F;
  border-radius: 6px;
  background: #1D1C19;
}
.lichess-puzzle-meta b,
.lichess-puzzle-meta span { display: block; }
.lichess-puzzle-meta b { color: #8F897E; font-size: 11px; }
.lichess-puzzle-meta span { margin-top: 3px; color: #E2DED3; font-weight: 900; font-size: 13px; }
.btn.danger { color: #A63B2B; border-color: #F0C8C1; }
.lichess-board-panel .btn.danger { color: #F0B1A8; border-color: #70443E; }
.lichess-move-list {
  max-height: 420px;
  overflow: auto;
  border-top: 1px solid #37342F;
  padding-top: 10px;
}
.lichess-move-list > div {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #37342F;
  font-size: 13px;
  color: #C7C2B8;
}
.lichess-move-list b { color: #777168; }
.lichess-move-list .done span { color: #9FCA72; font-weight: 800; }
.setting-tile {
  min-height: 138px;
  display: grid; gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.setting-tile span {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800;
}
.setting-tile input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--olbia-green); }
.setting-tile small { color: var(--text-muted); font-size: 12px; }

/* ==========================================================================
   ÜRÜN / ÖDÜL KARTLARI
   ========================================================================== */
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 14px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: .2s;
  position: relative;
  display: flex; flex-direction: column;
}
.item-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--olbia-orange); }
.item-card.owned { border-color: var(--olbia-green); background: linear-gradient(180deg, var(--olbia-green-soft), var(--surface) 50%); }
.item-card.equipped { border: 2px solid var(--olbia-orange); box-shadow: var(--ring); }
.item-card.locked { opacity: .62; }
.item-card.locked:hover { transform: none; border-color: var(--border); }

.item-name { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.item-art {
  height: 96px; display: grid; place-items: center;
  font-size: 52px; margin-bottom: 12px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
}
.custom-shop-accessory .custom-accessory {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}
.item-price {
  display: inline-block; margin: 0 auto 10px;
  background: var(--olbia-orange-soft); color: var(--olbia-orange-dark);
  font-weight: 800; font-size: 13.5px;
  padding: 5px 15px; border-radius: 999px;
}
.item-price.free { background: var(--olbia-green-soft); color: var(--olbia-green); }
.item-flag {
  position: absolute; top: 10px; right: 10px;
  background: var(--olbia-green); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}
.item-flag.orange { background: var(--olbia-orange); }

/* Çerçeve önizlemeleri */
.frame-prev {
  width: 92px; height: 92px; margin: 0 auto 12px;
  border-radius: 50%; padding: 9px;
  display: grid; place-items: center;
  position: relative;
}
.frame-prev::after {
  content: ""; position: absolute; inset: 9px;
  border-radius: 50%; background: var(--surface-alt);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.06);
}
.frame-prev .fp-ico { position: relative; z-index: 1; font-size: 30px; }
.frame-prev.custom-shop-frame {
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.frame-prev.custom-shop-frame::after { inset: 14px; }
.frame-prev.custom-shop-frame > img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.frame-prev.custom-shop-frame .fp-ico { z-index: 3; }
.fr-start   { background: conic-gradient(var(--olbia-green) 0 55%, #DCDCDC 55% 100%); }
.fr-bronze  { background: conic-gradient(var(--bronze), #8C5528, var(--bronze)); }
.fr-silver  { background: conic-gradient(#E6E9EC, var(--silver), #E6E9EC); }
.fr-gold    { background: conic-gradient(#F7D881, var(--gold), #B8811B, var(--gold)); }
.fr-emerald { background: conic-gradient(#7EE0A8, var(--emerald), #14733C, var(--emerald)); }
.fr-diamond { background: conic-gradient(#BFE6FB, var(--diamond), #2E7DAF, var(--diamond)); }
.fr-champ   { background: conic-gradient(#FFC46B, var(--champion), #A94E0C, var(--champion)); }

/* Tahta teması önizleme */
.board-prev {
  width: 100%; aspect-ratio: 1/1; max-width: 118px;
  margin: 0 auto 12px; border-radius: var(--r-sm);
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  overflow: hidden; box-shadow: var(--shadow-sm);
  position: relative;
}
.board-prev span {
  background-color: var(--sq-light, #EFE7D6);
  background-image: var(--sq-light-texture, none);
  background-size: var(--sq-texture-size, auto);
  background-position: center;
}
.board-prev span.d {
  background-color: var(--sq-dark, #6C8A5A);
  background-image: var(--sq-dark-texture, none);
  background-size: var(--sq-texture-size, auto);
  background-position: center;
}
.board-prev .piece {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; background: none !important;
  text-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.th-klasik    { --sq-light: #F0E6D2; --sq-dark: #7D9B63; }
.th-orman     { --sq-light: #CBE0BC; --sq-dark: #2E6B34; }
.th-gundogumu { --sq-light: #FFE0B0; --sq-dark: #E08A2B; }
.th-gece      { --sq-light: #26436E; --sq-dark: #0C1B33; }
.th-sampiyon  { --sq-light: #FFD98A; --sq-dark: #C07A16; }
.th-kirmizi-sari   { --sq-light: #FFD451; --sq-dark: #B7192B; }
.th-lacivert-sari  { --sq-light: #F2D14B; --sq-dark: #071D49; }
.th-siyah-beyaz    { --sq-light: #F7F5EE; --sq-dark: #171717; }
.th-bordo-mavi     { --sq-light: #6CB4E4; --sq-dark: #7A1E35; }
.th-kirmizi-beyaz  { --sq-light: #FFFFFF; --sq-dark: #C8102E; }
.th-wood {
  --sq-light: #DFAA62;
  --sq-dark: #8E4D20;
  --sq-light-texture:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(115,64,23,.12)),
    radial-gradient(circle at 32% 18%, rgba(255,242,188,.28) 0 10%, transparent 18%),
    repeating-linear-gradient(92deg, rgba(93,49,19,.08) 0 4px, rgba(255,234,170,.08) 5px 9px);
  --sq-dark-texture:
    linear-gradient(90deg, rgba(255,203,128,.08), rgba(62,30,10,.28)),
    radial-gradient(circle at 68% 26%, rgba(45,21,8,.18) 0 10%, transparent 20%),
    repeating-linear-gradient(94deg, rgba(45,20,7,.18) 0 5px, rgba(204,121,48,.08) 6px 11px);
  --sq-texture-size: 100% 100%, 58px 42px, 24px 100%;
}
.th-wood-4 {
  --sq-light: #D8BC83;
  --sq-dark: #7F5632;
  --sq-light-texture:
    linear-gradient(90deg, rgba(255,255,255,.20), rgba(99,68,35,.10)),
    repeating-linear-gradient(84deg, rgba(111,79,42,.09) 0 3px, rgba(255,246,202,.10) 4px 8px),
    radial-gradient(ellipse at 44% 24%, rgba(114,80,43,.13) 0 9%, transparent 22%);
  --sq-dark-texture:
    linear-gradient(90deg, rgba(215,160,91,.14), rgba(58,35,18,.22)),
    repeating-linear-gradient(86deg, rgba(39,24,13,.16) 0 4px, rgba(184,124,66,.08) 5px 10px),
    radial-gradient(ellipse at 52% 28%, rgba(38,22,12,.18) 0 11%, transparent 24%);
  --sq-texture-size: 100% 100%, 20px 100%, 64px 46px;
}
.th-blue-marble {
  --sq-light: #ECEBE3;
  --sq-dark: #8FA9BD;
  --sq-light-texture:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(160,143,120,.10)),
    radial-gradient(ellipse at 24% 36%, rgba(127,118,102,.16) 0 10%, transparent 30%),
    repeating-linear-gradient(36deg, transparent 0 16px, rgba(122,113,101,.12) 17px 18px, transparent 19px 34px);
  --sq-dark-texture:
    linear-gradient(135deg, rgba(230,244,255,.18), rgba(47,65,82,.20)),
    radial-gradient(ellipse at 38% 28%, rgba(45,59,75,.20) 0 13%, transparent 30%),
    repeating-linear-gradient(34deg, transparent 0 14px, rgba(48,61,78,.22) 15px 17px, transparent 18px 32px);
  --sq-texture-size: 100% 100%, 76px 58px, 86px 86px;
}

/* olbia/board içindeki tam 8×8 tahta görselleri.
   Takım renkli .th-* sınıflarına dokunmadan ayrı th-board-* ailesinde çalışır. */
.olbia-chessboard[class*="th-board-"],
.board-prev[class*="th-board-"] {
  background-image: var(--board-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.olbia-chessboard[class*="th-board-"] .chess-square.light,
.olbia-chessboard[class*="th-board-"] .chess-square.dark,
.board-prev[class*="th-board-"] span,
.board-prev[class*="th-board-"] span.d {
  background-color: transparent;
  background-image: none;
}
.th-board-blue-marble { --board-image: url('../board/blue-marble.jpg'); }
.th-board-blue { --board-image: url('../board/blue.png'); }
.th-board-blue2 { --board-image: url('../board/blue2.jpg'); }
.th-board-blue3 { --board-image: url('../board/blue3.jpg'); }
.th-board-brown { --board-image: url('../board/brown.png'); }
.th-board-canvas2 { --board-image: url('../board/canvas2.jpg'); }
.th-board-green-plastic { --board-image: url('../board/green-plastic.png'); }
.th-board-green { --board-image: url('../board/green.png'); }
.th-board-grey { --board-image: url('../board/grey.jpg'); }
.th-board-horsey { --board-image: url('../board/horsey.jpg'); }
.th-board-ic { --board-image: url('../board/ic.png'); }
.th-board-leather { --board-image: url('../board/leather.jpg'); }
.th-board-maple { --board-image: url('../board/maple.jpg'); }
.th-board-maple2 { --board-image: url('../board/maple2.jpg'); }
.th-board-marble { --board-image: url('../board/marble.jpg'); }
.th-board-metal { --board-image: url('../board/metal.jpg'); }
.th-board-ncf-board { --board-image: url('../board/ncf-board.png'); }
.th-board-olive { --board-image: url('../board/olive.jpg'); }
.th-board-pink-pyramid { --board-image: url('../board/pink-pyramid.png'); }
.th-board-purple-diag { --board-image: url('../board/purple-diag.png'); }
.th-board-purple { --board-image: url('../board/purple.png'); }
.th-board-wood { --board-image: url('../board/wood.jpg'); }
.th-board-wood2 { --board-image: url('../board/wood2.jpg'); }
.th-board-wood3 { --board-image: url('../board/wood3.jpg'); }
.th-board-wood4 { --board-image: url('../board/wood4.jpg'); }
.th-board-newspaper { --board-image: url('../board/svg/newspaper.svg'); }

/* İsim kartı önizleme ve liderlik görünümü */
.name-card-prev {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 1;
  margin: 0 auto 12px;
  padding: 12px 22% 10px;
  border-radius: 18px;
  border: 1px solid rgba(218, 178, 107, .45);
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: #0F4F35;
  background:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(135deg, #fffdf8 0%, #f7f0e4 55%, #fffaf0 100%);
  box-shadow: 0 16px 30px rgba(22, 32, 20, .16);
}
.name-card-prev::before,
.name-card-prev::after,
.leader-name-card::before,
.leader-name-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.name-card-prev::before {
  inset: 9px;
  border: 1px solid rgba(206, 145, 48, .46);
  border-radius: inherit;
  z-index: -1;
}
.name-card-prev::after {
  width: 76px;
  height: 76px;
  right: -20px;
  bottom: -28px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.84) 0 36%, transparent 37%),
    linear-gradient(145deg, rgba(11,90,58,.9), rgba(6,47,35,.96));
  box-shadow: -18px -4px 0 rgba(7, 87, 56, .18);
  z-index: -1;
}
.name-card-prev.name-card-image,
.leader-name-card.name-card-image,
.name-card-mini-preview {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    var(--name-card-image);
  background-size: cover;
  background-position: center;
}
.name-card-prev.name-card-image::before,
.name-card-prev.name-card-image::after,
.leader-name-card.name-card-image::before,
.leader-name-card.name-card-image::after {
  display: none;
}
.name-card-prev.name-card-image .ncp-name,
.name-card-prev.name-card-image .ncp-op,
.leader-name-card.name-card-image .lnc-name,
.leader-name-card.name-card-image .lnc-meta {
  text-shadow: 0 1px 2px rgba(255,255,255,.82), 0 0 10px rgba(255,255,255,.55);
}
.name-card-prev span { display: block; }
.name-card-mini-preview span { display: block; }
.ncp-rank {
  width: 26px;
  height: 26px;
  display: grid !important;
  place-items: center;
  margin: 0 auto 2px;
  border-radius: 999px;
  color: #A86A1C;
  background: linear-gradient(180deg, #FFF2C8, #C88A2B);
  box-shadow: 0 5px 10px rgba(95, 54, 11, .18);
  font-size: 14px;
  font-weight: 900;
}
.ncp-op {
  color: #C97125;
  font-size: 11px;
  font-weight: 800;
  opacity: .9;
}
.ncp-name {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.ncp-name.is-long { font-size: 16px; }
.ncp-name.is-very-long { font-size: 14px; }

/* Panel vitrini: yatay isim kartını kare ürünlerle aynı dar sütuna sıkıştırma. */
body[data-sayfa="panelim"] #kusanilmis {
  grid-auto-flow: dense;
}
body[data-sayfa="panelim"] #kusanilmis .item-card--isim-karti {
  grid-column: span 2;
}
body[data-sayfa="panelim"] #kusanilmis .item-card--isim-karti .name-card-prev {
  width: min(100%, 720px);
  margin-inline: auto;
  padding: 10px 22% 9px;
}
body[data-sayfa="panelim"] #kusanilmis .item-card--isim-karti .ncp-name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-sayfa="panelim"] #kusanilmis .item-card--isim-karti .name-card-image > img {
  object-fit: contain !important;
}
.leader-name-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  gap: 2px;
  width: min(100%, 480px);
  max-width: 100%;
  min-width: 210px;
  min-height: 0;
  aspect-ratio: 3 / 1;
  padding: 8px 22% 7px;
  border-radius: 14px;
  line-height: 1.25;
  color: #0F4F35;
  background:
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(135deg, #fffdf8, #f6efe2);
  border: 1px solid rgba(202, 156, 82, .42);
  box-shadow: 0 10px 20px rgba(22, 32, 20, .12);
  justify-items: center;
  align-content: center;
  text-align: center;
}
.leader-name-card .lnc-name {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: 15px;
  max-width: 100%;
  white-space: nowrap;
}
.leader-name-card .lnc-name.is-long { font-size: 13px; }
.leader-name-card .lnc-name.is-very-long { font-size: 11.5px; }
.leader-name-card .lnc-meta {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 11px;
  opacity: .72;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl .leader-name-card {
  width: 480px;
  max-width: none;
  min-width: 480px;
}
.pod .leader-name-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.leader-name-card::before {
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(202, 156, 82, .28);
  z-index: -1;
}
.leader-name-card::after {
  width: 48px;
  height: 48px;
  right: -14px;
  bottom: -20px;
  border-radius: 50%;
  background: rgba(14, 92, 60, .18);
  z-index: -1;
}

.name-card-crop-modal {
  width: min(980px, calc(100vw - 28px));
}
.name-card-crop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: 22px;
  align-items: start;
}
.name-card-crop-stage {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #f5ecdc;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.name-card-crop-stage canvas {
  width: 100%;
  display: block;
  cursor: grab;
}
.name-card-crop-stage canvas:active { cursor: grabbing; }
.name-card-crop-frame {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events: none;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 999px rgba(20,18,14,.16), inset 0 0 0 1px rgba(20,18,14,.15);
}
.name-card-mini-preview {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 1;
  padding: 10px 22%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  text-align: center;
  color: #0F4F35;
  border: 1px solid rgba(218,178,107,.45);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 820px) {
  .name-card-crop-layout { grid-template-columns: 1fr; }
}

.name-basic {
  background:
    radial-gradient(circle at 88% 34%, rgba(255,255,255,.95) 0 21%, transparent 22%),
    linear-gradient(120deg, #0C3C2C 0 24%, #FBF8F0 24% 73%, #0C3C2C 73% 100%);
  color: #0D4F34;
  border-color: rgba(206, 145, 48, .34);
}
.name-basic::after {
  background:
    linear-gradient(145deg, transparent 0 42%, rgba(216, 137, 42, .72) 43% 47%, transparent 48%),
    radial-gradient(circle, rgba(255,255,255,.92) 0 36%, transparent 37%),
    linear-gradient(145deg, rgba(13,76,52,.92), rgba(8,47,36,.98));
}

.name-forest {
  color: #0B4B31;
  background:
    linear-gradient(160deg, #0D4B35 0 16%, transparent 16% 84%, #0D4B35 84%),
    radial-gradient(circle at 50% -8%, rgba(255,255,255,.9), transparent 38%),
    linear-gradient(180deg, #fffdfa 0%, #f7efe2 100%);
  border-color: rgba(204, 148, 48, .56);
  border-radius: 20px 20px 28px 28px;
}
.name-forest::before {
  inset: 8px 14px;
  border-radius: 16px 16px 26px 26px;
  border-color: rgba(181, 123, 36, .52);
}
.name-forest::after {
  left: 50%;
  right: auto;
  bottom: -24px;
  width: 108px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(7,67,47,.94), rgba(11,95,62,.86));
  box-shadow:
    -120px -12px 0 16px rgba(7,70,48,.92),
    120px -12px 0 16px rgba(7,70,48,.92);
}

.name-gold {
  color: #092F25;
  background:
    linear-gradient(120deg, rgba(8,89,62,.88) 0 22%, transparent 22%),
    linear-gradient(300deg, rgba(236,117,22,.9) 0 2%, transparent 13%),
    rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.78);
  box-shadow:
    0 18px 34px rgba(21, 104, 72, .24),
    0 0 22px rgba(18, 204, 130, .32),
    inset 0 0 20px rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
}
.name-gold::before {
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.68);
  background:
    radial-gradient(circle at 85% 26%, rgba(255,255,255,.85) 0 9%, transparent 10%),
    linear-gradient(90deg, rgba(12,185,116,.28), transparent 48%, rgba(232,111,24,.26));
  z-index: -1;
}
.name-gold::after {
  right: 10px;
  bottom: 16px;
  width: 54px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0A4C37, #F07A1D);
  box-shadow: none;
}

.name-master {
  color: #FFF7D8;
  background:
    linear-gradient(135deg, transparent 0 12%, #123F2F 12% 88%, transparent 88%),
    linear-gradient(180deg, #0C3529, #08281F);
  border-color: #D58A25;
  border-radius: 22px;
  box-shadow: 0 18px 30px rgba(7, 23, 17, .34);
}
.name-master .ncp-name,
.name-master .lnc-name {
  color: #FFF8DC;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.name-master .ncp-op,
.name-master .lnc-meta { color: #F1C47A; opacity: .95; }
.name-master::before {
  inset: 8px 12px;
  border-radius: 16px;
  border-color: #D58A25;
  border-style: dashed;
}
.name-master::after {
  left: 50%;
  right: auto;
  top: -1px;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background:
    linear-gradient(180deg, #174B37, #0C2F23);
  border: 2px solid #D58A25;
  box-shadow:
    -32px 4px 0 -12px #EF7F1A,
    32px 4px 0 -12px #EF7F1A;
}

.shop-rozet-section { margin-top: 34px; }
.shop-rozet-grup { margin-top: 18px; }
.shop-rozet-baslik {
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--text);
}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700;
  background: var(--olbia-green); color: #fff;
  transition: .18s; white-space: nowrap;
}
.btn:hover { background: var(--olbia-green-dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-orange { background: var(--olbia-orange); }
.btn-orange:hover { background: var(--olbia-orange-dark); }
.btn-ghost { background: transparent; color: var(--olbia-green); border: 2px solid var(--border-strong); }
.btn-ghost:hover { background: var(--olbia-green-soft); border-color: var(--olbia-green); }
.btn-danger { background: #C0392B; }
.btn-danger:hover { background: #99291D; }
.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.seg { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 17px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  transition: .18s;
}
.seg button.active { background: var(--olbia-green); color: #fff; box-shadow: var(--shadow-sm); }
.seg-badge {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--olbia-orange); color: #fff;
  font-size: 12px; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 16px rgba(232,124,42,.22);
}
.seg button.active .seg-badge {
  background: #fff; color: var(--olbia-green);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* ==========================================================================
   FORM
   ========================================================================== */
.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: 14px;
  transition: .18s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0; border-color: var(--olbia-orange); box-shadow: var(--ring);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }

/* ==========================================================================
   TABLO
   ========================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.level-plan-table { max-height: min(72vh, 820px); overflow: auto; }
.level-plan-table table.tbl thead th { position: sticky; top: 0; z-index: 2; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 660px; }
table.tbl thead th {
  background: var(--olbia-green); color: #fff;
  text-align: left; padding: 13px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  white-space: nowrap;
}
table.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--olbia-green-soft); }
table.tbl .num { font-weight: 800; color: var(--olbia-orange); white-space: nowrap; }

.who { display: flex; align-items: center; gap: 11px; }
.who .ava {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(140deg, var(--olbia-green-light), var(--olbia-green-dark));
  color: #fff; border: 2px solid var(--olbia-orange);
  overflow: hidden;
}
.who .ava .asset-sprite { width: 34px; }
.who .nm { font-weight: 700; line-height: 1.2; }
.who .sub { font-size: 11.5px; color: var(--text-soft); }

/* Yönetimde öğrenci satırı çok sayıda işlem içeriyor. Sütunları kontrollü
   dağıtıp düğmeleri iki satıra sararak tablonun panel dışına taşmasını önle. */
.ogrenci-yonetim-table {
  min-width: 1020px;
  table-layout: fixed;
}
.ogrenci-yonetim-table th:nth-child(1) { width: 18%; }
.ogrenci-yonetim-table th:nth-child(2) { width: 10%; }
.ogrenci-yonetim-table th:nth-child(3) { width: 10%; }
.ogrenci-yonetim-table th:nth-child(4) { width: 14%; }
.ogrenci-yonetim-table th:nth-child(5) { width: 10%; }
.ogrenci-yonetim-table th:nth-child(6) { width: 13%; }
.ogrenci-yonetim-table th:nth-child(7) { width: 25%; }
.ogrenci-yonetim-table .who { align-items: flex-start; }
.ogrenci-yonetim-table .who > div:last-child { min-width: 0; }
.ogrenci-yonetim-table .who .sub { overflow-wrap: anywhere; }
.ogrenci-tablo-islem-hucresi { padding: 10px 12px !important; }
.ogrenci-tablo-islemler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ogrenci-tablo-islemler .btn {
  min-height: 34px;
  padding: 7px 11px;
  flex: 0 0 auto;
}

.tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: var(--olbia-green-soft); color: var(--olbia-green);
}
.tag.orange { background: var(--olbia-orange-soft); color: var(--olbia-orange-dark); }
.tag.grey { background: var(--surface-alt); color: var(--text-muted); }

/* ==========================================================================
   LİDERLİK PODYUMU
   ========================================================================== */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; margin-bottom: 26px; }
.leader-global-top {
  margin-bottom: 30px;
  padding: 18px 18px 2px;
  border: 1px solid #e5c671;
  border-left: 5px solid var(--gold);
  border-radius: var(--r-md);
  background: #fffaf0;
}
.leader-global-top .section-title { margin-bottom: 6px; }
.leader-global-top > .hint { margin-bottom: 18px; }
.pod {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 14px 18px;
  text-align: center; box-shadow: var(--shadow-sm); position: relative;
}
.pod .medal { font-size: 34px; margin-bottom: 6px; }
.pod .p-ava {
  width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; font-size: 34px;
  background: linear-gradient(150deg, var(--olbia-green-light), var(--olbia-green-dark));
  color: #fff; border: 4px solid var(--gold); position: relative;
}
.pod .p-ava > div,
.who .ava > div { position: relative; }
.leader-accessory.custom-accessory {
  position: absolute;
  z-index: 4;
  left: -9px;
  top: -12px;
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(20, 18, 14, .24));
}
.who .leader-accessory.custom-accessory {
  left: 1px;
  top: 0;
  width: 25px;
  height: 25px;
}

/* Yönetim: avatar aksesuarları ve profil çerçeveleri */
.shop-asset-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.shop-asset-admin-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.shop-asset-preview {
  min-height: 146px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background-color: #f8f8f5;
  background-image: linear-gradient(45deg, #ecebe5 25%, transparent 25%),
    linear-gradient(-45deg, #ecebe5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ecebe5 75%),
    linear-gradient(-45deg, transparent 75%, #ecebe5 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.shop-asset-preview .item-art,
.shop-asset-preview .frame-prev { margin-bottom: 0; }
.shop-asset-fields { min-width: 0; display: grid; gap: 12px; }
.shop-asset-upload { width: 100%; justify-content: center; }
.shop-asset-crop-stage {
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  touch-action: none;
  background-color: #fff;
  background-image: linear-gradient(45deg, #e8e7e1 25%, transparent 25%),
    linear-gradient(-45deg, #e8e7e1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e7e1 75%),
    linear-gradient(-45deg, transparent 75%, #e8e7e1 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.shop-asset-crop-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.shop-asset-crop-stage canvas:active { cursor: grabbing; }
.shop-asset-safe-zone { position: absolute; inset: 5%; pointer-events: none; border: 2px dashed rgba(27,107,58,.75); }
.shop-asset-safe-zone.is-frame { border-radius: 50%; box-shadow: inset 0 0 0 34px rgba(255,255,255,.12); }
.shop-asset-safe-zone.is-accessory { border-radius: 14px; }
.shop-asset-live-preview {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.shop-asset-live-preview .item-art,
.shop-asset-live-preview .frame-prev { margin-bottom: 0; }
@media (max-width: 720px) {
  .shop-asset-admin-grid { grid-template-columns: 1fr; }
  .shop-asset-admin-card { grid-template-columns: 92px minmax(0, 1fr); padding: 12px; }
  .shop-asset-preview { min-height: 112px; }
}
.pod .p-name { font-weight: 800; font-size: 15px; }
.pod .p-op { color: var(--olbia-orange); font-weight: 800; font-size: 18px; margin-top: 4px; }
.pod .p-bar { height: 10px; border-radius: 999px; margin-top: 14px; background: var(--gold); }
.pod.r1 { transform: translateY(-16px); border: 2px solid var(--gold); }
.pod.r2 .p-ava { border-color: var(--silver); }
.pod.r2 .p-bar { background: var(--silver); }
.pod.r3 .p-ava { border-color: var(--bronze); }
.pod.r3 .p-bar { background: var(--bronze); }

.rank-badge {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 14px;
  background: var(--surface-alt); color: var(--text-muted);
}
.rank-badge.g1 { background: var(--gold); color: #fff; }
.rank-badge.g2 { background: var(--silver); color: #fff; }
.rank-badge.g3 { background: var(--bronze); color: #fff; }

/* ==========================================================================
   ALT ŞERİT
   ========================================================================== */
.footer-strip {
  margin-top: 40px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 15px 28px;
  font-weight: 700; font-size: 15px; color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.footer-strip b { color: var(--olbia-orange); }

/* ==========================================================================
   BİLDİRİM (TOAST)
   ========================================================================== */
.toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 10px; }
.toast {
  background: var(--olbia-green); color: #fff;
  padding: 13px 20px; border-radius: var(--r-md);
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .3s ease;
}
.toast.err { background: #C0392B; }
.toast.warn { background: var(--olbia-orange-dark); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-bg {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20,30,18,.5); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
}
.modal-bg[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  width: min(480px, 100%); padding: 26px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
}
.modal h3 { font-size: 19px; font-weight: 800; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.veli-cocuk-secim-bg { z-index: 260; }
.veli-cocuk-secim-modal { width: min(620px, 100%); border-radius: 8px; }
.veli-cocuk-secim-modal > p { margin-top: -8px; margin-bottom: 18px; }
.veli-cocuk-secim-listesi { display: grid; gap: 10px; }
.veli-cocuk-secim-karti {
  width: 100%; min-height: 76px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 13px; text-align: left;
}
.veli-cocuk-secim-karti:hover,
.veli-cocuk-secim-karti:focus-visible { border-color: var(--olbia-green); background: var(--surface-alt); }
.veli-cocuk-secim-karti b,
.veli-cocuk-secim-karti small { display: block; }
.veli-cocuk-secim-karti small { color: var(--text-muted); margin-top: 3px; }
.odev-modal { width: min(660px, 100%) !important; }
.lichess-gorev-modal .hint {
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.lichess-gorev-modal #ofLHedef { max-width: none !important; }
.lichess-gorev-modal .coklu-liste { max-height: 180px; }
.lichess-gorev-modal .modal-actions {
  position: sticky;
  bottom: -26px;
  margin: 18px -26px -26px;
  padding: 14px 26px 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,.86), var(--surface) 42%);
  border-top: 1px solid rgba(232,226,214,.72);
  z-index: 2;
}

/* ==========================================================================
   ÇEŞİTLİ
   ========================================================================== */
.empty { text-align: center; padding: 44px 20px; color: var(--text-soft); }
.empty.compact { padding: 18px 10px; font-size: 13px; }
.empty .e-ico { font-size: 42px; margin-bottom: 10px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.flex { display: flex; align-items: center; gap: 12px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   DUYARLI (RESPONSIVE)
   ========================================================================== */
@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .admin-content { padding: 18px; }
  .grid-sidebar { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    max-height: none;
    padding: 10px;
    border-radius: var(--r-md);
    overflow: hidden;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }
  .admin-sidebar-head { display: none; }
  .admin-menu {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .admin-menu button,
  .admin-menu a {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .admin-menu-groups {
    width: 100%;
  }
  .admin-menu-group {
    width: 100%;
    min-width: 0;
  }
  .admin-menu-group > .admin-menu {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    overflow: visible;
    padding: 0 6px 8px;
  }
  .admin-menu-group > .admin-menu button,
  .admin-menu-group > .admin-menu a {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .admin-page-links,
  .admin-panel-links {
    margin-top: 8px;
  }
}
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  .page { padding: 20px 14px 48px; }
  .modal-bg {
    place-items: start center;
    padding: 10px;
  }
  .modal {
    width: 100% !important;
    max-height: calc(100dvh - 20px);
    padding: 18px;
    border-radius: 18px;
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-actions .btn {
    min-height: 42px;
  }
  .odev-modal .form-row {
    grid-template-columns: 1fr;
  }
  .odev-modal .coklu-ust {
    flex-wrap: wrap;
  }
  .odev-modal .coklu-ust .btn {
    width: 100%;
  }
  .lichess-gorev-modal .coklu-liste {
    max-height: 140px;
  }
  .lichess-gorev-modal .modal-actions {
    bottom: -18px;
    margin: 16px -18px -18px;
    padding: 12px 18px 16px;
  }
  .rating-modal-grid {
    grid-template-columns: 1fr;
  }
  .rating-history-row {
    grid-template-columns: auto 1fr;
  }
  .rating-history-row small {
    grid-column: 1 / -1;
  }
  .lichess-kopar-row {
    align-items: stretch;
    flex-direction: column;
  }
  .lichess-kopar-actions {
    justify-content: stretch;
  }
  .lichess-kopar-actions .btn {
    flex: 1;
  }
  .op-talep-row {
    grid-template-columns: 1fr;
  }
  .op-talep-actions {
    justify-content: stretch;
  }
  .op-talep-actions .btn {
    flex: 1;
  }
  .op-rule-editor {
    grid-template-columns: 1fr;
  }
  .op-rule-row {
    grid-template-columns: 1fr;
  }
  .avatar-choice-grid.profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .avatar-choice-grid.icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .avatar-choice {
    min-height: 104px;
  }
  .admin-page { padding-inline: 12px; }
  .admin-shell { gap: 14px; }
  .admin-content { padding: 0; }
  .admin-page,
  .admin-shell,
  .admin-content,
  .panel-status-stack,
  .card,
  .list-card,
  .note,
  .stat {
    max-width: 100%;
    min-width: 0;
  }
  body[data-sayfa="panelim"] .grid-sidebar { grid-template-columns: 1fr; }
  .admin-module > .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .profil-avatar-grid { grid-template-columns: 1fr; }
  .profil-avatar-step {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 52px;
  }
  .profil-avatar-fields { width: 100%; }
  .profil-avatar-actions { flex-direction: column; align-items: stretch; }
  .topbar-inner { padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
  .nav { width: 100%; order: 3; justify-content: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  body[data-sayfa="panelim"] #kusanilmis .item-card--isim-karti {
    grid-column: 1 / -1;
  }
  .page-title { font-size: 24px; }
  .page-desc { font-size: 14px; }
  .panel-status-stack { gap: 12px; margin-bottom: 18px; }
  .admin-home-btn {
    min-height: 38px;
    margin-bottom: 8px;
    font-size: 13.5px;
  }
  .admin-menu button,
  .admin-menu a {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
  }
  .admin-menu button span,
  .admin-menu a span {
    width: 20px;
    font-size: 14px;
  }
  body[data-sayfa="panelim"] .card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  body[data-sayfa="panelim"] .card-head .btn {
    width: 100%;
  }
  body[data-sayfa="panelim"] .card,
  body[data-sayfa="panelim"] .profile-card {
    padding: 16px;
    border-radius: var(--r-md);
  }
  body[data-sayfa="panelim"] .flex,
  body[data-sayfa="panelim"] .flex-between {
    min-width: 0;
    flex-wrap: wrap;
  }
  body[data-sayfa="panelim"] #lichess > .flex-between > .flex:last-child {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body[data-sayfa="panelim"] #lichess .btn {
    width: 100%;
    white-space: normal;
    min-height: 38px;
    text-align: center;
  }
  body[data-sayfa="panelim"] #lichess .grid-4,
  body[data-sayfa="panelim"] #seviyeler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-sayfa="panelim"] .stat {
    padding: 14px;
  }
  body[data-sayfa="panelim"] .stat .s-val {
    font-size: 21px;
  }
  .podium { grid-template-columns: 1fr; }
  .pod.r1 { transform: none; }
  .op-box-value { font-size: 28px; }
  .lichess-game-row { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 8px; }
  .lichess-result { font-size: 10px; padding-inline: 6px; }
}

@media (max-width: 520px) {
  body[data-sayfa="panelim"] #lichess .grid-4,
  body[data-sayfa="panelim"] #seviyeler,
  body[data-sayfa="panelim"] .rozet-izgara {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body[data-sayfa="panelim"] .item-card,
  body[data-sayfa="panelim"] .rozet-kutu {
    min-width: 0;
    padding: 12px 8px;
  }
  body[data-sayfa="panelim"] .lichess-game-row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }
  body[data-sayfa="panelim"] .lichess-result {
    justify-self: start;
  }
  body[data-sayfa="panelim"] .lichess-rating {
    justify-self: start;
  }
  body[data-sayfa="panelim"] .lichess-activity-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  body[data-sayfa="panelim"] .lichess-activity-head {
    display: none;
  }
  body[data-sayfa="panelim"] .lichess-activity-row {
    min-width: 0;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
  }
  body[data-sayfa="panelim"] .lichess-activity-row > span::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  body[data-sayfa="panelim"] .lichess-activity-row > span:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  body[data-sayfa="panelim"] #lichess .grid-4,
  body[data-sayfa="panelim"] #seviyeler,
  body[data-sayfa="panelim"] .rozet-izgara {
    grid-template-columns: 1fr;
  }
  .user-chip .u-ad,
  .user-chip .u-rol {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ==========================================================================
   KULLANICI MENÜSÜ (üst bar)
   ========================================================================== */
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: .18s; flex: none;
}
.user-chip:hover { border-color: var(--olbia-orange); box-shadow: var(--shadow-sm); }
.user-chip .u-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--olbia-green-light), var(--olbia-green-dark));
  color: #fff; display: grid; place-items: center; font-size: 16px;
}
.user-chip .u-ad { font-size: 13.5px; font-weight: 700; line-height: 1.15; }
.user-chip .u-rol { font-size: 11px; color: var(--text-soft); }
.user-menu {
  position: absolute; right: 24px; top: 68px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  min-width: 215px; padding: 8px; display: grid; gap: 2px;
}
.user-menu[hidden] { display: none; }
.user-menu a, .user-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--r-sm);
  border: 0; background: transparent; width: 100%;
  text-align: left; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text); transition: .15s;
}
.user-menu a:hover, .user-menu button:hover { background: var(--olbia-green-soft); color: var(--olbia-green); }
.user-menu .cikis:hover { background: #FBE9E7; color: #C0392B; }
.user-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu .mini { font-size: 11.5px; color: var(--text-soft); padding: 4px 13px 8px; }

/* Veli / salt-okunur uyarı şeridi */
.readonly-bar {
  background: var(--olbia-orange-soft); border: 1px solid var(--olbia-orange);
  color: #6B4310; border-radius: var(--r-md);
  padding: 12px 18px; margin-bottom: 20px;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}

/* ==========================================================================
   GİRİŞ / KAYIT SAYFALARI
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

/* Sol tanıtım paneli */
.auth-side {
  background: linear-gradient(150deg, var(--olbia-green-dark), var(--olbia-green) 55%, #0F3D21);
  color: #fff; padding: 48px 52px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-side::before {
  content: ""; position: absolute; right: -140px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--olbia-orange); opacity: .22;
}
.auth-side::after {
  content: "♞"; position: absolute; right: -30px; bottom: -70px;
  font-size: 300px; opacity: .07; line-height: 1;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.auth-brand .mark {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3);
  display: grid; place-items: center; font-size: 28px;
}
.auth-brand .txt { font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.auth-brand .txt span { color: var(--olbia-orange-light); }
.auth-brand .sub { font-size: 11.5px; opacity: .7; letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }

.auth-headline { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.8px; margin-bottom: 14px; }
.auth-headline em { color: var(--olbia-orange-light); font-style: normal; }
.auth-lead { font-size: 15.5px; opacity: .85; max-width: 440px; margin-bottom: 34px; }

.auth-feats { display: grid; gap: 14px; max-width: 430px; }
.auth-feat { display: flex; gap: 13px; align-items: flex-start; }
.auth-feat .fi {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: rgba(255,255,255,.13); display: grid; place-items: center; font-size: 17px;
}
.auth-feat b { display: block; font-size: 14.5px; margin-bottom: 1px; }
.auth-feat span { opacity: .78; font-size: 13px; line-height: 1.45; }

/* Sağ form paneli */
.auth-main {
  display: grid; place-items: center;
  padding: 40px 32px; background: var(--bg);
  position: relative; z-index: 1;
}
.auth-box { width: 100%; max-width: 430px; }
.auth-box.wide { max-width: 580px; }
.auth-title { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.auth-desc { color: var(--text-muted); font-size: 14.5px; margin: 6px 0 26px; }
.auth-form { display: grid; gap: 15px; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--text-muted); }
.auth-alt a { color: var(--olbia-green); font-weight: 800; }
.auth-alt a:hover { color: var(--olbia-orange); }

.auth-mobile-brand { display: none; }

/* Rol seçici */
.role-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.role-pick label {
  border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 14px 8px; text-align: center; cursor: pointer;
  transition: .18s; background: var(--surface);
  display: grid; gap: 4px; justify-items: center;
}
.role-pick label:hover { border-color: var(--border-strong); }
.role-pick .ri { font-size: 24px; }
.role-pick .rt { font-size: 13px; font-weight: 700; }
.role-pick .rd { font-size: 11px; color: var(--text-soft); }
.role-pick input:checked + label {
  border-color: var(--olbia-orange);
  background: var(--olbia-orange-soft);
  box-shadow: var(--ring);
}

/* Şifre alanı */
.pw-field { position: relative; }
.pw-field .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; bottom: 4px;
  width: 36px; height: 36px; border: 0; background: transparent;
  cursor: pointer; font-size: 16px; border-radius: 50%; color: var(--text-soft);
}
.pw-toggle:hover { background: var(--surface-alt); }
.pw-meter { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 7px; }
.pw-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: .3s; }
.pw-hint { font-size: 12px; color: var(--text-soft); margin-top: 5px; }

/* Adım göstergesi */
.steps { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.step { flex: 1; display: grid; gap: 7px; }
.step .sb { height: 5px; border-radius: 999px; background: var(--border); transition: .3s; }
.step .sl { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.step.on .sb { background: var(--olbia-orange); }
.step.on .sl { color: var(--olbia-orange-dark); }
.step.done .sb { background: var(--olbia-green); }
.step.done .sl { color: var(--olbia-green); }
.step-panel[hidden] { display: none; }

/* Sonuç / onay bekleme ekranı */
.auth-result { text-align: center; padding: 10px 0; }
.auth-result .ri {
  width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 42px;
  background: var(--olbia-orange-soft); border: 3px solid var(--olbia-orange);
}
.auth-result.ok .ri { background: var(--olbia-green-soft); border-color: var(--olbia-green); }
.auth-result h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.auth-result p { color: var(--text-muted); font-size: 15px; margin-bottom: 24px; }

/* Demo hesap kutusu */
.demo-box {
  margin-top: 24px; padding: 16px 18px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-alt);
}
.demo-box .dt { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.demo-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: .15s; font-size: 13px; border: 0;
  background: transparent; width: 100%; text-align: left;
}
.demo-row:hover { background: var(--surface); }
.demo-row .dr-ico { font-size: 17px; }
.demo-row .dr-ad { font-weight: 700; }
.demo-row .dr-mail { color: var(--text-soft); font-size: 12px; }
.demo-row .dr-btn { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--olbia-orange); }

.auth-note { margin-top: 20px; font-size: 12px; color: var(--text-soft); text-align: center; line-height: 1.55; }

/* Form hata / bilgi mesajı */
.form-err {
  background: #FBE9E7; border: 1px solid #F0B7AE; color: #A5291B;
  padding: 11px 15px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600;
}
.form-err[hidden] { display: none; }
.form-ok {
  background: var(--olbia-green-soft); border: 1px solid var(--olbia-green-light);
  color: var(--olbia-green-dark);
  padding: 11px 15px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600;
}
.form-ok[hidden] { display: none; }

/* Onay bekleyen başvuru kartı */
.basvuru {
  border: 1px solid var(--border); border-left: 4px solid var(--olbia-orange);
  border-radius: var(--r-md); padding: 16px 18px;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.basvuru .b-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.basvuru .b-ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--olbia-green-light), var(--olbia-green-dark));
  color: #fff; display: grid; place-items: center; font-size: 19px;
}
.basvuru .b-ad { font-weight: 800; font-size: 15px; }
.basvuru .b-mail { font-size: 12.5px; color: var(--text-soft); }
.basvuru .b-detay {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 14px; margin-bottom: 14px;
  font-size: 12.5px;
}
.basvuru .b-detay div { color: var(--text-muted); }
.basvuru .b-detay b { display: block; color: var(--text); font-weight: 700; }
.basvuru .b-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* Üyelik listesi: aile bağı, veli ve öğrenci rolleri ilk bakışta ayrışır. */
.uyelik-arama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.uyelik-arama .input {
  min-height: 48px;
  padding-left: 16px;
  background: var(--surface);
}
.uyelik-arama > span {
  min-width: 92px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.uye-aile-grubu {
  margin: 4px 0 24px;
  padding: 10px;
  border: 1px solid #bfd5ee;
  border-left: 6px solid #2f6eb5;
  border-radius: 8px;
  background: #edf5fd;
}
.uye-aile-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #c9dcf0;
  background: transparent;
  color: #204f84;
}
.uye-aile-baslik span { font-size: 14px; }
.uye-aile-baslik small { color: #557493; font-weight: 800; }
.uye-aile-uyeleri {
  display: grid;
  gap: 8px;
}
.uye-karti {
  box-shadow: 0 4px 12px rgba(24,49,31,.06);
}
.uye-karti--veli {
  border-left-color: #2f6eb5 !important;
  border-color: #9fc1e5;
  background: #dcecff;
}
.uye-karti--veli .b-ava {
  background: #2f6eb5;
  border: 3px solid #d9e9fb;
}
.uye-karti--ogrenci {
  border-left-color: #e97918 !important;
  margin-left: 24px;
  background: #fffaf4;
}
.uye-karti--ogrenci .b-ava {
  background: #e97918;
  border: 3px solid #ffdfbe;
}
.uye-karti--egitmen { border-left-color: #7358a5 !important; }
.uye-karti.is-beklemede { border-left-color: #d49a18 !important; }
.uye-bolum-baslik {
  margin: 22px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.uye-bolum-veli { color: #2f6eb5; border-bottom-color: #bfd5ee; }
.uye-bolum-ogrenci { color: #b85b0b; border-bottom-color: #f1c89f; }

@media (max-width: 640px) {
  .uyelik-arama { grid-template-columns: 1fr; gap: 6px; }
  .uyelik-arama > span { min-width: 0; text-align: left; }
  .uye-aile-baslik { align-items: flex-start; flex-direction: column; gap: 3px; }
  .uye-karti--ogrenci { margin-left: 10px; }
  .uye-karti .b-head { align-items: flex-start; flex-wrap: wrap; }
  .uye-karti .b-head .tag { margin-left: 54px; }
  .uye-karti .b-detay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .lichess-board-shell { grid-template-columns: 1fr; }
  .lichess-side-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .olbia-chessboard { min-width: 0; width: 100%; }
  .lichess-board-panel { position: static; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main { align-items: start; padding-top: 44px; }
  .auth-mobile-brand {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; margin-bottom: 28px;
  }
  .auth-mobile-brand .mark {
    width: 48px; height: 48px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--olbia-green), var(--olbia-green-light) 55%, var(--olbia-orange));
    color: #fff; display: grid; place-items: center; font-size: 24px;
  }
  .auth-mobile-brand .txt { font-size: 21px; font-weight: 800; }
  .auth-mobile-brand .txt .g { color: var(--olbia-green); }
  .auth-mobile-brand .txt .o { color: var(--olbia-orange); }
}
@media (max-width: 560px) {
  .user-menu { right: 14px; }
  .lichess-board-top { padding-inline: 0; }
  .lichess-clock { min-width: 72px; padding-inline: 8px; }
  .chess-square small { display: none; }
  .piece { font-size: clamp(26px, 10vw, 42px); }
  .lichess-live { align-items: flex-start; flex-direction: column; }
  .lichess-live-actions { width: 100%; }
  .lichess-seek-actions { grid-template-columns: 1fr 1fr; }
  .seek-custom { grid-template-columns: 1fr; }
  .lichess-board-stage { padding: 0; }
  .lichess-board-shell { padding: 10px; gap: 10px; }
  .lichess-side-rail { grid-template-columns: 1fr; }
  .olbia-chessboard { border-width: 0; }
  .lichess-puzzle-tools,
  .lichess-puzzle-meta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LOGO (olbia/img/logo.png — 800×267, şeffaf zemin)
   ========================================================================== */

/* Üst bar logosu */
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-logo {
  height: 44px; width: auto; display: block;
  transition: .18s;
}
.brand:hover .brand-logo { opacity: .85; }

/* Giriş/kayıt sol panelinde (koyu yeşil zemin) beyaz kart içinde */
.auth-logo-box {
  display: inline-block; align-self: flex-start;
  background: #fff; border-radius: 18px;
  padding: 16px 24px; margin-bottom: 38px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.auth-logo { height: 62px; width: auto; display: block; }

/* Mobil / açık zeminde logo */
.auth-mobile-logo { height: 54px; width: auto; margin: 0 auto 28px; display: none; }

/* Alt şeritteki küçük logo */
.footer-logo { height: 26px; width: auto; vertical-align: middle; margin: 0 4px; display: inline-block; }

/* Yükleniyorsa boşluk zıplamasın */
.brand-logo, .auth-logo, .auth-mobile-logo { aspect-ratio: 3 / 1; object-fit: contain; }

@media (max-width: 980px) {
  .auth-mobile-logo { display: block; }
}
@media (max-width: 720px) {
  .brand-logo { height: 36px; }
}
@media (max-width: 420px) {
  .brand-logo { height: 32px; }
  .auth-mobile-logo { height: 46px; }
  .topbar-inner {
    justify-content: flex-start;
  }
  body[data-sayfa="yonetim"] .topbar .brand,
  body[data-sayfa="egitmen"] .topbar .brand,
  body[data-sayfa="panelim"] .topbar .brand,
  body[data-sayfa="odevlerim"] .topbar .brand,
  body[data-sayfa="magaza"] .topbar .brand,
  body[data-sayfa="liderlik"] .topbar .brand {
    margin-right: 0;
  }
  .user-chip {
    max-width: calc(100vw - 92px);
  }
}

/* Giriş ekranı: paneldeki ödül ve satranç dilinin daha oyuncu karşılığı. */
body[data-sayfa="giris"] { background: #f7f8f3; }
.login-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101712;
  color: #fff;
  pointer-events: none;
  animation: login-loader-curtain 1.35s .1s cubic-bezier(.76,0,.24,1) forwards;
}
.login-loader::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: #f6b93b;
  box-shadow: -8px 0 26px rgba(246,185,59,.42);
}
.login-loader-mark {
  display: grid;
  justify-items: center;
  gap: 12px;
  animation: login-loader-mark 1s ease both;
}
.login-loader-mark span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px solid #f6b93b;
  border-radius: 8px;
  color: #f6b93b;
  font-family: Georgia, serif;
  font-size: 46px;
}
.login-loader-mark b { font-size: 14px; letter-spacing: 2px; }
@keyframes login-loader-curtain {
  0%, 58% { transform: translateX(0); }
  100% { transform: translateX(-105%); }
}
@keyframes login-loader-mark {
  0% { opacity: 0; transform: translateY(12px) scale(.92); }
  42%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.04); }
}
body[data-sayfa="giris"] .login-auth-wrap {
  grid-template-columns: minmax(480px, 1.08fr) minmax(440px, .92fr);
  min-height: 100dvh;
}
body[data-sayfa="giris"] .auth-side {
  justify-content: flex-start;
  padding: clamp(32px, 4vw, 58px);
  background-color: #176f3d;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
body[data-sayfa="giris"] .auth-side::before {
  display: none;
}
body[data-sayfa="giris"] .auth-side::after {
  content: "♟  ♞  ♜";
  right: 36px;
  bottom: 24px;
  font-size: 46px;
  letter-spacing: 12px;
  opacity: .12;
}
body[data-sayfa="giris"] .auth-logo-box {
  margin-bottom: 26px;
  border: 3px solid #f6b93b;
  border-radius: 8px;
  padding: 12px 20px;
  box-shadow: 8px 8px 0 rgba(10, 61, 32, .45);
}
.login-site-link {
  position: absolute;
  top: 42px;
  right: 42px;
  z-index: 3;
  min-width: 190px;
  padding: 7px 18px 8px;
  border-radius: 4px;
  background: #f6b93b;
  color: #17311e;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  transform: rotate(-3deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.login-site-link small,
.login-site-link strong { display: block; }
.login-site-link small {
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.login-site-link strong { font-size: 13px; }
.login-site-link:hover,
.login-site-link:focus-visible {
  color: #17311e;
  box-shadow: 5px 5px 0 #e97918;
  transform: rotate(-1deg) translateY(-2px);
}
body[data-sayfa="giris"] .auth-headline {
  max-width: 540px;
  margin-bottom: 10px;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
}
body[data-sayfa="giris"] .auth-headline em { color: #ffd166; }
body[data-sayfa="giris"] .auth-lead { margin-bottom: 22px; max-width: 560px; }
.login-playground {
  position: relative;
  width: min(100%, 560px);
  height: 220px;
  margin: 4px 0 24px;
}
.login-board {
  position: absolute;
  inset: 8px 112px 8px 0;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 8px;
  background-color: #f8eedc;
  background-image: conic-gradient(
    #eca64a 0 25%,
    #f8eedc 0 50%,
    #eca64a 0 75%,
    #f8eedc 0
  );
  background-size: 88px 88px;
  box-shadow: 10px 12px 0 rgba(9, 61, 31, .42);
  transform: rotate(-1.5deg);
  animation: login-board-arrive .65s cubic-bezier(.2,.8,.25,1) both;
}
.login-piece {
  position: absolute;
  z-index: 1;
  color: #17311e;
  font-family: Georgia, serif;
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 4px 0 rgba(255,255,255,.45));
}
.lp-rook { left: 7%; top: 12%; animation: login-piece-breathe 3.4s ease-in-out infinite; }
.lp-knight { left: 34%; top: 48%; color: #fff; animation: login-knight-move 4.8s ease-in-out infinite; }
.lp-pawn { left: 61%; top: 15%; animation: login-piece-breathe 3.4s .8s ease-in-out infinite; }
.lp-king { left: 79%; top: 49%; color: #fff; animation: login-piece-breathe 3.4s 1.6s ease-in-out infinite; }
.login-reward {
  position: absolute;
  right: 0;
  top: 28px;
  z-index: 2;
  width: 154px;
  padding: 14px 12px;
  border: 3px solid #17311e;
  border-radius: 8px;
  background: #ffd166;
  color: #17311e;
  text-align: center;
  box-shadow: 7px 7px 0 #e97918;
  transform: rotate(3deg);
  animation: login-reward-pop 4.8s 1.2s ease-in-out infinite;
}
.login-reward-cup { display: block; margin-bottom: 2px; font-size: 34px; }
.login-reward b { display: block; font-size: 22px; }
.login-reward small { font-weight: 800; }
.login-friends {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
}
.login-friends img {
  width: 48px;
  height: 48px;
  margin-left: -10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}
.login-friends img:nth-child(1) { animation: login-avatar-wave 3.8s .2s ease-in-out infinite; }
.login-friends img:nth-child(2) { animation: login-avatar-wave 3.8s .45s ease-in-out infinite; }
.login-friends img:nth-child(3) { animation: login-avatar-wave 3.8s .7s ease-in-out infinite; }

@keyframes login-board-arrive {
  from { opacity: 0; transform: translateY(16px) rotate(-3deg); }
  to { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
}
@keyframes login-piece-breathe {
  0%, 72%, 100% { transform: translateY(0); }
  80% { transform: translateY(-5px); }
  88% { transform: translateY(0); }
}
@keyframes login-knight-move {
  0%, 58%, 100% { transform: translate(0, 0) rotate(0); }
  68% { transform: translate(22px, -10px) rotate(-7deg); }
  78% { transform: translate(22px, -10px) rotate(0); }
  88% { transform: translate(0, 0); }
}
@keyframes login-reward-pop {
  0%, 58%, 100% { transform: rotate(3deg) scale(1); }
  68% { transform: rotate(0) scale(1.05); }
  76% { transform: rotate(3deg) scale(1); }
}
@keyframes login-avatar-wave {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-5px); }
  86% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .login-loader { display: none; }
  .login-board,
  .login-piece,
  .login-reward,
  .login-friends img,
  .login-social a { animation: none; }
}
body[data-sayfa="giris"] .auth-feats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
  gap: 10px;
}
body[data-sayfa="giris"] .auth-feat {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(8, 48, 25, .26);
}
body[data-sayfa="giris"] .auth-feat span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}
body[data-sayfa="giris"] .auth-feat .fi { background: #fff; }
.login-social {
  align-items: center;
  gap: 8px;
}
.login-social-desktop {
  display: flex;
  width: min(100%, 620px);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.login-social-mobile { display: none; }
.login-social-label {
  margin-right: auto;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.login-social-label b { color: #ffd166; letter-spacing: .8px; }
.login-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.42);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  animation: login-social-pulse 5.4s ease-in-out infinite;
}
.login-social a:nth-of-type(2) { animation-delay: .25s; }
.login-social a:nth-of-type(3) { animation-delay: .5s; }
.login-social a:hover,
.login-social a:focus-visible {
  border-color: #ffd166;
  background: #f47b18;
  transform: translateY(-3px);
}
.social-instagram-glyph {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 5px;
}
.social-instagram-glyph::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.social-instagram-glyph::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
@keyframes login-social-pulse {
  0%, 72%, 100% { transform: translateY(0); }
  78% { transform: translateY(-3px); }
  84% { transform: translateY(0); }
}
body[data-sayfa="giris"] .login-auth-main {
  padding: clamp(24px, 5vw, 72px);
  background-color: #f7f8f3;
  background-image: linear-gradient(90deg, transparent 49%, rgba(23,111,61,.035) 50%, transparent 51%);
  background-size: 34px 34px;
}
body[data-sayfa="giris"] .auth-box {
  max-width: 480px;
  padding: clamp(24px, 4vw, 42px);
  border: 2px solid #d9dfd2;
  border-top: 7px solid #176f3d;
  border-radius: 8px;
  background: #fff;
  box-shadow: 12px 14px 0 #e4e8de;
}
.login-form-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.login-heading-piece {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #ffd166;
  color: #17311e;
  font-family: Georgia, serif;
  font-size: 34px;
  box-shadow: 4px 4px 0 #e97918;
}
body[data-sayfa="giris"] .auth-title { letter-spacing: 0; }
body[data-sayfa="giris"] .auth-desc { margin: 4px 0 0; }
body[data-sayfa="giris"] .auth-form .input {
  min-height: 52px;
  border-width: 2px;
  background: #fbfcf8;
}
body[data-sayfa="giris"] .auth-form .input:focus {
  border-color: #176f3d;
  background: #fff;
}
.chess-verify {
  padding: 12px 14px;
  border: 2px solid #d9dfd2;
  border-radius: 8px;
  background: #f8faf5;
  transition: border-color .18s ease, background-color .18s ease;
}
.chess-verify p {
  margin: 0 0 10px;
  color: #697267;
  font-size: 12px;
}
.chess-verify-track {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.chess-verify-piece {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid #17311e;
  border-radius: 8px;
  background: #fff;
  color: #17311e;
  cursor: grab;
  touch-action: none;
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1;
  box-shadow: 3px 3px 0 #d9dfd2;
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.chess-verify-piece.is-dragging {
  cursor: grabbing;
  box-shadow: 6px 7px 0 rgba(23,49,30,.18);
  transition: none;
}
.chess-verify-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  overflow: hidden;
  border: 2px solid #17311e;
  border-radius: 7px;
}
.chess-verify-square {
  position: relative;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(23,49,30,.18);
  background: #e6efe1;
  cursor: pointer;
}
.chess-verify-square:nth-child(even) { background: #7ca383; }
.chess-verify-square:last-child { border-right: 0; }
.chess-verify-square.is-target {
  background: #ffd166;
  box-shadow: inset 0 0 0 4px #f6b93b;
}
.chess-verify-square.is-target::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 2px dashed #9c6500;
  border-radius: 50%;
}
.chess-verify-status {
  margin-top: 8px;
  color: #697267;
  font-size: 11.5px;
  font-weight: 800;
  text-align: right;
}
.chess-verify.is-verified {
  border-color: #176f3d;
  background: #edf8f0;
}
.chess-verify.is-verified .chess-verify-piece { opacity: .25; cursor: default; }
.chess-verify.is-verified .is-target::before {
  content: "♞";
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: #17311e;
  font-family: Georgia, serif;
  font-size: 32px;
}
.chess-verify.is-verified .chess-verify-status { color: #176f3d; }
.chess-verify.is-wrong { animation: chess-verify-shake .28s ease; }
@keyframes chess-verify-shake {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
}
body[data-sayfa="giris"] .auth-form .btn[type="submit"] {
  min-height: 52px;
  border: 0;
  background: #f47b18;
  box-shadow: 0 5px 0 #bd5300;
  font-size: 16px;
}
body[data-sayfa="giris"] .auth-form .btn[type="submit"]:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #bd5300;
}

@media (min-width: 1800px) and (min-height: 850px) {
  body[data-sayfa="giris"] .auth-side { padding: 64px 72px; }
  body[data-sayfa="giris"] .auth-logo-box { padding: 15px 24px; margin-bottom: 32px; }
  body[data-sayfa="giris"] .auth-logo { height: 74px; }
  body[data-sayfa="giris"] .auth-headline { max-width: 650px; font-size: 58px; }
  body[data-sayfa="giris"] .auth-lead { max-width: 680px; font-size: 18px; margin-bottom: 28px; }
  .login-site-link { top: 58px; right: 64px; min-width: 230px; padding: 10px 22px 11px; }
  .login-site-link small { font-size: 10px; }
  .login-site-link strong { font-size: 16px; }
  .login-playground { width: min(100%, 680px); height: 270px; margin-bottom: 30px; }
  .login-board { inset: 8px 136px 8px 0; background-size: 108px 108px; }
  .login-piece { font-size: 66px; }
  .login-reward { width: 184px; top: 35px; padding: 18px 14px; }
  .login-reward-cup { font-size: 42px; }
  .login-reward b { font-size: 27px; }
  .login-friends img { width: 58px; height: 58px; }
  body[data-sayfa="giris"] .auth-feats { max-width: 760px; gap: 14px; }
  body[data-sayfa="giris"] .auth-feat { padding: 16px; }
  body[data-sayfa="giris"] .auth-feat b { font-size: 16px; }
  body[data-sayfa="giris"] .auth-feat span { font-size: 13px; }
  body[data-sayfa="giris"] .auth-feat .fi { width: 42px; height: 42px; font-size: 20px; }
  .login-social-desktop { width: min(100%, 760px); margin-top: 18px; padding-top: 16px; }
  .login-social-label { font-size: 14px; }
  .login-social a { width: 42px; height: 42px; font-size: 19px; }
  .social-instagram-glyph { width: 20px; height: 20px; }
  body[data-sayfa="giris"] .auth-box { max-width: 590px; padding: 52px; }
  .login-form-heading { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; margin-bottom: 30px; }
  .login-heading-piece { width: 64px; height: 64px; font-size: 40px; }
  body[data-sayfa="giris"] .auth-title { font-size: 32px; }
  body[data-sayfa="giris"] .auth-desc { font-size: 16px; }
  body[data-sayfa="giris"] .auth-form { gap: 18px; }
  body[data-sayfa="giris"] .auth-form .input,
  body[data-sayfa="giris"] .auth-form .btn[type="submit"] { min-height: 60px; }
  .chess-verify-track { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; }
  .chess-verify-piece,
  .chess-verify-square { height: 60px; }
  .chess-verify-piece { width: 60px; font-size: 40px; }
  body[data-sayfa="giris"] .auth-form .btn[type="submit"] { font-size: 18px; }
}

@media (min-width: 2400px) and (min-height: 1050px) {
  body[data-sayfa="giris"] .auth-side { padding: 82px 92px; }
  body[data-sayfa="giris"] .auth-logo { height: 86px; }
  body[data-sayfa="giris"] .auth-headline { max-width: 760px; font-size: 66px; }
  body[data-sayfa="giris"] .auth-lead { max-width: 790px; font-size: 20px; }
  .login-site-link { top: 72px; right: 82px; min-width: 270px; }
  .login-site-link small { font-size: 11px; }
  .login-site-link strong { font-size: 18px; }
  .login-playground { width: min(100%, 790px); height: 310px; }
  .login-board { right: 158px; background-size: 124px 124px; }
  .login-piece { font-size: 74px; }
  .login-reward { width: 208px; top: 42px; }
  .login-friends img { width: 64px; height: 64px; }
  body[data-sayfa="giris"] .auth-feats,
  .login-social-desktop { max-width: 880px; width: min(100%, 880px); }
  body[data-sayfa="giris"] .auth-box { max-width: 690px; padding: 62px; }
  body[data-sayfa="giris"] .auth-title { font-size: 36px; }
  body[data-sayfa="giris"] .auth-desc { font-size: 18px; }
  body[data-sayfa="giris"] .auth-form .input,
  body[data-sayfa="giris"] .auth-form .btn[type="submit"] { min-height: 64px; }
  .chess-verify-piece,
  .chess-verify-square { height: 64px; }
  .chess-verify-piece { width: 64px; }
}

@media (max-width: 980px) {
  body[data-sayfa="giris"] .login-auth-wrap { grid-template-columns: 1fr; }
  body[data-sayfa="giris"] .auth-side { display: none; }
  body[data-sayfa="giris"] .login-auth-main {
    align-items: start;
    min-height: 100dvh;
    padding: 24px 18px 40px;
    border-top: 12px solid #176f3d;
  }
  body[data-sayfa="giris"] .auth-mobile-logo { display: block; margin-bottom: 20px; }
  body[data-sayfa="giris"] .auth-box { margin: 0 auto; padding: 28px; box-shadow: 8px 9px 0 #e4e8de; }
  .login-social-desktop { display: none; }
  .login-social-mobile {
    display: flex;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid #d9dfd2;
    border-radius: 8px;
    background: #f5f8f2;
  }
  .login-social-mobile .login-social-label { color: #5f695e; }
  .login-social-mobile .login-social-label b { color: #176f3d; }
  .login-social-mobile a {
    border-color: #176f3d;
    color: #176f3d;
  }
}
@media (max-width: 1180px) and (min-width: 981px) {
  body[data-sayfa="giris"] .auth-headline { font-size: 40px; }
  body[data-sayfa="giris"] .auth-side { padding: 32px; }
  body[data-sayfa="giris"] .auth-feat { padding: 10px; }
  body[data-sayfa="giris"] .auth-feat span { font-size: 11px; }
}
@media (max-width: 520px) {
  body[data-sayfa="giris"] .login-auth-main { padding-inline: 12px; }
  body[data-sayfa="giris"] .auth-box { padding: 22px 18px; border-top-width: 6px; }
  .login-form-heading { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; margin-bottom: 20px; }
  .login-heading-piece { width: 44px; height: 44px; font-size: 28px; box-shadow: 3px 3px 0 #e97918; }
  body[data-sayfa="giris"] .auth-title { font-size: 23px; }
  body[data-sayfa="giris"] .auth-desc { font-size: 13.5px; }
  body[data-sayfa="giris"] .auth-alt { margin-top: 18px; }
  body[data-sayfa="giris"] .auth-gelistirici { margin-top: 18px; }
  .login-social-mobile { flex-wrap: wrap; justify-content: center; }
  .login-social-mobile .login-social-label { flex: 1 0 100%; margin: 0 0 3px; text-align: center; }
  .chess-verify { padding: 10px; }
  .chess-verify-track { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .chess-verify-piece { width: 46px; height: 48px; font-size: 30px; }
  .chess-verify-square { height: 48px; }
}

/* ==========================================================================
   FAZ 1 — Çocuk seçici, roller, veli/eğitmen bileşenleri
   ========================================================================== */

/* --------------------------------------------------- Çocuk seçici (üst bar) */
.cocuk-secici {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: .18s; flex: none;
  user-select: none;
}
.cocuk-secici:hover { border-color: var(--olbia-orange); box-shadow: var(--shadow-sm); }
.cocuk-secici .cs-ava { font-size: 19px; line-height: 1; }
.cocuk-secici .cs-ava,
.cocuk-menu .cs-ava,
.coklu-satir .cs-ava,
.ts-ava {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.cocuk-secici .cs-ava .asset-sprite,
.cocuk-menu .cs-ava .asset-sprite,
.coklu-satir .cs-ava .asset-sprite,
.ts-ava .asset-sprite { width: 100%; height: 100%; }
.cocuk-secici > .cs-ad { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.cocuk-secici .cs-ok { font-size: 11px; color: var(--text-soft); }

.cocuk-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  min-width: 250px; padding: 8px; display: grid; gap: 2px;
}
.cocuk-menu[hidden] { display: none; }
.cocuk-menu .mini {
  font-size: 11px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-soft);
  padding: 4px 12px 8px;
}
.cocuk-menu button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; border: 0;
  background: transparent; border-radius: var(--r-sm);
  cursor: pointer; text-align: left; transition: .15s;
  color: var(--text);
}
.cocuk-menu button:hover { background: var(--olbia-green-soft); }
.cocuk-menu button.aktif { background: var(--olbia-orange-soft); }
.cocuk-menu button:disabled { opacity: .5; cursor: wait; }
.cocuk-menu .cs-ava { font-size: 22px; }
.cocuk-menu .cs-ad { display: block; font-size: 14px; font-weight: 700; }
.cocuk-menu .cs-alt { display: block; font-size: 11.5px; color: var(--text-soft); margin-top: 1px; }
.cocuk-menu .cs-tik { margin-left: auto; color: var(--olbia-orange); font-weight: 900; }

/* --------------------------------------------------- Rol rozetleri */
.rol-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: var(--surface-alt); color: var(--text-muted);
  white-space: nowrap;
}
.rol-rozet.ogrenci  { background: var(--olbia-green-soft);  color: var(--olbia-green); }
.rol-rozet.veli     { background: #EEF2FF;                  color: #4338CA; }
.rol-rozet.egitmen  { background: var(--olbia-orange-soft); color: var(--olbia-orange-dark); }
.rol-rozet.yonetici { background: #FBE9E7;                  color: #A5291B; }

/* --------------------------------------------------- Bağlantı listesi */
.bag-listesi { display: grid; gap: 8px; }
.bag-satir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.bag-satir .b-ava {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(140deg, var(--olbia-green-light), var(--olbia-green-dark));
  color: #fff;
  overflow: hidden;
}
.bag-satir .b-ava .asset-sprite { width: 100%; height: 100%; }
.bag-satir .b-ad { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bag-satir .b-alt { font-size: 11.5px; color: var(--text-soft); }
.bag-satir .b-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------- Boş durum kutusu */
.bos-kutu {
  border: 2px dashed var(--border-strong); border-radius: var(--r-md);
  padding: 28px 20px; text-align: center; color: var(--text-soft);
  background: var(--surface-alt);
}
.bos-kutu .bk-ico { font-size: 34px; margin-bottom: 10px; }
.bos-kutu b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* --------------------------------------------------- Yakında etiketi */
.yakinda {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--olbia-orange-soft); color: var(--olbia-orange-dark);
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .cocuk-secici > .cs-ad { display: none; }   /* Dar ekranda yalnızca avatar */
  .cocuk-menu { right: -8px; min-width: 220px; }
}

/* ==========================================================================
   ONAY PENCERESİ                                          [tarayıcı confirm yerine]
   ========================================================================== */
.onay-modal { width: min(430px, 100%); }
.onay-ust { display: flex; gap: 15px; align-items: flex-start; }
.onay-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; font-size: 21px;
  background: rgba(232,124,42,.12);
}
.onay-ico.tehlike { background: rgba(199,58,58,.12); }
.onay-metin {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-soft);
}
.onay-bg .modal-actions { margin-top: 24px; }

@media (max-width: 520px) {
  .onay-bg .modal-actions { flex-direction: column-reverse; }
  .onay-bg .modal-actions .btn { width: 100%; }
}

/* Hata ayrıntısı kutusu (yönetici görür) */
.hata-detay {
  background: rgba(199,58,58,.07); border: 1px solid rgba(199,58,58,.2);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, monospace;
  color: var(--text-soft); word-break: break-word;
}
.hata-detay b {
  display: block; font-family: inherit; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--danger, #c73a3a); margin-bottom: 5px;
}
.hata-detay a { display: inline-block; margin-top: 8px; color: var(--olbia-orange); }

/* ==========================================================================
   GRUPLAR                                                            [FAZ 2]
   ========================================================================== */
.grup-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grup-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--grup-renk, var(--olbia-orange));
  border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 13px;
  transition: box-shadow .18s, transform .18s;
}
.grup-kart:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.grup-kart.sonuk { opacity: .58; }

.gk-ust { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.gk-ad { font-size: 16.5px; font-weight: 800; line-height: 1.3; }
.gk-alt { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }

.gk-doluluk { display: flex; flex-direction: column; gap: 7px; }
.gd-cubuk {
  height: 8px; border-radius: 99px; background: var(--border); overflow: hidden;
}
.gd-cubuk span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--olbia-green, #1B6B3A); transition: width .35s ease;
}
.gd-cubuk span.yakin { background: var(--olbia-orange, #E87C2A); }
.gd-cubuk span.dolu  { background: var(--danger, #c73a3a); }
.gd-metin { font-size: 13px; display: flex; gap: 8px; align-items: center; }
.gd-metin b { font-size: 15px; }
.gd-dolu {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--danger, #c73a3a); background: rgba(199,58,58,.1);
  padding: 2px 7px; border-radius: 6px;
}

.gk-bekleme {
  font-size: 12.5px; color: var(--olbia-orange);
  background: rgba(232,124,42,.09); border-radius: var(--r-md);
  padding: 7px 11px;
}

.gk-egitmenler { display: flex; flex-wrap: wrap; gap: 6px; }
.grup-egt {
  font-size: 12px; background: var(--bg-soft, rgba(0,0,0,.04));
  border-radius: 99px; padding: 4px 10px; color: var(--text-soft);
}
.grup-egt.bos { font-style: italic; opacity: .65; }

.gk-alt-btn {
  display: flex; gap: 8px; margin-top: auto; padding-top: 4px;
}

.grup-nokta {
  display: inline-block; width: 11px; height: 11px; border-radius: 4px;
  vertical-align: middle; margin-right: 7px;
}

/* Üye listesi */
.grup-uye-listesi { display: flex; flex-direction: column; gap: 8px; }
.grup-uye {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft, rgba(0,0,0,.03));
  border-radius: var(--r-md); padding: 10px 13px;
}
.grup-uye.pasif { opacity: .6; }
.gu-ava {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(140deg, var(--olbia-green-light), var(--olbia-green-dark));
  font-size: 22px;
}
.gu-ava .asset-sprite { width: 100%; height: 100%; }
.gu-ad { font-weight: 700; font-size: 14px; }
.gu-alt { font-size: 12px; color: var(--text-soft); }
.gu-sira {
  font-size: 11.5px; font-weight: 700; color: var(--olbia-orange);
  background: rgba(232,124,42,.12); padding: 3px 9px; border-radius: 99px;
}
.grup-uye-listesi.bekleme .grup-uye { background: rgba(232,124,42,.07); }

@media (max-width: 640px) {
  .grup-izgara { grid-template-columns: 1fr; }
  .grup-uye { flex-wrap: wrap; }
}

/* ==========================================================================
   ARAMALI SEÇİM KUTUSU
   ========================================================================== */
.secici { position: relative; }
.secici-gizli {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
}
.secici-dugme {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; background-image: none;
}
.secici-dugme:disabled { opacity: .55; cursor: not-allowed; }
.secici-dugme .sd-bos { color: var(--text-soft); }
.secici-dugme .sd-ok { flex: 0 0 auto; opacity: .5; font-size: 11px; }
.secici.acik .secici-dugme { border-color: var(--olbia-orange); }

.secici-panel {
  position: absolute; z-index: 160; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.secici-panel[hidden] { display: none; }

.secici-ara { padding: 9px; border-bottom: 1px solid var(--border); }
.secici-ara[hidden] { display: none; }
.secici-ara input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
  padding: 8px 11px; font: inherit; font-size: 13.5px;
  background: var(--bg-soft, rgba(0,0,0,.03)); color: inherit;
}
.secici-ara input:focus { outline: none; border-color: var(--olbia-orange); }

.secici-liste { max-height: 260px; overflow-y: auto; padding: 5px; }
.secici-satir {
  padding: 9px 11px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font-size: 13.5px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.secici-satir:hover, .secici-satir.vurgu { background: rgba(232,124,42,.1); }
.secici-satir.secili { background: rgba(27,107,58,.1); font-weight: 700; }
.secici-satir.kapali { opacity: .45; cursor: not-allowed; }
.secici-satir mark {
  background: rgba(232,124,42,.28); color: inherit;
  border-radius: 3px; padding: 0 1px;
}
.secici-satir .ss-tik { color: var(--olbia-green, #1B6B3A); flex: 0 0 auto; }
.secici-bos {
  padding: 22px 12px; text-align: center;
  color: var(--text-soft); font-size: 13px;
}

/* ==========================================================================
   ÇOKLU SEÇİM LİSTESİ
   ========================================================================== */
.coklu {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.coklu-ust {
  display: flex; gap: 8px; align-items: center;
  padding: 10px; border-bottom: 1px solid var(--border);
}
.coklu-ara { flex: 1; font-size: 13.5px; padding: 8px 11px; }
.coklu-liste { max-height: 290px; overflow-y: auto; padding: 6px; }

.coklu-satir {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm, 8px); cursor: pointer;
  transition: background .12s;
}
.coklu-satir:hover { background: rgba(232,124,42,.07); }
.coklu-satir.secili { background: rgba(27,107,58,.09); }
.coklu-satir input[type="checkbox"] {
  width: 17px; height: 17px; flex: 0 0 auto;
  accent-color: var(--olbia-orange, #E87C2A); cursor: pointer;
}
.coklu-satir .cs-ava { font-size: 19px; flex: 0 0 auto; }
.coklu-satir .cs-metin { display: flex; flex-direction: column; min-width: 0; }
.coklu-satir .cs-ad { font-size: 13.5px; font-weight: 700; }
.coklu-satir .cs-alt { font-size: 11.5px; color: var(--text-soft); }
.coklu-satir mark { background: rgba(232,124,42,.28); border-radius: 3px; }

.coklu-alt {
  padding: 10px 13px; border-top: 1px solid var(--border);
  font-size: 13px; background: var(--bg-soft, rgba(0,0,0,.02));
}
.coklu-alt b { color: var(--olbia-orange); }

/* Toplu ekleme sonucu */
.toplu-sonuc { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.toplu-satir {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 8px 12px; border-radius: var(--r-sm, 8px);
  background: var(--bg-soft, rgba(0,0,0,.03));
}
.toplu-satir.aktif    { background: rgba(27,107,58,.09); }
.toplu-satir.beklemede{ background: rgba(232,124,42,.09); }
.toplu-satir.hata     { background: rgba(199,58,58,.08); }
.toplu-satir .ts-ad { flex: 1; font-weight: 600; }
.toplu-satir .ts-not { font-size: 12px; color: var(--text-soft); }

/* ==========================================================================
   PENCERE — arka plana tıklayınca kapanmaz, sarsılır
   ========================================================================== */
.modal-bg { cursor: default; }
.modal { cursor: auto; }

@keyframes modalSars {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(6px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  80%      { transform: translateX(-2px); }
}
.modal.sars {
  animation: modalSars .42s cubic-bezier(.36,.07,.19,.97);
}

/* Hareketi azalt tercihine saygı — sarsıntı yerine kısa bir çerçeve parlaması */
@media (prefers-reduced-motion: reduce) {
  .modal.sars {
    animation: none;
    box-shadow: 0 0 0 3px rgba(232,124,42,.45), var(--shadow-lg);
    transition: box-shadow .2s;
  }
}

/* ==========================================================================
   ÖDEVLER                                                            [FAZ 5]
   ========================================================================== */
.odev-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.odev-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .18s, transform .18s;
}
.odev-kart:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.odev-kart.sonuk { opacity: .6; }
.odev-kart.durum-turuncu { border-left: 4px solid var(--olbia-orange, #E87C2A); }
.odev-kart.durum-yesil   { border-left: 4px solid var(--olbia-green, #1B6B3A); }
.odev-kart.durum-kirmizi { border-left: 4px solid var(--danger, #c73a3a); }
.odev-kart.durum-mavi    { border-left: 4px solid #3b7dd8; }

.ok-ust { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ok-baslik { font-size: 16px; font-weight: 800; line-height: 1.35; }
.ok-alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
.ok-metin { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }
.ok-hedefler { display: flex; flex-wrap: wrap; gap: 6px; }
.ok-dugmeler { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

.od-rozet {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap; flex: 0 0 auto;
}
.od-rozet.gri      { background: rgba(0,0,0,.06); color: var(--text-soft); }
.od-rozet.mavi     { background: rgba(59,125,216,.13); color: #2f66b3; }
.od-rozet.turuncu  { background: rgba(232,124,42,.14); color: #c56516; }
.od-rozet.yesil    { background: rgba(27,107,58,.13); color: #165c33; }
.od-rozet.kirmizi  { background: rgba(199,58,58,.12); color: #b33636; }

.od-op {
  background: rgba(232,124,42,.12); color: #c56516;
  padding: 3px 9px; border-radius: 99px; font-weight: 700; font-size: 12px;
}
.od-sure { color: var(--text-soft); }
.od-sure.yakin { color: var(--olbia-orange); font-weight: 700; }
.od-sure.gecti {
  color: var(--danger, #c73a3a); font-weight: 700;
  background: rgba(199,58,58,.09); padding: 2px 8px; border-radius: 99px;
}
.od-hedef {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 9px; border-radius: 99px;
  background: var(--bg-soft, rgba(0,0,0,.04)); color: var(--text-soft);
  border-left: 3px solid var(--h, transparent);
}
.od-hedef.bos { font-style: italic; opacity: .6; }
.od-bekleyen { color: var(--olbia-orange); font-weight: 700; }

.od-geri {
  background: rgba(232,124,42,.08); border-left: 3px solid var(--olbia-orange);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 11px 14px;
  font-size: 13px; line-height: 1.6;
}
.od-geri b { display: block; font-size: 11.5px; margin-bottom: 4px; }
.od-kazanc {
  background: rgba(27,107,58,.1); color: #165c33; font-weight: 700;
  padding: 8px 12px; border-radius: var(--r-md); font-size: 13px;
}
.od-yonerge {
  background: var(--bg-soft, rgba(0,0,0,.03)); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap; margin-bottom: 16px;
}

/* Teslim özeti */
.od-teslim-ozet {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.ot-baslik { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ot-metin { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.ot-baglanti { font-size: 13px; word-break: break-all; }

/* Dosyalar */
.dosya-listesi { display: flex; flex-direction: column; gap: 6px; }
.dosya-satir {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft, rgba(0,0,0,.03));
  border-radius: var(--r-sm, 8px); padding: 8px 12px; font-size: 13px;
}
.dosya-satir.bekleyen { background: rgba(232,124,42,.08); }
.dosya-satir .ds-ikon { font-size: 17px; flex: 0 0 auto; }
.dosya-satir .ds-ad { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dosya-satir .ds-boyut { font-size: 11.5px; color: var(--text-soft); flex: 0 0 auto; }

.dosya-birak {
  border: 2px dashed var(--border); border-radius: var(--r-md);
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dosya-birak:hover, .dosya-birak.uzerinde {
  border-color: var(--olbia-orange); background: rgba(232,124,42,.05);
}
.dosya-birak .db-ikon { font-size: 26px; margin-bottom: 6px; }
.dosya-birak .db-ic { font-size: 13.5px; color: var(--text-soft); }

/* Onay kutulu satırlar */
.onay-satirlari { display: flex; flex-direction: column; gap: 4px; }
.onay-satir {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-sm, 8px); font-size: 13.5px;
}
.onay-satir:hover { background: rgba(232,124,42,.06); }
.onay-satir input { width: 17px; height: 17px; accent-color: var(--olbia-orange); }

/* Teslim kuyruğu */
.teslim-listesi { display: flex; flex-direction: column; gap: 12px; }
.teslim-satir {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.teslim-satir.durum-mavi    { border-left: 4px solid #3b7dd8; }
.teslim-satir.durum-turuncu { border-left: 4px solid var(--olbia-orange); }
.teslim-satir.durum-yesil   { border-left: 4px solid var(--olbia-green); }
.teslim-satir.durum-kirmizi { border-left: 4px solid var(--danger, #c73a3a); }
.ts-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ts-kim { display: flex; align-items: center; gap: 9px; }
.ts-ava { font-size: 21px; }
.ts-ad { font-weight: 700; font-size: 14px; }
.ts-bos { font-size: 13px; color: var(--text-soft); font-style: italic; }
.ts-icerik { display: flex; flex-direction: column; gap: 9px; }
.ts-meta { font-size: 12px; color: var(--text-soft); display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center; }
.ts-metin { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap;
  background: var(--bg-soft, rgba(0,0,0,.03)); padding: 10px 13px;
  border-radius: var(--r-sm, 8px); }
.ts-karar { display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid var(--border); padding-top: 11px; }
.ts-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ts-op { width: 88px; padding: 7px 10px; font-size: 13px; }

@media (max-width: 640px) {
  .odev-izgara { grid-template-columns: 1fr; }
  .ts-dugmeler { flex-direction: column; align-items: stretch; }
  .ts-dugmeler .btn, .ts-op { width: 100%; }
}

/* ==========================================================================
   BİLDİRİM ZİLİ                                                      [FAZ 6]
   ========================================================================== */
.zil-sarmal, .guvenlik-sarmal { position: relative; flex: 0 0 auto; }
.zil {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 18px; cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, transform .12s;
}
.zil:hover { border-color: var(--olbia-orange); transform: translateY(-1px); }
.zil-rozet {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; background: var(--danger, #c73a3a); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.zil-panel {
  position: absolute; z-index: 170; top: calc(100% + 8px); right: 0;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.zil-panel[hidden] { display: none; }
.zp-ust {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.zp-liste { max-height: 380px; overflow-y: auto; }
.zp-satir {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.zp-satir:last-child { border-bottom: 0; }
.zp-satir:hover { background: rgba(232,124,42,.06); }
.zp-satir.okundu { opacity: .58; }
.zs-ikon { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.zs-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zs-baslik { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.zs-alt {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.zs-zaman { font-size: 11px; color: var(--text-soft); }
.zs-nokta {
  width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto;
  background: var(--olbia-orange, #E87C2A); margin-top: 6px;
}
.guvenlik-zil { color: var(--olbia-green); }
.guvenlik-rozet { background: var(--olbia-orange, #E87C2A); }
.guvenlik-panel .zp-satir { cursor: default; }
.guvenlik-satir .zs-zaman {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.il-ip {
  font-size: 10.5px; font-weight: 800; color: var(--olbia-green);
  background: rgba(27,107,58,.09); border-radius: 99px; padding: 2px 7px;
}
.islem-log-modal {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  padding: 30px 34px;
}
.islem-log-baslik {
  align-items: flex-start; gap: 18px; margin-bottom: 18px;
}
.islem-log-filtre {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(220px, 1fr) auto auto auto;
  gap: 12px; align-items: end; margin-bottom: 14px;
}
.islem-log-liste {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: auto; max-height: min(66vh, 680px);
  background: var(--surface);
}
.log-zincir {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; background: #f6faf7;
}
.log-zincir b { color: var(--olbia-green); }
.log-zincir span { color: var(--text); line-height: 1.4; }
.log-zincir small { color: var(--text-soft); font-weight: 800; }
.log-zincir.uyari { background: rgba(232,124,42,.08); }
.log-zincir.uyari b { color: var(--olbia-orange, #E87C2A); }
.log-zincir.kirik { background: rgba(199,58,58,.09); }
.log-zincir.kirik b { color: var(--danger, #c73a3a); }
.log-zincir.bilinmiyor { background: rgba(0,0,0,.04); }
.islem-log-tablosu { min-width: 1040px; }
.islem-log-head,
.islem-log-satir {
  display: grid;
  grid-template-columns: 105px 150px 165px minmax(260px, 1fr) 140px 185px;
  gap: 16px;
  align-items: start;
}
.islem-log-head {
  position: sticky; top: 0; z-index: 1;
  padding: 12px 16px;
  background: var(--olbia-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.islem-log-satir {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.islem-log-satir:nth-child(odd) { background: rgba(27,107,58,.025); }
.islem-log-satir.okundu { opacity: .66; }
.islem-log-satir.okunmadi {
  box-shadow: inset 4px 0 0 var(--olbia-orange, #E87C2A);
  background: rgba(232,124,42,.055);
}
.islem-log-satir:last-child { border-bottom: 0; }
.il-durum {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; padding: 4px 9px; border-radius: 999px;
  background: rgba(27,107,58,.10); color: var(--olbia-green);
  font-size: 11px; font-weight: 900;
}
.islem-log-satir.okunmadi .il-durum {
  background: rgba(232,124,42,.14); color: var(--olbia-orange, #E87C2A);
}
.il-zaman { font-size: 12px; font-weight: 800; color: var(--text-soft); }
.il-eylem { font-weight: 900; color: var(--text); }
.il-aciklama {
  color: var(--text-soft); line-height: 1.45; word-break: break-word;
}
.il-ip-cell {
  font-size: 12px; font-weight: 800; color: var(--olbia-green);
  word-break: break-word;
}
.il-yapan { display: flex; flex-direction: column; gap: 2px; font-weight: 800; }
.il-yapan small { color: var(--text-soft); font-weight: 600; word-break: break-word; }

/* ==========================================================================
   DUYURULAR
   ========================================================================== */
.duyuru-listesi { display: flex; flex-direction: column; gap: 14px; }
.duyuru-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 11px;
}
.duyuru-kart.sonuk { opacity: .62; }
.duyuru-kart.onem-turuncu { border-left-color: var(--olbia-orange, #E87C2A); }
.duyuru-kart.onem-kirmizi { border-left-color: var(--danger, #c73a3a); }
.duyuru-kart.onem-gri     { border-left-color: var(--border); }

.du-eposta {
  font-size: 11.5px; padding: 3px 9px; border-radius: 99px;
  background: rgba(0,0,0,.05); color: var(--text-soft);
}
.du-eposta.ok   { background: rgba(27,107,58,.12); color: #165c33; }
.du-eposta.hata { background: rgba(199,58,58,.1); color: #b33636; }

/* Panelde duyuru kartı */
.panel-duyuru {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--olbia-orange, #E87C2A);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px;
}
.panel-duyuru.onem-acil   { border-left-color: var(--danger, #c73a3a);
                            background: rgba(199,58,58,.04); }
.panel-duyuru.onem-normal { border-left-color: var(--border); }
.panel-duyuru.canli-ders {
  border-color: rgba(247, 125, 25, .36);
  border-left-color: var(--olbia-orange, #E87C2A);
  background: linear-gradient(90deg, rgba(247, 125, 25, .10), rgba(255,255,255,.95) 54%);
}
.pd-ikon { font-size: 24px; flex: 0 0 auto; }
.pd-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-baslik { font-size: 15px; font-weight: 800; }
.pd-metin { font-size: 13.5px; color: var(--text-soft); line-height: 1.6;
  white-space: pre-line; }
.pd-alt { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.pd-ders-zaman {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(27, 107, 58, .10); color: var(--olbia-green);
  font-size: 12px; font-weight: 800;
}
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

@media (max-width: 640px) {
  .zil-panel { right: -60px; }
  .guvenlik-panel { right: -112px; }
  .islem-log-modal { width: calc(100vw - 20px); padding: 20px; }
  .islem-log-filtre { grid-template-columns: 1fr; }
  .panel-duyuru { flex-wrap: wrap; }
  .pd-actions { width: 100%; }
  .pd-actions .btn { flex: 1 1 150px; justify-content: center; }
}

/* ==========================================================================
   YOKLAMA
   ========================================================================== */
.yoklama-head { margin-bottom: 16px; }
.yoklama-panel { margin-bottom: 24px; }
.yoklama-form {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(190px, 1.4fr) minmax(140px, .85fr) minmax(110px, .65fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.yoklama-form [hidden] { display: none !important; }
.yoklama-gecmis-baslik { margin-top: 10px; }
.yoklama-active {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.yoklama-active-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.yoklama-active-top h3 { margin: 0 0 4px; color: var(--olbia-green); }
.yk-sayim, .yk-mini {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end;
}
.yk-sayim span, .yk-mini span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 5px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 900;
}
.yk-sayim .yesil, .yk-mini .yesil { background: rgba(27,107,58,.12); color: var(--olbia-green); }
.yk-sayim .turuncu, .yk-mini .turuncu { background: rgba(247,125,25,.14); color: var(--olbia-orange-dark); }
.yk-sayim .mavi, .yk-mini .mavi { background: rgba(59,125,216,.12); color: #2563a9; }
.yk-sayim .kirmizi, .yk-mini .kirmizi { background: rgba(199,58,58,.12); color: #ad302b; }
.yoklama-tools {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.yoklama-table th:nth-child(1) { min-width: 220px; }
.yoklama-table th:nth-child(2) { min-width: 430px; }
.yoklama-table th:nth-child(3) { min-width: 180px; }
.yk-ogrenci {
  display: flex; align-items: center; gap: 10px;
}
.yk-ogrenci b { display: block; color: var(--text); }
.yk-ogrenci small { display: block; color: var(--text-soft); margin-top: 2px; }
.yk-durumlar {
  display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 6px;
}
.yk-durum {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 38px; padding: 7px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); font: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: .15s;
}
.yk-durum:hover { border-color: var(--border-strong); color: var(--text); }
.yk-durum.aktif.yesil { background: rgba(27,107,58,.12); border-color: rgba(27,107,58,.45); color: var(--olbia-green); }
.yk-durum.aktif.turuncu { background: rgba(247,125,25,.14); border-color: rgba(247,125,25,.5); color: var(--olbia-orange-dark); }
.yk-durum.aktif.mavi { background: rgba(59,125,216,.12); border-color: rgba(59,125,216,.42); color: #2563a9; }
.yk-durum.aktif.kirmizi { background: rgba(199,58,58,.12); border-color: rgba(199,58,58,.42); color: #ad302b; }

/* Yoklama sinif defteri */
.yoklama-defter-bg { padding: 24px; }
.modal.yoklama-defter-modal {
  width: min(1180px, 100%); max-height: calc(100dvh - 48px); padding: 0;
  overflow: hidden; display: flex; flex-direction: column; border-radius: 8px;
}
.yoklama-defter-head {
  flex: 0 0 auto; padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.yoklama-defter-kicker {
  display: block; color: var(--olbia-orange); font-size: 11px; font-weight: 800;
  letter-spacing: 0; margin-bottom: 5px;
}
.yoklama-defter-kapat { flex: 0 0 auto; font-size: 25px; }
.yoklama-defter-ozet {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.yoklama-defter-ozet .yoklama-tools { margin: 0; }
.yoklama-defter-kolonlar,
.yoklama-defter-satir {
  display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(430px, 2fr) minmax(180px, .8fr);
  gap: 16px; align-items: center;
}
.yoklama-defter-kolonlar {
  flex: 0 0 auto; padding: 10px 24px; color: var(--text-soft); font-size: 11px;
  font-weight: 800; text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.yoklama-defter-listesi { overflow: auto; min-height: 180px; background: var(--surface); }
.yoklama-defter-satir { padding: 12px 24px; border-bottom: 1px solid var(--border); }
.yoklama-defter-satir:nth-child(even) { background: rgba(0,0,0,.018); }
.yoklama-defter-satir:hover { background: rgba(232,124,42,.045); }
.yoklama-defter-satir.yoklama-alindi {
  background: rgba(27,107,58,.07); box-shadow: inset 4px 0 0 var(--olbia-green);
}
.yoklama-defter-satir.yoklama-alindi:hover { background: rgba(27,107,58,.09); }
.yoklama-alindi-etiket {
  display: inline-block; margin-top: 5px; padding: 3px 7px;
  border: 1px solid rgba(27,107,58,.25); border-radius: 5px;
  background: rgba(27,107,58,.1); color: var(--olbia-green);
  font-size: 10px; font-weight: 800;
}
.yoklama-defter-satir.yoklama-alindi .yk-durum:disabled {
  cursor: not-allowed; opacity: .5;
}
.yoklama-defter-satir.yoklama-alindi .yk-durum.aktif:disabled { opacity: 1; }
.yoklama-defter-satir.yoklama-alindi .yk-not:disabled,
.yoklama-genel-not .input:disabled {
  background: var(--bg-soft); color: var(--text-soft); cursor: not-allowed;
}
.yoklama-kilit-bilgi {
  padding: 9px 12px; border-radius: 5px; background: rgba(27,107,58,.1);
  color: var(--olbia-green); font-size: 12px; font-weight: 800;
}
.modal.yoklama-plan-uyari { width: min(560px, 100%); border-radius: 8px; }
.yoklama-plan-uyari-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 16px;
}
.yoklama-plan-uyari-head h3 { margin: 0; color: var(--text); }
.yoklama-plan-uyari p { line-height: 1.55; }
.yoklama-plan-eksikler {
  margin: 18px 0; padding: 14px 16px; border-left: 4px solid var(--olbia-orange);
  background: rgba(247,125,25,.09); color: var(--text); font-weight: 800;
}
.yoklama-plan-uyari-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px;
}
.yk-sira {
  width: 26px; color: var(--text-soft); font-size: 12px; font-weight: 800;
  text-align: right; flex: 0 0 auto;
}
.yoklama-defter-footer {
  flex: 0 0 auto; display: flex; align-items: end; gap: 18px; padding: 16px 24px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.yoklama-genel-not { flex: 1; margin: 0; }
.yoklama-defter-actions { display: flex; align-items: center; gap: 9px; }

@media (max-width: 900px) {
  .yoklama-defter-bg { padding: 10px; }
  .modal.yoklama-defter-modal { max-height: calc(100dvh - 20px); }
  .yoklama-defter-ozet, .yoklama-defter-footer { align-items: stretch; flex-direction: column; }
  .yoklama-defter-kolonlar { display: none; }
  .yoklama-defter-satir { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  .yoklama-defter-actions { flex-wrap: wrap; }
  .yoklama-defter-actions .muted { width: 100%; }
}
.yk-not { min-width: 170px; }
.yoklama-listesi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.yoklama-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: .15s;
}
.yoklama-card:hover {
  border-color: rgba(247,125,25,.42); transform: translateY(-1px); box-shadow: var(--shadow-md);
}
.yoklama-card b { display: block; margin-bottom: 4px; }
.yoklama-card span { color: var(--text-soft); font-size: 12px; }

@media (max-width: 980px) {
  .yoklama-form { grid-template-columns: 1fr 1fr; }
  .yoklama-form .btn { grid-column: 1 / -1; }
  .yoklama-active-top { flex-direction: column; }
  .yk-sayim { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .yoklama-form { grid-template-columns: 1fr; }
  .yk-durumlar { grid-template-columns: repeat(2, minmax(108px, 1fr)); }
}

/* ==========================================================================
   ÇALIŞMA SERİSİ                                                     [FAZ 7]
   ========================================================================== */
.seri-kart {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--olbia-orange, #E87C2A);
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 22px;
}
.seri-kart.sonuk { border-left-color: var(--border); opacity: .85; }
.seri-kart.uyari {
  border-left-color: var(--olbia-orange);
  background: linear-gradient(90deg, rgba(232,124,42,.06), transparent 60%);
}
.seri-kart.aktif {
  background: linear-gradient(90deg, rgba(255,112,67,.09), transparent 60%);
}
.sk-alev { font-size: 30px; flex: 0 0 auto; letter-spacing: -4px; }
.sk-govde { flex: 1; min-width: 0; }
.sk-baslik { font-size: 17px; font-weight: 800; }
.sk-metin { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.sk-sag { display: flex; gap: 10px; flex: 0 0 auto; }
.sk-kutu {
  text-align: center; background: var(--bg-soft, rgba(0,0,0,.04));
  border-radius: var(--r-md); padding: 8px 14px; min-width: 66px;
}
.sk-kutu b { display: block; font-size: 17px; }
.sk-kutu span { font-size: 10.5px; color: var(--text-soft); }

/* ==========================================================================
   ROZETLER
   ========================================================================== */
.rozet-ozet {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 16px; font-size: 14px; flex-wrap: wrap;
}
.rozet-ozet b { font-size: 19px; color: var(--olbia-orange); }
.acilis-koleksiyon-karti {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--olbia-green);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.acilis-koleksiyon-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.acilis-koleksiyon-ust h4 { margin: 3px 0 0; font-size: 17px; }
.acilis-koleksiyon-onizleme {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 9px;
  align-items: stretch;
}
.acilis-koleksiyon-onizleme .rozet-kutu { padding: 10px 7px; }
.rozet-kutu[data-acilis-detay] { cursor: pointer; }
.rozet-kutu[data-acilis-detay]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--olbia-orange) 45%, transparent);
  outline-offset: 2px;
}
.acilis-detay-modal { width: min(540px, 100%); }
.acilis-detay-rozet {
  width: 128px;
  height: 128px;
  margin: 22px auto;
  display: grid;
  place-items: center;
  font-size: 62px;
}
.acilis-detay-rozet .asset-sprite { width: 112px; }
.acilis-detay-bilgiler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acilis-detay-bilgiler > div { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.acilis-detay-bilgiler > div:nth-child(odd) { border-right: 1px solid var(--border); }
.acilis-detay-bilgiler > div:nth-last-child(-n+2) { border-bottom: 0; }
.acilis-detay-bilgiler dt { font-size: 11px; color: var(--text-soft); margin-bottom: 3px; }
.acilis-detay-bilgiler dd { margin: 0; font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.rozet-tumu-satir {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.rozet-tumu-satir .btn {
  min-width: 180px;
}
.rozet-tumu-modal {
  width: min(1120px, 100%) !important;
  max-height: min(88vh, 900px);
  overflow: auto;
}
.rozet-modal-ozet {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
}
.rozet-tumu-gruplar {
  display: grid;
  gap: 22px;
}
.rozet-tumu-grup {
  min-width: 0;
}
.rozet-tumu-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.rozet-form-head {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
}
.rozet-yon-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(240px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.rozet-search { position: relative; display: block; }
.rozet-search > span {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 20px;
  pointer-events: none;
}
.rozet-search .input { width: 100%; padding-left: 40px; }
.rozet-form-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12px;
}
@media (max-width: 720px) {
  .rozet-yon-toolbar { grid-template-columns: 1fr; }
  .rozet-yon-toolbar .btn { width: 100%; }
}

.rozet-form-preview {
  width: 112px;
  height: 112px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  display: grid;
  place-items: center;
}

.rozet-form-img {
  width: 88px;
  height: 88px;
}

.rozet-izgara {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
}
.rozet-kutu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 15px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform .15s, box-shadow .15s;
}
.rozet-kutu.kazanildi {
  border-color: var(--rz, var(--olbia-orange));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rz, #E87C2A) 10%, transparent), transparent 70%);
}
.rozet-kutu.kazanildi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.rozet-kutu.kilitli { opacity: .72; }
.rozet-kutu.kilitli .rk-ikon { filter: grayscale(1); opacity: .55; }

.rk-ikon {
  min-height: 62px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1.1;
}
.rk-ikon .asset-sprite { width: 64px; }
.rozet-kutu.kilitli .asset-badge,
.rozet-kutu.kilitli .asset-badge18 {
  filter: grayscale(1) opacity(.55) drop-shadow(0 8px 10px rgba(20, 18, 14, .10));
}
.rk-ad { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.rk-atlama {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
  min-height: 14px;
}
.rk-alt { font-size: 10.5px; color: var(--text-soft); }
.rk-cubuk {
  width: 100%; height: 5px; border-radius: 99px;
  background: var(--border); overflow: hidden; margin-top: 3px;
}
.rk-cubuk span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--olbia-orange, #E87C2A); transition: width .4s ease;
}

/* Kutlama penceresi */
.rozet-kutlama { text-align: center; }
.rkut-ust { margin-bottom: 18px; }
.rkut-ikonlar { font-size: 40px; display: flex; gap: 8px; justify-content: center; }
.rkut-ikonlar .asset-sprite { width: 64px; }
.rkut-ikonlar span { animation: rozetGir .5s cubic-bezier(.34,1.56,.64,1) backwards; }
.rkut-ikonlar span:nth-child(2) { animation-delay: .1s; }
.rkut-ikonlar span:nth-child(3) { animation-delay: .2s; }
@keyframes rozetGir {
  from { transform: scale(0) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.rkut-liste { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.rkut-satir {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--rz, var(--olbia-orange));
  border-radius: var(--r-md); padding: 11px 14px;
}
.rkut-satir .rk-ikon { min-height: 42px; font-size: 24px; }
.rkut-satir .rk-ikon .asset-sprite { width: 42px; }
.rkut-metin { flex: 1; display: flex; flex-direction: column; }
.rkut-metin b { font-size: 14px; }
.rkut-metin span { font-size: 12px; color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  .rkut-ikonlar span { animation: none; }
}
@media (max-width: 860px) {
  .avatar-crop-layout { grid-template-columns: 1fr; }
  .avatar-crop-stage { margin: 0 auto; }
}
@media (max-width: 640px) {
  .seri-kart { flex-wrap: wrap; }
  .sk-sag { width: 100%; }
  .sk-kutu { flex: 1; }
  .rozet-izgara { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .rozet-tumu-modal {
    width: min(100%, calc(100vw - 18px)) !important;
    max-height: 88vh;
  }
  .rozet-tumu-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
  .rozet-form-head { grid-template-columns: 1fr; }
  .acilis-koleksiyon-ust { align-items: flex-start; flex-direction: column; }
  .acilis-koleksiyon-onizleme { grid-template-columns: repeat(3, minmax(82px, 1fr)); }
  .acilis-detay-bilgiler { grid-template-columns: 1fr; }
  .acilis-detay-bilgiler > div,
  .acilis-detay-bilgiler > div:nth-child(odd),
  .acilis-detay-bilgiler > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--border); }
  .acilis-detay-bilgiler > div:last-child { border-bottom: 0; }
  .rozet-form-preview { margin: 0 auto; }
  .modal.avatar-modal {
    width: min(100%, calc(100vw - 18px));
    padding: 18px;
  }
}

/* ==========================================================================
   BAŞVURU FORMU                                                      [FAZ 8]
   ========================================================================== */
/* Bot tuzağı: ekran okuyucudan ve gözden gizli ama DOM'da var.
   display:none kullanmıyoruz — bazı botlar onu atlıyor. */
.tuzak {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
  pointer-events: none;
}
.zorunlu { color: var(--danger, #c73a3a); }

.gun-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.gun-kutu {
  position: relative; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 9px 15px; font-size: 13.5px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.gun-kutu input { position: absolute; opacity: 0; width: 0; height: 0; }
.gun-kutu:hover { border-color: var(--olbia-orange); }
.gun-kutu:has(input:checked) {
  border-color: var(--olbia-orange, #E87C2A);
  background: rgba(232,124,42,.12);
  color: #c56516;
}
/* :has desteklemeyen tarayıcılar için yedek — JS sınıf eklemiyoruz ama
   en azından odak halkası görünür kalıyor */
.gun-kutu input:focus-visible + span { outline: 2px solid var(--olbia-orange); outline-offset: 3px; }

.kvkk-kutu {
  background: var(--bg-soft, rgba(0,0,0,.03));
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px 18px;
}
.kvkk-metin {
  font-size: 12.5px; line-height: 1.7; color: var(--text-soft);
  max-height: 170px; overflow-y: auto;
}

/* ==========================================================================
   BAŞVURU HUNİSİ (yönetim)
   ========================================================================== */
.huni { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.huni-adim {
  flex: 1; min-width: 116px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 8px; cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.huni-adim:hover { border-color: var(--olbia-orange); transform: translateY(-2px); }
.huni-adim.active { border-color: var(--olbia-orange); background: rgba(232,124,42,.08); }
.huni-adim .ha-sayi { font-size: 21px; font-weight: 800; }
.huni-adim .ha-ad { font-size: 11.5px; color: var(--text-soft); }

.basvuru-listesi { display: flex; flex-direction: column; gap: 12px; }
.basvuru-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.basvuru-kart.asama-mavi    { border-left-color: #3b7dd8; }
.basvuru-kart.asama-turuncu { border-left-color: var(--olbia-orange, #E87C2A); }
.basvuru-kart.asama-yesil   { border-left-color: var(--olbia-green, #1B6B3A); }
.basvuru-kart.asama-gri     { border-left-color: var(--border); opacity: .68; }

.bk-kim { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bk-ogrenci { font-size: 16px; font-weight: 800; }
.bk-veli { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.bk-bilgi { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; }
.bk-etiket {
  background: var(--bg-soft, rgba(0,0,0,.04)); border-radius: 99px;
  padding: 3px 10px; color: var(--text-soft);
}
.bk-iletisim { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.bk-iletisim a { color: var(--olbia-orange); }

/* Başvuru detayındaki form verileri */
.bd-form-bilgileri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.bd-bolum {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.bd-bolum-baslik {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(27,107,58,.045);
}
.bd-bolum-baslik h4 {
  margin: 0;
  color: var(--olbia-green);
  font-size: 13.5px;
  font-weight: 850;
}
.bd-bolum-baslik p {
  margin: 3px 0 0;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.45;
}
.bd-bilgi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.bd-bilgi {
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.bd-bilgi:nth-child(odd) { border-right: 1px solid var(--border); }
.bd-bilgi:nth-last-child(-n+2) { border-bottom: 0; }
.bd-bilgi.bd-genis {
  grid-column: 1 / -1;
  border-right: 0;
}
.bd-bilgi dt {
  margin: 0 0 4px;
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
}
.bd-bilgi dd {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bd-bilgi a { color: var(--olbia-green); text-decoration: none; }
.bd-bilgi a:hover { text-decoration: underline; }
.bd-form-notu {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--olbia-orange);
  background: rgba(232,124,42,.06);
}
.bd-form-notu span {
  display: block;
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.bd-form-notu p { margin: 5px 0 0; line-height: 1.55; }

.zaman-cizgi { display: flex; flex-direction: column; gap: 0; }
.zc-satir { display: flex; gap: 12px; padding: 9px 0; }
.zc-nokta {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 99px;
  background: var(--olbia-orange); margin-top: 6px; position: relative;
}
.zc-satir:not(:last-child) .zc-nokta::after {
  content: ''; position: absolute; left: 4px; top: 12px;
  width: 1px; height: calc(100% + 14px); background: var(--border);
}
.zc-govde { flex: 1; min-width: 0; }
.zc-metin { font-size: 13px; line-height: 1.55; }
.zc-alt { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }

@media (max-width: 640px) {
  .huni-adim { min-width: 90px; }
  .bk-kim { flex-wrap: wrap; }
  .bd-form-bilgileri { grid-template-columns: 1fr; }
  .bd-bilgi-grid { grid-template-columns: 1fr; }
  .bd-bilgi,
  .bd-bilgi:nth-child(odd),
  .bd-bilgi:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .bd-bilgi:last-child { border-bottom: 0; }
}

/* ==========================================================================
   WEB SİTESİ İŞLEMLERİ (yönetim)
   ========================================================================== */
.webops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.webops-wide { grid-column: 1 / -1; }
.webops-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.98)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}
.webops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.webops-head h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}
.webops-head span {
  background: rgba(27,107,58,.08);
  color: var(--olbia-green);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.web-path-list,
.web-ban-list,
.web-visit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.web-path-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(216,207,190,.78);
  border-radius: var(--r-md);
  background: rgba(250,247,240,.72);
}
.web-path-rank {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--olbia-green);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
}
.web-path-main { min-width: 0; }
.web-path-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.web-path-top b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.web-path-top span,
.web-path-sub {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.web-path-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(216,207,190,.7);
  overflow: hidden;
  margin: 8px 0 5px;
}
.web-path-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--olbia-green), var(--olbia-orange));
}
.web-visit-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(216,207,190,.72);
  border-radius: var(--r-md);
  background: #fff;
}
.web-visit-time {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}
.web-visit-page {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.web-visit-page b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.web-visit-page span,
.web-ban-date,
.web-ban-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.web-visit-id {
  border-radius: 999px;
  background: rgba(27,107,58,.09);
  color: var(--olbia-green);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.web-ban-card {
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  padding: 14px 16px;
}
.web-ban-card.is-active { border-left-color: var(--danger, #c73a3a); background: #fffafa; }
.web-ban-card.is-passive { opacity: .72; }
.web-ban-title {
  font-size: 15px;
  font-weight: 850;
  color: var(--text);
  margin-bottom: 4px;
}
.web-empty {
  min-height: 118px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: rgba(250,247,240,.5);
  color: var(--text-muted);
  font-weight: 750;
  padding: 18px;
}
.web-empty.danger-soft {
  background: rgba(199,58,58,.04);
}

@media (max-width: 900px) {
  .webops-grid { grid-template-columns: 1fr; }
  .web-visit-row { grid-template-columns: 1fr; gap: 7px; }
  .web-visit-id { width: fit-content; }
}

/* ==========================================================================
   ÖDEMELER                                                           [FAZ 9]
   ========================================================================== */
/* Para her yerde aynı hizada okunsun — tabular rakamlar kaymayı önlüyor */
.para, .num.para, .s-val.para {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
.s-val.para { font-size: 19px; }

.basvuru-kart.asama-kirmizi { border-left-color: var(--danger, #c73a3a); }

.odeme-tutar { display: flex; gap: 10px; flex-wrap: wrap; }
.ot-kutu {
  flex: 1; min-width: 108px;
  background: var(--bg-soft, rgba(0,0,0,.03));
  border-radius: var(--r-md); padding: 10px 13px;
  display: flex; flex-direction: column; gap: 2px;
}
.ot-kutu span { font-size: 11px; color: var(--text-soft); }
.ot-kutu b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ot-kutu b.yesil { color: var(--olbia-green, #1B6B3A); }
.ot-kutu.vurgu {
  background: rgba(232,124,42,.1);
}
.ot-kutu.vurgu b { color: #c56516; }

.abone-kart {
  border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.abone-kart.tamam    { border-left-color: var(--olbia-green, #1B6B3A); }
.abone-kart.bekliyor { border-left-color: var(--olbia-orange, #E87C2A); }
.abone-kart.gecikti  { border-left-color: var(--danger, #c73a3a); }
.ak-ust { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ak-plan { font-size: 15.5px; font-weight: 800; }
.ak-tarih { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }

.tbl tr.iade { opacity: .75; }
.tbl .num.kirmizi { color: var(--danger, #c73a3a); }

@media (max-width: 640px) {
  .ot-kutu { min-width: 90px; }
  .s-val.para { font-size: 16px; }
}

/* ==========================================================================
   GELİŞİM GRAFİKLERİ                                                [FAZ 11]
   ========================================================================== */
.grafik-sekme { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.gs-btn {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 99px; padding: 6px 13px; font-size: 12.5px;
  cursor: pointer; font: inherit; font-size: 12.5px;
  transition: border-color .15s, background .15s;
}
.gs-btn:hover { border-color: var(--olbia-orange); }
.gs-btn.active {
  border-color: var(--olbia-orange); background: rgba(232,124,42,.12);
  font-weight: 700;
}

.grafik { width: 100%; height: auto; display: block; }
.gr-izgara { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.gr-etiket { font-size: 10.5px; fill: var(--text-soft); font-family: inherit; }
.gr-son { filter: drop-shadow(0 0 4px currentColor); }

.gr-alt {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.gr-simdi {
  font-size: 13.5px; background: color-mix(in srgb, var(--c) 12%, transparent);
  border-radius: 99px; padding: 5px 13px;
}
.gr-simdi b { font-variant-numeric: tabular-nums; }

.gr-degisim {
  margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px;
}
.grd-baslik { font-size: 12px; color: var(--text-soft); margin-bottom: 9px; }
.grd-satirlar {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grd-kutu {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg-soft, rgba(0,0,0,.03));
  border-radius: var(--r-md); padding: 8px 12px; font-size: 12.5px;
}
.grd-kutu b { font-variant-numeric: tabular-nums; }
.grd-kutu b.artis  { color: var(--olbia-green, #1B6B3A); }
.grd-kutu b.azalis { color: var(--danger, #c73a3a); }

/* ==========================================================================
   HAFTALIK ÖZET
   ========================================================================== */
.ozet-kart {
  background: linear-gradient(135deg, rgba(232,124,42,.08), transparent 60%),
              var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--olbia-orange);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 20px;
}
.oz-ust {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 14px;
}
.oz-baslik { font-size: 16px; font-weight: 800; }
.oz-tarih { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.oz-satirlar {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.oz-satir { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.oz-ikon { font-size: 17px; }
.oz-sayi { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oz-metin { color: var(--text-soft); }
.oz-rozetler {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* ==========================================================================
   LİCHESS ÖDEV İLERLEMESİ
   ========================================================================== */
.lichess-ilerleme {
  background: rgba(59,125,216,.07); border-radius: var(--r-md);
  padding: 10px 13px; display: flex; flex-direction: column; gap: 7px;
}
.li-ust {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 13px;
}
.li-ust b { font-variant-numeric: tabular-nums; }
.li-alt { font-size: 11.5px; color: var(--text-soft); }

/* ==========================================================================
   GÖMÜLÜ BAŞVURU FORMU
   ========================================================================== */
body.gomulu { background: transparent; }
body.gomulu .topbar, body.gomulu .footer-strip { display: none; }
body.gomulu .page { padding-top: 12px; max-width: 100%; }
body.gomulu .page-head { margin-bottom: 18px; }

@media (max-width: 640px) {
  .oz-satirlar { grid-template-columns: 1fr 1fr; }
  .grd-satirlar { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GERİ DÖN BAĞLANTISI + MOBİL DOKUNMA HEDEFLERİ
   ========================================================================== */

/* Menüde yeri olmayan sayfalarda (Lichess tahtası, rapor) başlığın üstünde
   duruyor. Telefonda tarayıcının geri düğmesi her zaman görünmediği için
   sayfanın kendi çıkış yolu olması gerekiyor. */
.geri-don {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 12px; padding: 8px 15px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: .18s;
  min-height: 38px;
}
.geri-don span { font-size: 16px; line-height: 1; transition: transform .18s; }
.geri-don:hover {
  border-color: var(--olbia-green);
  color: var(--olbia-green);
  box-shadow: var(--shadow-sm);
}
.geri-don:hover span { transform: translateX(-3px); }
.geri-don:focus-visible { outline: 2px solid var(--olbia-orange); outline-offset: 2px; }

/* Koyu zeminli Lichess sayfalarında da okunur kalsın */
.lichess-board-page .geri-don {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
}

@media (max-width: 720px) {
  /* Parmakla basılan her şey en az ~44px olsun (WCAG 2.5.8 asgari 24px,
     Apple/Google önerisi 44px). Masaüstünde fareyle 30px sorun değil,
     telefonda yanlış düğmeye basılıyor. */
  .btn-sm { padding: 10px 16px; font-size: 13px; min-height: 42px; }
  .lichess-mode-tabs button { min-height: 44px; }
  .lichess-seek-tabs button { min-height: 42px; }
  .geri-don { min-height: 42px; padding-block: 10px; }

  /* Geri düğmesi ekranın soluna yapışmasın, başlıkla aynı hizada dursun */
  .page-head .geri-don { margin-bottom: 14px; }
}

@media (max-width: 420px) {
  /* Üç sekme 320px ekranda sıkışıyor; alt alta değil, daha dar yazıyla */
  .lichess-seek-tabs button { padding-inline: 6px; font-size: 12px; }
  .lichess-mode-tabs button { font-size: 13px; }
}

@media (max-width: 400px) {
  /* Rol seçimi: iki kart 320px ekranda sıkışıyor, alt alta daha okunur */
  .role-pick { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BAŞVURU SAYFASI — ÜST BAR
   ========================================================================== */

/* Başvuru halka açık bir sayfa. "Öğrenci Paneli / Ödevlerim / Mağaza /
   Liderlik" bağlantıları girişsiz ziyaretçiye anlamsız; hepsi giriş
   ekranına çarpıyor. Menüyü kapatıyoruz ama üst barın kendisi kalıyor —
   logo ve "Giriş Yap" düğmesi yerinde duruyor.

   Sağa yaslamayı normalde .nav'ın margin-left:auto'su yapıyor. Menüyü
   kaldırınca o dayanak da gider ve "Giriş Yap" logonun dibine kayardı.
   Bu yüzden itmeyi markaya devrediyoruz: brand'e margin-right:auto
   koyunca kendisinden sonraki HER ŞEY sağa yaslanıyor — ziyaretçide
   yalnız giriş düğmesi, girişli kullanıcıda OP + zil + hesap çipi. */
body[data-sayfa="basvuru"] .topbar .nav { display: none; }
body[data-sayfa="basvuru"] .topbar-inner > .brand { margin-right: auto; }

/* Başka bir öğrencinin raporuna bakıldığını belirten şerit */
.rapor-kimin {
  display: inline-block; margin-top: 8px;
  padding: 5px 13px; border-radius: 999px;
  background: var(--olbia-orange-soft); color: var(--olbia-orange-dark);
  font-size: 13.5px; font-weight: 600;
}

/* ==========================================================================
   GENİŞLETİLMİŞ LICHESS RAPORU
   ========================================================================== */

/* ---- Koç özeti ---- */
.koc-blok {
  background: linear-gradient(140deg, var(--olbia-green-dark), var(--olbia-green) 65%);
  border-radius: var(--r-lg); padding: 22px 24px 24px; color: #fff;
  box-shadow: var(--shadow-md);
}
.koc-baslik { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.koc-ikon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 21px;
}
.koc-baslik h3 { font-size: 19px; font-weight: 800; color: #fff; }
.koc-baslik p { font-size: 13px; color: rgba(255,255,255,.72); margin: 3px 0 0; }

.koc-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px; }
.koc-kart {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 15px 16px;
}
.koc-kart.k0 { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); }
.koc-etiket {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--olbia-orange); margin-bottom: 6px;
}
.koc-kart.k0 .koc-etiket { color: #FFC98A; }
.koc-kart b { display: block; font-size: 15px; margin-bottom: 6px; line-height: 1.35; }
.koc-kart p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0; }

/* ---- Oran çubuğu (renk performansı, evre dağılımı) ---- */
.oran-cubuk {
  height: 6px; border-radius: 999px; background: var(--surface-2, #F0EDE6);
  overflow: hidden; margin: 2px 0 12px;
}
.oran-cubuk span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--olbia-green); transition: width .3s;
}
.oran-cubuk span.siyah { background: var(--text-muted); }

/* ---- Tema oranları ---- */
.tema-oran { font-weight: 800; }
.tema-oran.iyi   { color: var(--olbia-green); }
.tema-oran.zayif { color: var(--olbia-orange-dark); }

/* ---- Tema bulutu ---- */
.tema-bulutu { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-etiket {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--olbia-green-soft); color: var(--olbia-green);
  font-size: 13px; font-weight: 600;
}
.tema-etiket b {
  background: var(--olbia-green); color: #fff;
  min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px; font-size: 11.5px;
}

/* Sayı kutusunun altındaki küçük açıklama */
.s-not { font-size: 10.5px; color: var(--text-soft); margin-top: 2px; }

@media (max-width: 720px) {
  .koc-blok { padding: 18px 16px 20px; }
  .koc-kartlar { grid-template-columns: 1fr; }
  .rapor-kimin { font-size: 12.5px; }
}

/* ==========================================================================
   YAZDIRMA — veliye verilecek rapor
   ========================================================================== */
@media print {
  /* Ekrana ait olan her şey gider: menü, düğmeler, alt bilgi */
  .topbar, #topbar, #footer, .geri-don,
  .lichess-report-head .flex:last-child,
  #btnYazdir, .zil-sarmal, .user-chip, .user-menu { display: none !important; }

  body { background: #fff; }
  .page { padding: 0; max-width: none; }

  /* Renkli zeminler yazıcıda gri lekeye dönüyor; koç özetini
     çerçeveli beyaz kutuya çeviriyoruz. */
  .koc-blok { background: #fff !important; color: #000; border: 2px solid #999; }
  .koc-baslik h3, .koc-kart b { color: #000; }
  .koc-baslik p, .koc-kart p { color: #333; }
  .koc-kart { background: #fff !important; border: 1px solid #bbb; }
  .koc-etiket, .koc-kart.k0 .koc-etiket { color: #666; }
  .koc-ikon { display: none; }

  .card, .stat, .note { box-shadow: none; border: 1px solid #ddd; }
  .card, .koc-blok, table, figure, .grid { break-inside: avoid; }
  .section-title { break-after: avoid; }

  /* Tabloların yatay kaydırması yazdırmada işe yaramaz */
  .table-wrap { overflow: visible; }
  table.tbl { min-width: 0; font-size: 10.5px; }

  /* Bağlantı adresleri kâğıtta görünmez, o yüzden altını çizmiyoruz */
  a { text-decoration: none; color: #000; }
}

/* Ödevde başarı oranı koşulu tutmuyorsa uyarı rengi */
.li-alt.eksik { color: var(--olbia-orange-dark); font-weight: 600; }

/* Sol raydaki tema kısayolları: <button> ama bağlantı gibi görünmeli */
.menu-card button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 9px 0; color: inherit;
  border-top: 1px solid rgba(255, 255, 255, .07);
  transition: .15s;
}
.menu-card button:first-of-type { border-top: 0; }
.menu-card button:hover { color: var(--olbia-orange); padding-left: 4px; }
.menu-card button:focus-visible {
  outline: 2px solid var(--olbia-orange); outline-offset: 2px;
}
.menu-card .rail-not {
  display: block; font-size: 11.5px; line-height: 1.45;
  color: #8F897E; margin: 4px 0 8px;
}
@media (max-width: 720px) {
  .menu-card button { min-height: 42px; }
}

/* Üyelik listesinde "öğrenci kaydı" eşleştirmesi.
   Etiketsiz açılır liste ne işe yaradığını anlatmıyordu. */
.esles-alan { display: inline-flex; flex-direction: column; gap: 3px; }
.esles-etiket {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-soft); padding-left: 4px;
}
.esles-alan[title] { cursor: help; }

/* Bağlı öğrenci kaydı: düz yazı + "Değiştir" bağlantısı.
   Sürekli açık açılır liste hem gürültüydü hem kaza riskiydi. */
.esles-ozet {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px;
}
.esles-ozet b { font-weight: 700; }
.esles-degistir {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--olbia-green);
  text-decoration: underline; text-underline-offset: 2px;
}
.esles-degistir:hover { color: var(--olbia-orange-dark); }
.esles-degistir:focus-visible {
  outline: 2px solid var(--olbia-orange); outline-offset: 2px; border-radius: 4px;
}

/* Kayıt bağlı değilse dikkat çeksin — burada gerçekten iş var */
.esles-etiket.uyari { color: var(--olbia-orange-dark); }
.esles-alan.esles-eksik .select { border-color: var(--olbia-orange); }

@media (max-width: 720px) {
  .esles-degistir { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---- Rapordaki Lichess görev kartları ---- */
.lichess-gorev-kart .gorev-sayi { font-size: 15px; margin: 4px 0 8px; }
.lichess-gorev-kart .gorev-sayi b { font-size: 26px; font-weight: 800; }
.lichess-gorev-kart .gorev-sayi span { color: var(--text-soft); font-size: 13px; }
.lichess-gorev-kart .gorev-not { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.oran-cubuk span.yakin { background: var(--olbia-orange); }

/* Tempo satırındaki rating değişimi */
.lichess-report-row .rd { display: block; font-size: 11px; font-weight: 700; color: var(--text-soft); }
.lichess-report-row .rd.arti { color: var(--olbia-green); }
.lichess-report-row .rd.eksi { color: #C0392B; }

/* Tablo hücrelerindeki ikincil satır */
table.tbl .s-not { font-size: 11px; color: var(--text-soft); margin-top: 2px; font-weight: 500; }
table.tbl .s-not.eksi { color: #C0392B; }

@media print {
  .lichess-gorev-kart { break-inside: avoid; }
}

/* Rapor açılıyor ama Lichess verisi gelmiyorsa: hatanın kiminle ilgili
   olduğunu ve ne yapılacağını anlatan kart */
.rapor-hata-kart {
  border-left: 4px solid var(--olbia-orange);
  margin-bottom: 20px;
}
.rapor-hata-kart .card-head h3 { font-size: 16px; }
.rapor-hata-kart .note { margin-bottom: 6px; }

/* Lichess bağlantısı kaldırma penceresi — ne kaybedileceğini sayan liste */
.kopar-liste {
  margin: 0; padding-left: 20px;
  font-size: 13.5px; line-height: 1.7; color: var(--text-muted);
}
.kopar-liste li::marker { color: var(--olbia-orange); }
.kopar-liste li b { color: var(--olbia-green); }

/* Tehlikeli ikincil düğme: çerçeveli ama kırmızı yazılı */
.btn-ghost.danger { color: #C0392B; border-color: #E3B4AE; }
.btn-ghost.danger:hover { background: #FDF0EE; border-color: #C0392B; }

/* ==========================================================================
   LICHESS MASASI — AÇIK TEMA
   --------------------------------------------------------------------------
   Sayfa ilk yazıldığında lichess.org'un koyu görünümü taklit edilmişti.
   Sistemin geri kalanı krem zeminli açık tema olduğu için bu ekran
   sitenin içinde yabancı duruyordu — ayrıca panelden buraya geçerken
   göz her seferinde karanlığa uyum sağlamak zorunda kalıyordu.

   Aşağıdaki kurallar koyu değerlerin üzerine yazıyor. Eski kuralları
   silmek yerine ezmeyi seçtim: bir gün koyu tema seçeneği istenirse
   bu blok kaldırılınca geri gelir.
   ========================================================================== */

.lichess-board-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
  border-radius: var(--r-lg);
}

/* ---- Sol ray ---- */
.lichess-rail-card {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-md);
}
.lichess-rail-card strong { color: var(--text); }
.lichess-rail-card span   { color: var(--text-muted); }
.lichess-rail-card .rail-icon {
  color: var(--olbia-green);
  border-color: var(--olbia-green-soft);
  background: var(--surface);
}
.lichess-rail-card.score b { color: var(--olbia-orange); }
.lichess-rail-card.menu-card a,
.lichess-rail-card.menu-card button {
  color: var(--text-muted);
  border-top-color: var(--border);
}
.lichess-rail-card.menu-card a:hover,
.lichess-rail-card.menu-card button:hover { color: var(--olbia-orange); }
.menu-card .rail-not { color: var(--text-soft); }

/* ---- Tahta üstü oyuncu şeritleri ---- */
.lichess-board-top strong { color: var(--text); }
.lichess-board-top span   { color: var(--text-muted); }
.lichess-clock {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.lichess-clock.active {
  background: var(--olbia-orange-soft);
  border-color: var(--olbia-orange);
  color: var(--olbia-orange-dark);
}

/* ---- Sağ kontrol paneli ---- */
.lichess-board-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.lichess-board-panel .card-head h3 { color: var(--text); }
.lichess-board-panel .btn-ghost {
  color: var(--olbia-green);
  border-color: var(--border-strong);
  background: var(--surface);
}
.lichess-board-panel .input,
.lichess-board-panel .select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.lichess-board-panel .note { background: var(--surface); color: var(--text-muted); }

.lichess-mode-tabs {
  background: var(--surface);
  border-color: var(--border);
}
.lichess-mode-tabs button { color: var(--text-muted); background: transparent; }
.lichess-mode-tabs button.active {
  background: var(--olbia-green);
  color: #fff;
}

.lichess-seek-tabs button { color: var(--text-muted); }
.lichess-seek-tabs button.active { color: var(--olbia-orange-dark); }
.lichess-seek-box { background: var(--surface); border: 1px solid var(--border); }
.lichess-seek-box strong { color: var(--text); }
.lichess-seek-box span   { color: var(--text-muted); }

.seek-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.seek-tile b { color: var(--olbia-green); }
.seek-tile small { color: var(--text-soft); }
.seek-tile:hover {
  border-color: var(--olbia-orange);
  color: var(--olbia-orange-dark);
  background: var(--olbia-orange-soft);
}

.lichess-puzzle-meta div { background: var(--surface); border: 1px solid var(--border); }
.lichess-puzzle-meta b    { color: var(--text-soft); }
.lichess-puzzle-meta span { color: var(--text); }

.lichess-move-list { background: var(--surface); border: 1px solid var(--border); }
.lichess-move-list > div { border-top-color: var(--border); }
.lichess-move-list b { color: var(--text-soft); }
.lichess-move-list .done span { color: var(--olbia-green); }

/* Tahtanın kendi çerçevesi: temanın koyu karesiyle aynı renk */
.olbia-chessboard {
  border: 6px solid var(--sq-dark, #B98B61);
  border-radius: var(--r-md);
}

/* Seçili kare ve son hamle işaretleri açık zeminde de görünsün */
.chess-square.selected { outline-color: var(--olbia-orange); }
.chess-square.last::after { background: rgba(232, 132, 43, .55); }
.chess-square:not(:disabled):hover { box-shadow: inset 0 0 0 3px rgba(30, 107, 55, .28); }

@media (max-width: 560px) {
  .olbia-chessboard { border-width: 3px; }
}

/* ==========================================================================
   BULMACA ANTRENMAN PANELİ
   ========================================================================== */

/* ---- Üst şerit: rating, seri, sonraki ---- */
.lp-ust {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.lp-rozet {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px;
}
.lp-rozet span { color: var(--text-soft); }
.lp-rozet b { color: var(--text); font-size: 14px; font-weight: 800; }
.lp-ust .btn { margin-left: auto; }

/* ---- Bulmaca kimlik kartı ---- */
.lp-kart {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 10px;
}
.lp-kart-ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-tema-satiri { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lp-kod { margin-left: auto; font-size: 11.5px; color: var(--text-soft); }
.lp-gorev { font-size: 13.5px; color: var(--text); margin: 10px 0 0; line-height: 1.5; }
.lp-gorev b { color: var(--olbia-green); }

.lp-etiket {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.lp-etiket.mavi { background: #EEF4FA; border-color: #C3D7EA; color: #2C6BAF; }
.lp-etiket.sari { background: var(--olbia-orange-soft); border-color: #F0C99B;
                  color: var(--olbia-orange-dark); }

/* Çözümün kaç adımı tamam — Lichess'teki çizgilerin karşılığı */
.lp-adimlar { display: flex; gap: 6px; margin-top: 10px; }
.lp-adimlar i {
  width: 26px; height: 5px; border-radius: 999px;
  background: var(--border); transition: background .2s;
}
.lp-adimlar i.dolu { background: var(--olbia-green); }

/* ---- Geliştirilecek temalar ---- */
.lp-zayif {
  background: var(--olbia-orange-soft); border: 1px solid #F0C99B;
  border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 10px;
}
.lp-zayif > b {
  display: block; font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--olbia-orange-dark); margin-bottom: 7px;
}
.lp-zayif #lpZayifListe { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Bölüm başlıkları ---- */
.lp-baslik {
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-soft);
  margin: 16px 0 7px;
}

/* ---- Çözüm sonrası ---- */
.lp-sonuc {
  border-radius: var(--r-md); padding: 14px; margin: 12px 0;
  border: 1px solid var(--border); background: var(--surface);
}
.lp-sonuc.basarili { border-color: #A9CDB8; background: var(--olbia-green-soft); }
.lp-sonuc.yardimli { border-color: #F0C99B; background: var(--olbia-orange-soft); }
.lp-sonuc-ust { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.lp-sonuc-ikon { font-size: 20px; }
.lp-sonuc-ust b { font-size: 15px; color: var(--text); }
.lp-sonuc p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0 0 12px; }
.lp-sonuc-eylem { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---- Oturum sayaçları ---- */
.lp-oturum-sayilar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.lp-oturum-sayilar > div {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 8px; text-align: center;
}
.lp-oturum-sayilar b {
  display: block; font-size: 22px; font-weight: 800; color: var(--olbia-green);
}
.lp-oturum-sayilar span { font-size: 11px; color: var(--text-soft); }

/* ---- Tema ilerleme çubukları ---- */
.lp-tema-satir { margin-bottom: 10px; }
.lp-tema-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; margin-bottom: 4px;
}
.lp-tema-ust span { color: var(--text); font-weight: 600; }
.lp-tema-ust b { color: var(--text-soft); font-size: 11.5px; font-weight: 700; }

/* Oyun hamleleri listesi iki sütun */
#lpOyunHamleleri > div {
  display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px;
}
#lpOyunHamleleri { max-height: 190px; overflow-y: auto; }

@media (max-width: 720px) {
  .lp-ust .btn { margin-left: 0; width: 100%; }
  .lp-oturum-sayilar b { font-size: 19px; }
  .lp-adimlar i { width: 20px; }
  /* Hamle satırı üç sütun kalmalı (no · beyaz · siyah) ama numara
     sütunu daralabilir. */
  #lpOyunHamleleri > div { grid-template-columns: 26px 1fr 1fr; gap: 6px; }
}

/* ==========================================================================
   ADİL OYUN UYARISI
   --------------------------------------------------------------------------
   Kırmızı ve dikkat çekici, ama SUÇLAYICI değil. Alt nottaki "bu bir
   ölçüm sonucudur" cümlesi bilerek duruyor: yanlış alarmda çocuğa
   haksızlık etmemek, uyarının sertliğinden önemli.
   ========================================================================== */
.adil-uyari { border-top: 5px solid #C0392B; }
.adil-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adil-ikon { font-size: 30px; }
.adil-ust h3 { font-size: 19px; margin: 0; color: #C0392B; }

.adil-olcum {
  background: #FDF0EE; border: 1px solid #E3B4AE; border-radius: var(--r-md);
  padding: 11px 14px; font-size: 14px; color: #8E2B20; margin-bottom: 12px;
}
.adil-olcum b { font-weight: 800; }

.adil-metin { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }

.adil-not {
  font-size: 12.5px; line-height: 1.55; color: var(--text-soft);
  border-left: 3px solid var(--border-strong); padding-left: 11px;
}

@media (max-width: 720px) {
  .adil-ust h3 { font-size: 17px; }
  .adil-ikon { font-size: 26px; }
}

/* ==========================================================================
   OYUN İNCELEME — hamle listesi + motor değerlendirmesi
   ========================================================================== */
.oi-ust {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; font-size: 13.5px; margin-bottom: 4px;
}
.oi-acilis { font-size: 12.5px; color: var(--text-soft); margin-bottom: 12px; }

/* auto-fit: dar ekranda kendiliğinden sarıyor, ayrı medya kuralı
   gerekmiyor. Sabit 3 sütun 320px'de sayıları sıkıştırıyordu. */
.oi-ozet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.oi-ozet > div {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px; text-align: center;
}
.oi-ozet b { display: block; font-size: 18px; font-weight: 800; color: var(--olbia-green); }
.oi-ozet span { font-size: 11px; color: var(--text-soft); }

.oi-lejant { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 10px; }
.oi-lejant .sari    { color: #B8860B; }
.oi-lejant .turuncu { color: var(--olbia-orange-dark); }
.oi-lejant .kirmizi { color: #C0392B; }

.oi-liste {
  max-height: 44vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.oi-satir {
  display: grid; grid-template-columns: 38px 1fr 1fr;
  align-items: center; gap: 6px;
  padding: 5px 10px; border-top: 1px solid var(--border);
  font-size: 14px;
}
.oi-satir:first-child { border-top: 0; }
.oi-satir > b { color: var(--text-soft); font-size: 12px; font-weight: 700; }
.oi-satir > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* Figürin simgeleri metinden biraz büyük olmalı, yoksa harflerin
   yanında küçük kalıyor */
.oi-hamle { font-weight: 600; font-size: 15px; }
.oi-hamle i { font-style: normal; font-weight: 800; margin-left: 2px; }
.oi-hamle.sari    { color: #B8860B; }
.oi-hamle.turuncu { color: var(--olbia-orange-dark); }
.oi-hamle.kirmizi { color: #C0392B; }

/* Değerlendirme: kim önde. Renksiz = dengeli konum. */
.oi-puan {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-soft); font-weight: 700;
}
.oi-puan.beyaz { color: var(--olbia-green); }
.oi-puan.siyah { color: #C0392B; }
.oi-bos { color: var(--text-soft); }

@media (max-width: 720px) {
  .oi-liste { max-height: 50vh; }
  .oi-satir { font-size: 13.5px; }
  .oi-hamle { font-size: 14px; }
}

@media print { .oi-liste { max-height: none; } }

/* ---- Materyal dengesi (oyuncu adının altında) ----
   Devam eden oyunda motor puanı yok; bu bir SAYIM: kim kaç puanlık
   taş önde. Alınan taşlar küçük simgelerle gösteriliyor. */
.mat-serit {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; min-height: 16px;
}
.mat-tas {
  font-size: 15px; line-height: 1;
  color: var(--text-soft); letter-spacing: -3px;
}
.mat-arti {
  font-size: 12px; font-weight: 800;
  color: var(--olbia-green); font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .mat-tas { font-size: 13px; }
}

/* ==========================================================================
   TAŞ SETLERİ
   --------------------------------------------------------------------------
   SVG taşlar renklerini CSS'ten alıyor: dolgu currentColor, kontur
   --tas-kontur. Böylece aynı çizim hem beyaz hem siyah taşta
   kullanılıyor ve tahta teması taşları etkilemiyor.
   ========================================================================== */
.piece.tas-svg {
  display: block;
  width: clamp(34px, 6.6vw, 68px);
  height: clamp(34px, 6.6vw, 68px);
  /* SVG'de metin gölgesi işe yaramaz; derinliği filtre veriyor */
  text-shadow: none;
  -webkit-text-stroke-width: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
.piece.tas-img {
  display: block;
  width: clamp(34px, 6.6vw, 68px);
  height: clamp(34px, 6.6vw, 68px);
  text-shadow: none;
  -webkit-text-stroke-width: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}
.piece.tas-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.piece.tas-svg svg { width: 100%; height: 100%; display: block; }
.piece.tas-svg svg g {
  fill: currentColor;
  stroke: var(--tas-kontur);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
/* --tas-zemin: taştaki "oyuk" alanlar (atın gözü, filin yarığı).
   Taşın kendi renginin zıddı olmalı, yoksa oyuk görünmez. */
.piece.tas-svg.white { color: #FFFFFF; --tas-kontur: #14120E; --tas-zemin: #14120E; }
.piece.tas-svg.black { color: #14120E; --tas-kontur: rgba(255, 255, 255, .55); --tas-zemin: #F2EFE9; }

/* "Çizgi" ailesi dolgusuz — kontur taşın kendisi */
.piece.tas-svg[data-set="cizgi"] svg g,
.piece.tas-svg[data-set="cizgi_at"] svg g {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.piece.tas-svg[data-set="cizgi"].white,
.piece.tas-svg[data-set="cizgi_at"].white { color: #FFFFFF;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.piece.tas-svg[data-set="cizgi"].black,
.piece.tas-svg[data-set="cizgi_at"].black { color: #14120E;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .7)) drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }

/* ---- Sol raydaki seçici ---- */
.tas-set-listesi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px;
  max-height: 206px; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(247, 125, 25, .55) rgba(229, 220, 205, .65);
}
.tas-set-listesi::-webkit-scrollbar { width: 8px; }
.tas-set-listesi::-webkit-scrollbar-track {
  background: rgba(229, 220, 205, .65); border-radius: 999px;
}
.tas-set-listesi::-webkit-scrollbar-thumb {
  background: rgba(247, 125, 25, .65); border-radius: 999px;
}
.tas-sec {
  display: grid; justify-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  min-height: 64px;
  cursor: pointer; font: inherit; transition: .15s;
}
.tas-sec:hover { border-color: var(--olbia-orange); }
.tas-sec.secili {
  border-color: var(--olbia-green);
  background: var(--olbia-green-soft);
  box-shadow: inset 0 0 0 1px var(--olbia-green);
}
.tas-sec.kilitli { opacity: .55; }
.tas-sec.kilitli:hover { border-color: var(--border-strong); }
.tas-ad { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tas-sec.secili .tas-ad { color: var(--olbia-green); }

/* Önizlemede iki at yan yana — beyaz ve siyah birlikte görünsün */
.tas-onizleme { display: flex; align-items: center; gap: 2px; }
.tas-onizleme .piece { font-size: 26px; }
.tas-onizleme .piece.tas-svg,
.tas-onizleme .piece.tas-img { width: 26px; height: 26px; }
/* Zemin tüm setlerde olmalı — Klasik Unicode olduğu için .tas-svg
   sınıfı almıyor, onu dışarıda bırakırsak kartlar eşit görünmüyor. */
.tas-onizleme .piece.white { background: var(--sq-light, #F0D9B5); border-radius: 4px; }
.tas-onizleme .piece.black { background: var(--sq-dark, #B98B61); border-radius: 4px; }
.tas-onizleme .piece:not(.tas-svg) {
  width: 26px; height: 26px; line-height: 26px; text-align: center;
}

@media (max-width: 720px) {
  .tas-sec { min-height: 56px; }
}

/* Mağaza kartında taş seti önizlemesi — mini tahtanın üstünde iki taş */
.tas-prev-taslar {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
/* .board-prev .piece taşı absolute konumluyor; burada yan yana iki taş
   göstermek istiyoruz — o kuralı geri alıyoruz. */
.tas-prev-taslar .piece {
  position: static; inset: auto; display: block; font-size: 34px;
}
.tas-prev-taslar .piece.tas-svg,
.tas-prev-taslar .piece.tas-img { width: 38px; height: 38px; }

/* Yönetim > Öğrenci Dosyası */
.student-file { display: grid; gap: 18px; }
.student-file-hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  gap: 22px; align-items: center;
  padding: 30px; border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(20,89,101,.98) 0%, rgba(31,92,204,.96) 58%, rgba(105,174,255,.92) 100%);
  box-shadow: 0 18px 44px rgba(29, 88, 170, .18);
}
.student-file-pill {
  display: inline-flex; align-items: center; height: 28px; padding: 0 16px;
  border-radius: 999px; background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88); font-size: 11px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase;
}
.student-file-hero h2 {
  margin: 16px 0 8px; font-size: 34px; line-height: 1.08; color: #fff;
}
.student-file-hero p {
  margin: 0; max-width: 760px; color: rgba(255,255,255,.82); font-weight: 700; line-height: 1.55;
}
.student-file-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.student-file-stats div {
  padding: 18px; border-radius: 16px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
}
.student-file-stats span,
.student-finance-card span {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 900; color: rgba(255,255,255,.72);
  text-transform: uppercase;
}
.student-file-stats b { display: block; color: #fff; font-size: 22px; }
.student-file-stats small { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-weight: 700; }
.student-file-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0,1fr); gap: 22px; align-items: start; }
.student-file-card,
.student-file-panel,
.student-finance-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm);
}
.student-file-card { overflow: hidden; }
.student-file-cover { height: 96px; background: linear-gradient(120deg, #15596b, #2864d4); }
.student-file-avatar {
  width: 92px; height: 92px; margin: -46px 0 12px 22px;
  display: grid; place-items: center; border-radius: 22px;
  background: var(--surface); border: 5px solid var(--surface); box-shadow: var(--shadow-md);
}
.student-file-avatar .leader-avatar-fill { width: 100%; height: 100%; border-radius: 18px; }
.student-file-card h3 { margin: 0 22px 6px; font-size: 20px; color: var(--text); }
.student-file-sub { margin: 0 22px 10px; color: var(--text-muted); font-weight: 800; }
.student-file-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 22px 16px; }
.student-file-tags span {
  padding: 5px 10px; border-radius: 999px; background: var(--olbia-green-soft);
  color: var(--olbia-green); font-size: 12px; font-weight: 900;
}
.student-file-info { margin: 0; padding: 16px 22px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.student-file-info div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; }
.student-file-info dt { color: var(--text-muted); font-size: 12px; font-weight: 900; }
.student-file-info dd { margin: 0; color: var(--text); font-weight: 800; overflow-wrap: anywhere; }
.student-file-actions { display: grid; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.student-file-linked { padding: 16px 22px 22px; border-top: 1px solid var(--border); display: grid; gap: 9px; }
.student-file-linked-row { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.student-file-linked-row span { font-weight: 900; }
.student-file-linked-row small { color: var(--text-muted); overflow-wrap: anywhere; }
.student-file-main { display: grid; gap: 18px; min-width: 0; }
.student-file-toolbar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.student-finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.student-finance-card { min-height: 100px; padding: 20px; }
.student-finance-card span { color: var(--text-muted); }
.student-finance-card b { display: block; font-size: 24px; color: var(--text); }
.student-finance-card small { display: block; margin-top: 8px; color: var(--text-muted); font-weight: 700; }
.student-file-panel { padding: 20px; overflow: hidden; }
.student-file-panel h3 { margin: 0 0 6px; font-size: 18px; }
.student-file-panel p { margin: 0; color: var(--text-muted); font-weight: 700; }
.student-file-table { min-width: 860px; }
.tag.danger { background: #FCE4E1; color: #B5392F; }

@media (max-width: 1100px) {
  .student-file-hero,
  .student-file-layout { grid-template-columns: 1fr; }
  .student-file-stats,
  .student-finance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .student-file-hero { padding: 20px; border-radius: 18px; }
  .student-file-hero h2 { font-size: 26px; }
  .student-file-stats { gap: 10px; }
  .student-file-panel { padding: 14px; }
}

/* ============================================================================
   YASAL ONAY KAPISI
   Giriş sonrası açılan, kapatılamayan onay penceresi ve arkasındaki kilit.
   ============================================================================ */

/* --- Sayfa kilidi -----------------------------------------------------------
   Kilit sınıfı PHP tarafından <body>'ye basılıyor. Betik yüklenmezse veya
   JavaScript kapalıysa sayfa kilitli kalsın diye: yanlış tarafa düşmek
   gerekiyorsa kapalı tarafa düşsün. --------------------------------------- */
body.yasal-kilit {
  overflow: hidden;
}
body.yasal-kilit > *:not(.yasal-bg):not(.toast):not(script):not(noscript) {
  filter: blur(5px) saturate(.6);
  pointer-events: none;
  user-select: none;
}

.yasal-noscript {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg);
  display: grid; place-content: center; gap: 14px;
  padding: 32px; text-align: center;
  filter: none !important;
}
.yasal-noscript h1 { font-size: 24px; font-weight: 800; }
.yasal-noscript p { max-width: 520px; color: var(--text-muted); line-height: 1.6; }

/* --- Pencere --------------------------------------------------------------- */
.yasal-bg { z-index: 300; }
.yasal-modal {
  width: min(760px, 100%);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}

.yasal-yukleniyor { padding: 40px 26px; text-align: center; }
.yasal-yukleniyor h3 { margin: 10px 0 6px; }

.yasal-ust {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--border);
}
.yasal-ico {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  font-size: 24px; border-radius: 14px;
  background: var(--olbia-green-soft);
}
.yasal-ust h3 { margin: 0 0 4px; font-size: 20px; }
.yasal-alt {
  margin: 0; font-size: 13.5px; line-height: 1.55;
  color: var(--text-muted);
}

/* --- Adım rayı ---------------------------------------------------------------
   Sekme değil, sıra. Sıradaki metin ancak öncekiler onaylanınca açılıyor;
   ulaşılmamış adımlar tıklanamaz. Tamamlananlara geri dönüp okumak serbest. */
.yasal-adim-sayac {
  margin-left: auto; align-self: flex-start;
  flex: 0 0 auto; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text-muted);
}

.yasal-rail {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 16px 26px 0;
  padding: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.yasal-rail-adim {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  transition: background .15s, color .15s, opacity .15s;
}
.yasal-rail-no {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; flex: 0 0 19px;
  border-radius: 50%; font-size: 11px; font-weight: 800;
  background: rgba(0, 0, 0, .07); color: var(--text-soft);
}
.yasal-rail-adim.tamam { color: var(--olbia-green); }
.yasal-rail-adim.tamam .yasal-rail-no { background: var(--olbia-green); color: #fff; }
.yasal-rail-adim.aktif {
  background: var(--olbia-green); color: #fff; box-shadow: var(--shadow-sm);
}
.yasal-rail-adim.aktif .yasal-rail-no { background: rgba(255, 255, 255, .25); color: #fff; }
.yasal-rail-adim.aktif.tamam .yasal-rail-no { background: #fff; color: var(--olbia-green); }
.yasal-rail-adim:disabled {
  cursor: not-allowed; opacity: .42;
}
.yasal-rail-adim:not(:disabled):not(.aktif):hover { background: rgba(0, 0, 0, .04); }

/* --- Metin panoları -------------------------------------------------------- */
.yasal-govde {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 26px 0;
  display: flex;
}
.yasal-pano { display: none; flex-direction: column; min-height: 0; width: 100%; }
.yasal-pano.active { display: flex; }

.yasal-metin {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(46dvh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  font-size: 13.5px;
  line-height: 1.65;
}
.yasal-metin:focus-visible { outline: none; box-shadow: var(--ring); }
.yasal-metin p { margin: 0 0 12px; }
.yasal-metin p:last-child { margin-bottom: 0; }
.yasal-surum {
  display: inline-block; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-soft);
}

/* --- Onay kutusu ----------------------------------------------------------- */
.yasal-kutu {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13.5px; line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.yasal-kutu:has(input:checked) {
  border-color: var(--olbia-green);
  background: var(--olbia-green-soft);
}
.yasal-kutu:has(input:disabled) { cursor: default; opacity: .72; }
.yasal-kutu input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 17px; }
.yasal-uyari {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 700;
  color: var(--olbia-orange-dark);
}

/* --- Ayak ------------------------------------------------------------------ */
.yasal-ayak {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 26px 20px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.yasal-ayak-sag { display: flex; gap: 10px; align-items: center; }
#yasalIleri { min-width: 190px; }

@media (max-width: 620px) {
  .yasal-modal { max-height: 100dvh; border-radius: 0; width: 100%; }
  .yasal-bg { padding: 0; }
  .yasal-ust, .yasal-govde, .yasal-ayak { padding-left: 16px; padding-right: 16px; }
  .yasal-rail { margin-left: 16px; margin-right: 16px; gap: 4px; }
  .yasal-rail-adim { font-size: 11.5px; padding: 6px 10px; gap: 6px; }
  .yasal-metin { max-height: none; }
  .yasal-ust { flex-wrap: wrap; }
  .yasal-adim-sayac { order: -1; margin-left: auto; }
  .yasal-ayak { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .yasal-ayak-sag { flex-direction: row; }
  .yasal-ayak-sag .btn { flex: 1; }
  #yasalIleri { min-width: 0; }
}

/* --- Yasal metin sayfası (yasal.php) --------------------------------------- */
.yasal-sayfa { max-width: 860px; margin: 0 auto; }
.yasal-belge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 20px;
  scroll-margin-top: 90px;
}
.yasal-belge h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.yasal-belge .yasal-surum { margin-bottom: 16px; }
.yasal-belge p { margin: 0 0 13px; line-height: 1.7; font-size: 14.5px; }
.yasal-belge p:last-child { margin-bottom: 0; }
.yasal-icindekiler {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.yasal-icindekiler a {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none;
}
.yasal-icindekiler a:hover { border-color: var(--olbia-green); color: var(--olbia-green); }

@media (max-width: 620px) {
  .yasal-belge { padding: 20px 18px; border-radius: var(--r-md); }
}

.footer-yasal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; margin-top: 12px;
  font-size: 12.5px;
}
.footer-yasal a {
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-yasal a:hover { color: var(--olbia-green); border-bottom-color: currentColor; }
.footer-gelistirici {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; color: var(--text-muted); font-size: 11.5px;
}
.footer-gelistirici a {
  display: inline-flex; align-items: center; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); transition: border-color .15s, opacity .15s;
}
.footer-gelistirici a:hover { border-color: var(--olbia-green); opacity: .82; }
.footer-gelistirici img {
  display: block; width: auto; height: 24px; max-width: 120px; object-fit: contain;
}
.auth-gelistirici {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .footer-gelistirici { flex-direction: column; gap: 7px; }
}

/* --- Yönetim ▸ Yasal metin listesi ----------------------------------------- */
.yasal-liste-satir {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer;
  font: inherit; color: var(--text);
  transition: background .15s;
}
.yasal-liste-satir:last-child { border-bottom: 0; }
.yasal-liste-satir:hover { background: var(--surface-alt); }
.yasal-liste-satir.active {
  background: var(--olbia-green-soft);
  box-shadow: inset 3px 0 0 var(--olbia-green);
}
.yls-ad { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.yls-alt { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.yls-say { display: block; font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 900px) {
  [data-admin-module="yasalmetinler"] .grid[style*="300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   ÖĞRENCİ KARŞILAŞTIRMA ANALİZİ
   ========================================================================== */
.compare-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.compare-section-title::after { display: none; }
.compare-section-title > span:first-child { display: inline-flex; align-items: center; gap: 10px; }

.compare-page {
  position: relative;
  z-index: 1;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 36px clamp(18px, 3vw, 54px) 70px;
}
.compare-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-strong);
}
.compare-back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--olbia-green);
  font-size: 14px;
  font-weight: 800;
}
.compare-head h1 { font-size: 38px; line-height: 1.15; letter-spacing: 0; }
.compare-head p { max-width: 820px; margin-top: 10px; color: var(--text-muted); font-size: 16px; }
.compare-head-badge {
  min-width: 132px;
  padding: 13px 18px;
  border: 1px solid #bfd5e8;
  border-radius: 8px;
  background: #eef6fc;
  text-align: center;
}
.compare-head-badge b { display: block; color: #1d5d8f; font-size: 27px; line-height: 1; }
.compare-head-badge span { display: block; margin-top: 5px; color: #47677e; font-size: 12px; font-weight: 700; }

.compare-controls {
  margin: 28px 0 34px;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--olbia-green);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.compare-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
}
.compare-controls-top h2 { font-size: 21px; }
.compare-controls-top p { margin-top: 3px; color: var(--text-muted); font-size: 13px; }
.compare-search { width: min(100%, 390px); }
.compare-search > span,
.compare-date-fields label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}
.compare-student-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  max-height: 286px;
  margin-top: 18px;
  padding: 2px 3px 2px 2px;
  overflow-y: auto;
}
.compare-student-option {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-alt);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.compare-student-option:hover { border-color: #92bca4; }
.compare-student-option.selected {
  border-color: var(--olbia-green);
  background: var(--olbia-green-soft);
  box-shadow: inset 3px 0 0 var(--olbia-green);
}
.compare-student-option input { position: absolute; opacity: 0; pointer-events: none; }
.compare-student-option-copy { min-width: 0; }
.compare-student-option-copy b,
.compare-student-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-student-option-copy b { font-size: 14px; }
.compare-student-option-copy small { margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }
.compare-student-option > i {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  font-size: 12px;
  font-style: normal;
}
.compare-student-option.selected > i { border-color: var(--olbia-green); background: var(--olbia-green); color: #fff; }
.compare-avatar,
.compare-student-option .compare-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 26px;
}
.compare-period-row {
  display: grid;
  grid-template-columns: auto minmax(280px, 440px) minmax(180px, 220px);
  align-items: end;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.compare-period-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-alt);
}
.compare-period-presets button {
  min-height: 40px;
  padding: 7px 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 800;
  cursor: pointer;
}
.compare-period-presets button.active { background: var(--olbia-green); color: #fff; }
.compare-date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare-run { min-height: 49px; }

.compare-status { margin-bottom: 20px; }
.compare-loading,
.compare-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 78px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.compare-loading span { display: inline-block; color: var(--olbia-green); font-size: 28px; animation: compare-knight 1s ease-in-out infinite alternate; }
@keyframes compare-knight { to { transform: translateX(10px); } }
.compare-error { flex-direction: column; border-color: #e8b8b3; background: #fff2f0; color: #9e2e25; }

.compare-band {
  padding: 32px 0 36px;
  border-top: 1px solid var(--border-strong);
}
.compare-band:first-child { border-top: 0; }
.compare-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.compare-eyebrow { display: block; margin-bottom: 4px; color: var(--olbia-orange-dark); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.compare-band-head h2 { font-size: 25px; letter-spacing: 0; }
.compare-range { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.compare-audit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.compare-audit-band {
  padding: 28px;
  border: 1px solid #cbd9e5 !important;
  border-left: 5px solid #2d6f9d !important;
  border-radius: 8px;
  background: #f5f9fc;
}
.compare-live-rules { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-live-rules span { padding: 8px 11px; border: 1px solid #cbd9e5; border-radius: 5px; background: #fff; color: #496273; font-size: 12px; }
.compare-live-rules b { color: #1f587f; }
.compare-audit-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 18px; }
.compare-audit-notes p { position: relative; padding-left: 17px; color: #53636d; font-size: 13px; }
.compare-audit-notes p::before { content: "•"; position: absolute; left: 2px; color: var(--olbia-orange); font-weight: 900; }
.compare-rule-table-wrap { margin-top: 22px; overflow-x: auto; border: 1px solid #d6e0e8; border-radius: 7px; background: #fff; }
.compare-rule-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.compare-rule-table th,
.compare-rule-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: 13px; }
.compare-rule-table thead th { background: #eaf2f8; color: #355568; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.compare-rule-table tbody tr:last-child td { border-bottom: 0; }
.compare-rule-name { display: inline-flex; align-items: center; gap: 9px; }
.compare-rule-name i { font-size: 20px; font-style: normal; }
.compare-rule-type { display: inline-flex; padding: 5px 8px; border-radius: 4px; font-size: 11px; font-weight: 900; }
.type-otomatik { background: #dff2e6; color: #176739; }
.type-gorev_bazli { background: #e3eff9; color: #245d88; }
.type-yonetici { background: #fff0df; color: #a94e0d; }
.type-harcama { background: #f2e8f5; color: #75417e; }
.compare-off { display: block; margin-top: 3px; color: #a23830; font-weight: 800; }

.compare-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compare-summary-item {
  padding: 18px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--student-color);
  border-radius: 8px;
  background: var(--surface);
}
.compare-summary-student { display: flex; align-items: center; gap: 12px; }
.compare-summary-student > span { min-width: 0; }
.compare-summary-student b,
.compare-summary-student small { display: block; }
.compare-summary-student b { font-size: 17px; }
.compare-summary-student small { color: var(--text-muted); font-size: 12px; }
.compare-summary-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: var(--border); }
.compare-summary-metrics span { min-width: 0; padding: 11px; background: var(--surface-alt); }
.compare-summary-metrics small,
.compare-summary-metrics b { display: block; }
.compare-summary-metrics small { color: var(--text-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.compare-summary-metrics b { margin-top: 4px; overflow-wrap: anywhere; font-size: 14px; }

.compare-findings-band { background: linear-gradient(90deg, rgba(27,107,58,.04), transparent 75%); }
.compare-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.compare-finding { padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid #7696ac; border-radius: 7px; background: var(--surface); }
.compare-finding b { display: block; font-size: 13px; }
.compare-finding p { margin-top: 5px; color: var(--text-muted); font-size: 12.5px; }
.finding-ok { border-left-color: var(--olbia-green); }
.finding-warn { border-left-color: #c53a2e; background: #fff8f6; }
.finding-diff { border-left-color: var(--olbia-orange); }

.compare-matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.compare-matrix { width: 100%; min-width: 780px; border-collapse: collapse; }
.compare-matrix th,
.compare-matrix td { min-width: 155px; padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.compare-matrix thead th { border-top: 4px solid var(--student-color, var(--olbia-green)); background: var(--surface-alt); font-size: 12px; }
.compare-matrix thead th:first-child { border-top-color: transparent; }
.compare-matrix tbody tr:last-child > * { border-bottom: 0; }
.compare-matrix tbody th { min-width: 230px; font-size: 13px; }
.compare-matrix tbody th span { display: inline-block; width: 26px; font-size: 18px; }
.compare-matrix td b,
.compare-matrix td small { display: block; }
.compare-matrix td small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.compare-zero { color: var(--text-soft); }

.compare-chart { min-height: 310px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.compare-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.compare-chart-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; font-weight: 800; }
.compare-chart-legend i { width: 20px; height: 4px; border-radius: 2px; }
.compare-chart-scroll { overflow-x: auto; }
.compare-chart svg { display: block; width: 100%; min-width: 720px; height: 280px; }
.compare-chart-grid { stroke: #e6e1d8; stroke-width: 1; stroke-dasharray: 5 5; }
.compare-chart-label,
.compare-chart-date { fill: #847f72; font-family: var(--font); font-size: 12px; }
.compare-chart-note { margin-top: 8px; color: var(--text-muted); font-size: 12px; }

.compare-details { display: grid; gap: 20px; }
.compare-student-detail {
  border: 1px solid var(--border-strong);
  border-top: 5px solid var(--student-color);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.compare-student-detail > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.compare-student-detail > header > div { min-width: 0; }
.compare-student-detail h3 { font-size: 18px; }
.compare-student-detail header p { color: var(--text-muted); font-size: 12px; }
.compare-connection { margin-left: auto; padding: 6px 9px; border-radius: 4px; font-size: 11px; font-weight: 900; }
.compare-connection.is-connected { background: var(--olbia-green-soft); color: var(--olbia-green); }
.compare-connection.is-missing { background: #fff0ed; color: #a5362d; }
.compare-diagnostic-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.compare-diagnostic-row span { min-width: 0; padding: 12px 16px; border-right: 1px solid var(--border); }
.compare-diagnostic-row span:last-child { border-right: 0; }
.compare-diagnostic-row small,
.compare-diagnostic-row b { display: block; }
.compare-diagnostic-row small { color: var(--text-muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.compare-diagnostic-row b { margin-top: 3px; overflow-wrap: anywhere; font-size: 12.5px; }
.compare-sync-error { margin: 14px 18px 0; padding: 10px 12px; border-left: 4px solid #c53a2e; background: #fff3f1; color: #8c3129; font-size: 12px; }
.compare-scope-note { margin: 14px 18px; padding: 10px 12px; border-left: 4px solid #2d6f9f; background: #eef6fc; color: #38576d; font-size: 12px; }
.compare-scope { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.compare-scope.is-in { background: var(--olbia-green-soft); color: var(--olbia-green); }
.compare-scope.is-out { background: #edf0f2; color: #66727a; }
.compare-scope.is-invalid { background: #fbe9e6; color: #a5362d; }
.compare-out-of-scope td { color: var(--text-muted); background: #fafafa; }
.compare-invalid-reward td { background: #fff5f3; }
.compare-reward-warning { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 18px; padding: 10px 12px; border-left: 4px solid #c53a2e; background: #fff3f1; color: #8c3129; font-size: 12px; }
.compare-reward-warning .btn { flex: 0 0 auto; }
.compare-student-detail details { border-top: 1px solid var(--border); }
.compare-student-detail details:first-of-type { border-top: 0; }
.compare-student-detail summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 13px; font-weight: 900; cursor: pointer; }
.compare-student-detail summary span { padding: 2px 7px; border-radius: 4px; background: var(--surface-alt); color: var(--text-muted); font-size: 10px; }
.compare-table-scroll { overflow-x: auto; }
.compare-detail-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.compare-detail-table th,
.compare-detail-table td { padding: 11px 15px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 12px; }
.compare-detail-table thead th { background: var(--surface-alt); color: var(--text-muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.compare-detail-table td small { display: block; margin-top: 2px; color: var(--text-muted); }
.compare-detail-table a { color: var(--olbia-green); font-weight: 800; }
.compare-positive { color: var(--olbia-green); }
.compare-negative { color: #b43d32; }
.compare-result { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 900; }
.result-win { background: var(--olbia-green-soft); color: var(--olbia-green); }
.result-loss { background: #fff0ed; color: #ad392f; }
.result-draw { background: #edf0f2; color: #53616c; }

@media (max-width: 1180px) {
  .compare-period-row { grid-template-columns: 1fr 1fr; }
  .compare-run { grid-column: 1 / -1; }
  .compare-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-diagnostic-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare-diagnostic-row span { border-bottom: 1px solid var(--border); }
}

@media (max-width: 820px) {
  .compare-page { padding: 22px 14px 48px; }
  .compare-head { align-items: flex-start; }
  .compare-head h1 { font-size: 29px; }
  .compare-head-badge { min-width: 105px; }
  .compare-controls { padding: 17px; }
  .compare-reward-warning { align-items: stretch; flex-direction: column; }
  .compare-controls-top { align-items: stretch; flex-direction: column; }
  .compare-search { width: 100%; }
  .compare-period-row { grid-template-columns: 1fr; }
  .compare-run { grid-column: auto; }
  .compare-period-presets { display: grid; grid-template-columns: 1fr 1fr; }
  .compare-summary-grid,
  .compare-audit-notes { grid-template-columns: 1fr; }
  .compare-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-findings { grid-template-columns: 1fr; }
  .compare-audit-band { padding: 20px 16px; }
  .compare-band-head { align-items: flex-start; }
}

@media (max-width: 560px) {
  .compare-head { flex-direction: column; }
  .compare-head-badge { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; }
  .compare-head-badge b { font-size: 22px; }
  .compare-head-badge span { margin-top: 0; }
  .compare-student-picker { grid-template-columns: 1fr; max-height: 350px; }
  .compare-date-fields { grid-template-columns: 1fr; }
  .compare-band-head { flex-direction: column; }
  .compare-audit-actions { width: 100%; justify-content: stretch; }
  .compare-audit-actions .btn { flex: 1 1 auto; }
  .compare-summary-metrics { grid-template-columns: 1fr 1fr; }
  .compare-diagnostic-row { grid-template-columns: 1fr 1fr; }
  .compare-diagnostic-row span { border-right: 1px solid var(--border); }
  .compare-connection { margin-left: 0; }
  .compare-student-detail > header { flex-wrap: wrap; }
  .compare-section-title { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-loading span { animation: none; }
}