/* ===========================================================
   G·Task — tasarım token'ları
   Tipografi, boşluklar ve bileşenler G-Task.dc.html'den birebir alındı.
   Renkler takımın gönderdiği palete göre yerleştirildi; katmanlar
   koyudan açığa: bg → surface-inset → surface-card → surface.
   Rengi değiştirmek için yalnız aşağıdaki :root bloğu yeterli.
   =========================================================== */

:root {
  /* Tarayıcının kendi parçaları da koyu gelsin: takvim/saat seçici
     açılır kutuları, select listesi ve kaydırma çubuğu bunsuz açık
     temada çizilip koyu arayüzün ortasında beyaz kalıyordu. */
  color-scheme: dark;

  --bg:            #0A1930;   /* sayfa zemini */
  --surface:       #193758;   /* panel / blok yüzeyi */
  --surface-card:  #122A47;   /* panel içindeki kart (görev kartı, balon) */
  --surface-inset: #0E2139;   /* en alt katman: bar zeminleri, çip zemini */
  --surface-sheet: #163150;   /* sheet yüzeyi */
  --surface-input: #1D3E63;   /* input yüzeyi */

  --text:          #FFFFFF;
  --text-strong:   #EAF6FF;
  --text-bright:   #BFE3FA;
  --text-soft:     #A8D2EE;
  --text-soft-2:   #93C2E4;
  /* Üç sönük kademe: en açık yüzeyde (--surface-input) sırasıyla 6.2 · 5.3 ·
     4.5 kontrast verir. Eski değerler (#82B2D6 · #74A2C6 · #6690B0) küçük
     punto için 4.5'in altında kalıyordu; ton ve doygunluk korunarak yalnız
     açıklık yükseltildi, kademeler arası fark korundu. */
  --text-dim:      #A5C8E1;
  --text-dimmer:   #96B9D4;
  --text-faint:    #8AAAC3;

  --accent:        #4FA8E8;
  --accent-light:  #7FC4F2;
  --accent-light2: #9FD3F5;
  --accent-light3: #A8D8F7;
  --accent-dark:   #2F86C8;   /* yalnız dolgu/kenarlık — metinde kontrastı 3.1 */
  --accent-label:  #6DADDD;   /* aynı mavinin metin için okunur tonu */

  --ok:            #34C77B;
  --warn:          #F2B84B;
  --bad:           #E85C5C;
  --bad-text:      #F08A8A;

  --hair:          rgba(127, 196, 242, .12);
  --hair-strong:   rgba(127, 196, 242, .2);
  --tint:          rgba(79, 168, 232, .11);
  --tint-2:        rgba(79, 168, 232, .16);
  --tint-3:        rgba(79, 168, 232, .2);

  --shadow-modal:  0 44px 96px rgba(2, 9, 20, .7);
  --shadow-mascot: drop-shadow(0 12px 24px rgba(2, 9, 20, .6));

  --f-head: 'Archivo', system-ui, sans-serif;
  --f-kick: 'Oswald', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, sans-serif;
  --f-num:  'Poppins', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--f-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-light); text-decoration: none; }
a:hover { color: var(--accent-light3); }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--text-dimmer); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: rgba(79, 168, 232, .3); color: #FFFFFF; }

* { scrollbar-width: thin; scrollbar-color: rgba(79, 168, 232, .34) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(79, 168, 232, .28);
  border-radius: 10px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79, 168, 232, .5); background-clip: content-box; }

/* --------------------------------------------------- animasyonlar */
@keyframes gtPop   { 0% { transform: scale(.9); opacity: 0 } 60% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }
@keyframes gtRise  { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes gtSlide { from { transform: translateX(24px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes gtPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes gtRail  { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes gtStage { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: translateY(0) } }
@keyframes gtBob   { 0%, 100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-5px) rotate(1.5deg) } }
@keyframes gtSweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@keyframes gtQuotePop { 0% { opacity: 0; transform: translateY(-10px) scale(.9) rotate(-1.6deg) } 60% { opacity: 1; transform: translateY(0) scale(1.02) rotate(.6deg) } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0) } }
@keyframes gtStarSpin { 0% { transform: translateY(0) rotate(0) } 30% { transform: translateY(-4px) rotate(-9deg) } 60% { transform: translateY(-1px) rotate(9deg) } 100% { transform: translateY(0) rotate(0) } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------ tipografi */
.kicker {
  font: 700 11.5px/1 var(--f-kick);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimmer);
}

/* ---------------------------------------------------- G·Task marka */
.logo { display: flex; align-items: center; gap: 13px; }
.logo__mark { position: relative; display: block; flex: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.logo:hover .logo__mark { transform: rotate(-5deg) scale(1.06); }
.logo__mark img { display: block; width: 100%; height: 100%; }
.logo__text { min-width: 0; }
.logo__word {
  display: block; font: 800 31px/1 var(--f-head);
  letter-spacing: -.025em; color: var(--text);
}
.logo__word i { color: var(--accent); font-style: normal; }
.logo__sub {
  display: block; margin-top: 7px; font: 600 10.5px/1 var(--f-body);
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dimmer);
}
.logo__sub i { color: var(--accent); font-style: normal; }

/* -------------------------------------------- GG Kuş poz geçişi */
.gg { position: relative; display: block; flex: none; }
.gg img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto;
  transform-origin: 50% 86%; filter: var(--shadow-mascot);
  transition: opacity .5s ease, transform .62s cubic-bezier(.32, .06, .2, 1);
}
.gg img[data-pose="fan"]   { opacity: 1; transform: translateX(-50%) scaleX(1); }
.gg img[data-pose="stand"] { opacity: 0; transform: translateX(-50%) scaleX(1.18); }
.gg:hover img[data-pose="fan"], .gg-host:hover .gg img[data-pose="fan"] {
  opacity: 0; transform: translateX(-50%) scaleX(.52);
}
.gg:hover img[data-pose="stand"], .gg-host:hover .gg img[data-pose="stand"] {
  opacity: 1; transform: translateX(-50%) scaleX(1);
}

/* ============================ 0 · Giriş / Kimlik ============================ */
.auth {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: var(--surface);
  background-image: radial-gradient(rgba(127, 196, 242, .12) 1px, transparent 1px);
  background-size: 22px 22px;
}

.auth__card {
  width: min(880px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--hair-strong);
  background: var(--bg);
  box-shadow: var(--shadow-modal);
}

.auth__side {
  padding: 30px 28px; background: var(--surface);
  display: flex; flex-direction: column; gap: 18px;
}
.auth__side .logo__mark { width: 48px; height: 48px; }
.auth__side .gg { width: 100%; height: 150px; margin-top: 6px; }
.auth__quote { margin-top: auto; }
.auth__quote p {
  margin: 7px 0 0; font: 800 15px/1.5 var(--f-body); color: var(--text-strong);
}
.auth__quote .kicker { color: var(--accent-label); }

.auth__main { padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }

.auth__tabs {
  display: flex; gap: 4px; padding: 3px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair);
}
.auth__tabs button {
  flex: 1; border: 0; cursor: pointer; padding: 9px 4px; border-radius: 8px;
  font: 800 14px/1 var(--f-body); background: transparent; color: var(--text-dimmer);
}
.auth__tabs button[aria-selected="true"] { background: var(--accent); color: var(--bg); }

.auth__pane { display: flex; flex-direction: column; gap: 14px; }

.field { display: block; }
.field > .kicker { display: block; margin-bottom: 8px; }

.select, .text-input, .pin-input {
  width: 100%; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--hair); color: var(--text);
}
.select { padding: 12px; font: 700 14.5px/1 var(--f-body); }
.text-input { padding: 13px; font: 700 17px/1 var(--f-num); letter-spacing: .06em; text-align: center; }
.pin-input { padding: 13px; font: 700 22px/1 var(--f-num); letter-spacing: .4em; text-align: center; }
.select:focus, .text-input:focus, .pin-input:focus { outline: none; border-color: var(--accent); }

.hint { display: block; margin-top: 8px; font: 700 13px/1 var(--f-num); color: var(--text-dimmer); }
.note { font: 700 12.5px/1.5 var(--f-num); color: var(--text-faint); }

.remember {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; cursor: pointer; padding: 2px 0;
}
.remember__box {
  width: 19px; height: 19px; flex: none; border-radius: 8px;
  border: 1.5px solid var(--hair-strong); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 var(--f-body); color: var(--bg);
}
.remember[aria-pressed="true"] .remember__box { border-color: var(--accent); background: var(--accent); }
.remember span:last-child { font: 700 14px/1 var(--f-body); color: var(--text-soft); }

.alert {
  padding: 11px 13px; border-radius: 8px;
  font: 700 14px/1.4 var(--f-body);
}
.alert--bad { background: rgba(232, 92, 92, .1); border: 1px solid rgba(232, 92, 92, .3); color: var(--bad-text); }
.alert--ok  { background: rgba(52, 199, 123, .1); border: 1px solid rgba(52, 199, 123, .28); color: var(--ok); }

.btn-primary {
  padding: 14px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--bg); font: 800 16px/1 var(--f-body);
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-light); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------- hoş geldin modalı */
.welcome {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(2, 9, 20, .78);
}
.welcome__card {
  width: min(560px, 100%); background: var(--bg);
  border: 1px solid rgba(79, 168, 232, .28); border-radius: 10px; padding: 28px;
  animation: gtPop .24s cubic-bezier(.2, .9, .25, 1) both;
  box-shadow: 0 40px 90px rgba(2, 9, 20, .7);
}
.welcome__head { display: flex; align-items: center; gap: 16px; }
.welcome__head .gg { width: 96px; height: 92px; animation: gtBob 4s ease-in-out infinite; }
.welcome__brand { display: flex; align-items: center; gap: 8px; }
.welcome__brand img { display: block; width: 26px; height: 26px; flex: none; }
.welcome__brand span { font: 800 15px/1 var(--f-head); letter-spacing: -.02em; color: var(--text); }
.welcome__brand i { color: var(--accent); font-style: normal; }
.welcome h2 { margin: 9px 0 0; font: 800 26px/1.15 var(--f-head); letter-spacing: -.015em; color: var(--text); }
.welcome__role { margin-top: 7px; font: 700 13.5px/1 var(--f-num); color: var(--text-dimmer); }
.welcome__lines { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.welcome__line {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--hair);
}
.welcome__line b { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 10px; background: var(--accent); }
.welcome__line span { flex: 1; font: 800 14.5px/1.5 var(--f-body); color: var(--text-strong); }
.welcome .btn-primary { margin-top: 20px; width: 100%; }

/* ------------------------------------------------------ kırılımlar */
@media (max-width: 720px) {
  .auth__side { display: none; }
  .auth__card { grid-template-columns: minmax(0, 1fr); }
}

/* ======================= Kabuk: sidebar + başlık ======================= */
.shell { min-height: 100vh; display: flex; background: var(--bg); color: var(--text); }

.sidebar {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
  width: 236px; flex: none;
  border-right: 1px solid var(--hair); background: var(--surface-sheet);
  display: flex; flex-direction: column; padding: 20px 16px; gap: 22px;
}
.sidebar .logo { gap: 11px; padding: 2px 0 0; }
.sidebar .logo__mark { width: 38px; height: 38px; }
.sidebar .logo__word { font-size: 25px; }
.sidebar .logo__sub { margin-top: 6px; }

.rule { display: flex; align-items: center; gap: 8px; }
.rule > span:first-child {
  font: 600 12px/1.4 var(--f-body); letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-dimmer);
}
.rule > i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(79,168,232,.3), rgba(79,168,232,0)); }
.rule--tight { margin-bottom: -12px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; border: 0; cursor: pointer;
  padding: 10px 12px 10px 15px; border-radius: 8px;
  font: 700 16px/1 var(--f-body); letter-spacing: 0;
  background: transparent; color: var(--text-soft-2);
  transition: background .18s, color .18s, letter-spacing .18s;
}
.nav button:hover { background: rgba(79,168,232,.07); color: var(--accent-light); }
.nav button[aria-current="page"] {
  background: var(--tint-2); color: var(--text); letter-spacing: -.01em;
}
.nav__rail {
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: transparent;
  transition: top .2s cubic-bezier(.2,.8,.2,1), bottom .2s cubic-bezier(.2,.8,.2,1), background .2s;
}
.nav button:hover .nav__rail { background: rgba(79,168,232,.45); top: 9px; bottom: 9px; }
.nav button[aria-current="page"] .nav__rail { background: var(--accent); top: 9px; bottom: 9px; }
.nav__badge {
  min-width: 19px; text-align: center; padding: 4px 5px; border-radius: 8px;
  font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums;
  background: rgba(127,196,242,.1); color: var(--text-dimmer);
}
.nav button[aria-current="page"] .nav__badge { background: var(--tint-3); color: var(--accent-light2); }

.deptload { display: flex; flex-direction: column; gap: 11px; }
.deptload button {
  display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; padding: 4px 3px; border-radius: 8px;
  transition: background .18s;
}
.deptload button:hover { background: rgba(79,168,232,.07); }
.deptload__top { display: flex; align-items: baseline; gap: 8px; }
.deptload__name { font: 700 13.5px/1 var(--f-body); color: var(--text-bright); }
.deptload__late { font: 600 11.5px/1 var(--f-body); color: var(--bad-text); }
.deptload__n {
  margin-left: auto; font: 700 13px/1 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}
.bar { position: relative; display: block; height: 3px; border-radius: 10px; background: var(--hair); }
.bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px;
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}

.side-bottom { display: flex; flex-direction: column; gap: 10px; }
/* Yetki satırı ad/Çık sırasının altında tam genişlikte durur: yanlarına
   sıkışınca 114px'e düşüyor ve "yardımcı kaptan · tüm departmanlar" üç
   satıra bölünüyordu. */
.me { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.me__top { display: flex; align-items: center; gap: 9px; }
.me__avatar {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: rgba(79,168,232,.1); box-shadow: inset 0 0 0 1px rgba(79,168,232,.32);
  display: flex; align-items: center; justify-content: center;
  font: 700 11.5px/1 var(--f-head); color: var(--accent-light2);
}
.me__name { min-width: 0; flex: 1; font: 700 15px/1.3 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__role { font: 700 13px/1.3 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer); }
/* Satır sonu yalnız "·" ayracında olsun, sözcük ortasında değil. */
.me__role span { white-space: nowrap; }
.me__out {
  margin-left: auto; flex: none; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair-strong); background: transparent;
  color: var(--text-soft-2); font: 700 12.5px/1 var(--f-body);
}
.me__out:hover { border-color: rgba(232,92,92,.45); color: var(--bad-text); }

.mascot-card {
  margin-top: auto; display: flex; flex-direction: column; width: 100%;
  text-align: left; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.mascot-card__bubble {
  position: relative; display: block; padding: 11px 13px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid rgba(79,168,232,.22);
}
.mascot-card__bubble::after {
  content: ''; position: absolute; left: 26px; bottom: -7px; width: 12px; height: 12px;
  transform: rotate(45deg); background: var(--surface);
  border-right: 1px solid rgba(79,168,232,.22); border-bottom: 1px solid rgba(79,168,232,.22);
}
.mascot-card__head { display: flex; align-items: center; gap: 7px; }
.mascot-card__head span:first-child {
  font: 700 11.5px/1 var(--f-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-label);
}
.mascot-card__line {
  display: block; margin-top: 7px; min-height: 56px;
  font: 800 14.5px/1.45 var(--f-body); color: var(--text);
}
.mascot-card .gg { width: 100%; height: 132px; margin-top: 9px; }

.season { display: flex; flex-direction: column; gap: 7px; }
.season__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.season__top span:first-child {
  font: 600 12px/1.4 var(--f-body); letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-dimmer);
}
.season__pct { font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--accent-label); }
.season .bar { height: 2px; background: var(--tint-2); }

/* ------------------------------------------------------------- ana alan */
.main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main__bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.main__watermark {
  position: absolute; right: -58px; bottom: -44px; width: 400px; height: auto;
  opacity: .05;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 26px; border-bottom: 1px solid var(--hair);
  background: rgba(18, 42, 71, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar h1 { margin: 0; font: 700 20px/1.2 var(--f-head); letter-spacing: -.01em; }
.topbar__sub {
  margin-top: 3px; font: 700 13.5px/1.4 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--text-dimmer);
}
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

.quote-btn {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(135deg, rgba(127,196,242,.24), rgba(127,196,242,.1));
  border: 1px solid rgba(127,196,242,.5); color: #D3EBFC;
  font: 800 13.5px/1.2 var(--f-body); white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.quote-btn:hover {
  background: linear-gradient(135deg, rgba(127,196,242,.4), rgba(127,196,242,.18));
  border-color: var(--accent-light); box-shadow: 0 6px 20px rgba(127,196,242,.28);
}
.quote-btn .gg { width: 24px; height: 22px; }
.quote-btn:hover .gg { animation: gtStarSpin .7s ease; }

.countdown {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 8px;
  background: var(--surface-card); border: 1px solid var(--hair);
}
.countdown__name { font: 600 12.5px/1 var(--f-body); color: var(--text-dimmer); letter-spacing: .04em; }
.countdown__value {
  font: 700 15px/1 var(--f-num); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--accent-light);
}

.view { position: relative; z-index: 1; padding: 22px 26px 60px; animation: gtStage .22s ease both; }

/* ------------------------------------------------------------- kırılımlar */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: static; height: auto; overflow: visible; align-self: stretch; width: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px;
    border-right: 0; border-bottom: 1px solid var(--hair); padding: 14px 16px;
  }
  .sidebar .logo { width: 168px; }
  /* Menü tek satırda kalır ve yatay kayar; sarmalanınca telefonda ekranın
     yarısını kaplıyordu. Kimlik satırı logonun yanına, menü alt satıra. */
  .nav {
    order: 3; width: 100%; flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { flex: none; width: auto; padding: 9px 13px; font-size: 15px; }
  .nav__rail { display: none; }
  .side-bottom { order: 2; margin-top: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
  .me { border-bottom: 0; padding-bottom: 0; }
  .hide-sm { display: none !important; }
  .topbar, .view { padding-left: 16px; padding-right: 16px; }
}

/* Telefon: üst çubuk ve kenar çubuğu ekranın yarısını kaplamasın.
   Bu blok taban kurallardan SONRA gelmeli — aynı özgüllükte kazanan
   kaynakta sonra yazılandır, medya sorgusu tek başına önceliklendirmez. */
@media (max-width: 520px) {
  .quote-btn span:last-child { display: none; }   /* yalnız kuş kalır */
  .quote-btn { padding: 8px 10px; }
  .countdown { padding: 6px 10px; }
  .countdown__name { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar h1 { font-size: 18px; }
  .topbar__right { gap: 8px; }
  .new-task-btn { padding: 9px 13px; font-size: 13.5px; }
  .sidebar { padding: 12px 16px; gap: 10px; }
}

/* ==================== 2 · Görevler ve görev detayı ==================== */
.tasks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.panel {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 10px; padding: 16px;
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
/* flex-basis "auto": paylar eşit değil, içeriğe göre dağılır. flex:1 (basis 0)
   ile bütün kutular eşit pay alıyordu ve içinde uzun isim geçen kutu (sorumlu
   seçimi) kırpılıyordu — dar ekranda sarmalanması kırpılmasından iyidir. */
.filters .select, .filters .search { width: auto; flex: 1 1 auto; min-width: 130px; padding: 9px 11px; font-size: 13.5px; }
/* Açılır kutuda metnin yanında ~20px'lik ok da yer kaplıyor. */
.filters .select { min-width: 158px; }
.search {
  border-radius: 8px; background: var(--bg); border: 1px solid var(--hair);
  color: var(--text); font: 700 13.5px/1 var(--f-body);
}
.search:focus { outline: none; border-color: var(--accent); }

.tasklist { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 260px); overflow-y: auto; }

/* Kart bir kapsayıcı; açma düğmesi ile öncelik düğmeleri kardeş durur.
   İç içe <button> geçersiz HTML'dir ve ok tuşlarına klavyeyle erişilemez. */
.taskcard {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 12px 13px 12px 15px; border-radius: 10px;
  background: var(--surface-card); border: 1px solid var(--hair); color: var(--text);
  transition: border-color .18s, background .18s;
}
.taskcard:hover { border-color: rgba(127,196,242,.34); background: #14314F; }
.taskcard[aria-selected="true"] { border-color: var(--accent); background: var(--tint); }
.taskcard__open {
  flex: 1; min-width: 0; display: flex; text-align: left; cursor: pointer;
  padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit;
}
.taskcard__urgency { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; }
.taskcard__body { flex: 1; min-width: 0; }
.taskcard__title { font: 800 14.5px/1.35 var(--f-body); color: var(--text); }
.taskcard__meta { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.taskcard__prio { display: flex; flex-direction: column; gap: 3px; flex: none; }
/* Dokunma hedefi 22×18'di; parmakla 24×24'ün altı zor tutturuluyor. */
.taskcard__prio button {
  width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--text-soft-2);
  font: 700 11px/1 var(--f-body);
}
.taskcard__prio button:hover { border-color: var(--accent); color: var(--accent-light); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px;
  font: 700 11.5px/1.3 var(--f-body); white-space: nowrap;
}
.tag--dept { font-weight: 800; }
/* Çipin kendi %10 açık zemini var; üstündeki sönük metin token'ı bir kademe
   açılır, yoksa aynı renk düz yüzeyde 4.5'i geçerken çipte 4.06'ya düşüyor. */
.tag { --text-faint: #A6BFD2; }
/* Seçili kart tint'li zemine geçtiği için kırmızı gecikme metni de açılır. */
.taskcard[aria-selected="true"] { --bad-text: #F5A9A9; }
.rel { font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.who { font: 700 12.5px/1 var(--f-body); color: var(--text-dim); }
.steps-count { font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer); }

.detail__title { margin: 0; font: 800 19px/1.3 var(--f-head); letter-spacing: -.015em; }
.detail__meta { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail__section { margin-top: 18px; }
.detail__section > .kicker { display: block; margin-bottom: 9px; }

.step {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--hair); color: var(--text-soft);
  font: 700 13.5px/1.4 var(--f-body); margin-bottom: 6px;
}
.step:hover { border-color: rgba(127,196,242,.3); }
.step__box {
  width: 18px; height: 18px; flex: none; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--hair-strong); display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 var(--f-body); color: var(--bg);
}
.step[aria-pressed="true"] .step__box { background: var(--ok); border-color: var(--ok); }
.step[aria-pressed="true"] span:last-child { color: var(--text-dimmer); text-decoration: line-through; }
.step:disabled { cursor: default; opacity: .8; }

.note-box {
  padding: 11px 13px; border-radius: 8px; font: 700 13.5px/1.5 var(--f-body);
  background: var(--tint); border: 1px solid rgba(79,168,232,.24); color: var(--text-soft);
}
.note-box--bad { background: rgba(232,92,92,.1); border-color: rgba(232,92,92,.3); color: var(--bad-text); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  padding: 11px 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--hair-strong);
  background: transparent; color: var(--text-soft); font: 800 14px/1 var(--f-body);
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-light); }
.btn--ok { background: var(--ok); border-color: transparent; color: var(--bg); }
.btn--ok:hover { background: #4BD891; color: var(--bg); }
.btn--bad { border-color: rgba(232,92,92,.4); color: var(--bad-text); }
.btn--bad:hover { background: rgba(232,92,92,.14); border-color: var(--bad); color: var(--bad-text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.textarea {
  width: 100%; min-height: 78px; resize: vertical; padding: 11px 13px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair); color: var(--text);
  font: 700 13.5px/1.5 var(--f-body);
}
.textarea:focus { outline: none; border-color: var(--accent); }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.timeline__row {
  display: flex; gap: 10px; align-items: baseline;
  font: 700 13px/1.4 var(--f-body); color: var(--text-soft);
}
.timeline__row time {
  margin-left: auto; flex: none; font: 700 12px/1 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--text-dimmer);
}

.empty {
  padding: 26px 18px; text-align: center;
  font: 700 14px/1.5 var(--f-body); color: var(--text-dimmer);
}

@media (max-width: 860px) {
  .tasks { grid-template-columns: minmax(0, 1fr); }
  .tasklist { max-height: none; }
}

/* ======================= 1 · Kaptan paneli ======================= */
.panel-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }

.season-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.season-card__num {
  display: flex; align-items: baseline; gap: 10px;
}
.season-card__num b {
  font: 800 56px/1 var(--f-head); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.season-card__num span { font: 700 14px/1.3 var(--f-body); color: var(--text-soft); }
.season-card__range {
  font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer);
}
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: var(--tint-3); }
.spark i[data-on="1"] { background: var(--accent); }

.numgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.numcard {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; text-align: left; transition: border-color .18s;
}
.numcard:hover { border-color: rgba(127,196,242,.34); }
.numcard b { font: 800 31px/1 var(--f-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numcard span { font: 600 11.5px/1.35 var(--f-kick); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimmer); }
/* Etiketi üstte, sayıyı altta tut: iki satıra düşen etiketler sayıya yapışmasın. */
.numcard span { margin-bottom: 2px; }
.numcard b { margin-top: auto; }

.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.block { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 16px; }
.block__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.block__head h2 { margin: 0; font: 700 15px/1.2 var(--f-head); letter-spacing: -.01em; }
.block__count {
  font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 20px; background: var(--tint); color: var(--accent-light);
}
.block__note { margin-left: auto; font: 600 12px/1 var(--f-body); color: var(--text-dimmer); }

.row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 11px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--hair); margin-bottom: 7px;
}
.row:last-child { margin-bottom: 0; }
.row__title { flex: 1; min-width: 140px; font: 800 13.5px/1.35 var(--f-body); color: var(--text); }
.row__title button {
  border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.row__title button:hover { color: var(--accent-light); }
/* Satır başlığı 18px yüksekliğinde bir düğme; tıklanabilir alanı görünümü
   ve satır yüksekliğini değiştirmeden 24px'e çıkarılır. */
.row__title button { position: relative; }
.row__title button::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 24px;
}
/* 150px'te "Sorumlu atanmadı" dar ekranda ok tarafından kırpılıyordu. */
.row .select { width: auto; min-width: 166px; padding: 7px 9px; font-size: 13px; }
.row .btn { padding: 7px 11px; font-size: 12.5px; }

.empty-line { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.empty-line span { font: 700 13.5px/1.45 var(--f-body); color: var(--text-dimmer); }

.wl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.wl__row { display: flex; flex-direction: column; gap: 6px; }
.wl__top { display: flex; align-items: baseline; gap: 7px; }
.wl__name { font: 700 13px/1 var(--f-body); color: var(--text-bright); }
.wl__warn { font: 800 13px/1 var(--f-body); color: var(--bad-text); }
.wl__n { margin-left: auto; font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dim); }

@media (max-width: 1160px) { .wl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .panel-top, .blocks { grid-template-columns: minmax(0, 1fr); }
}

/* ======================= 9 · Görevlerim (üye) ======================= */
.focus {
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface) 60%, var(--surface-inset) 100%);
  border: 1px solid rgba(127,196,242,.28); border-radius: 10px; padding: 22px 24px;
  margin-bottom: 18px; animation: gtRise .22s ease both;
}
.focus__kicker { display: flex; align-items: center; gap: 9px; }
.focus h2 { margin: 11px 0 0; font: 800 26px/1.2 var(--f-head); letter-spacing: -.02em; }
.focus__meta { margin-top: 10px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.focus__steps { margin-top: 18px; }
.focus__actions { margin-top: 18px; display: flex; gap: 9px; flex-wrap: wrap; }

.mine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 860px) { .mine-grid { grid-template-columns: minmax(0, 1fr); } }

/* daha dar satır başlığı: panel blok düğmeleri tek satırda kalsın */
.block .row__title { min-width: 110px; }

/* ======================= 3 · Görev aç sheet'i ======================= */
.sheet {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overflow-x: hidden;
  background: var(--surface-sheet); animation: gtRise .2s ease both;
}
.sheet__bird {
  position: absolute; right: -60px; bottom: -60px; width: 460px; height: auto;
  opacity: .11; pointer-events: none; z-index: 0;
}
.sheet__inner { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 26px; }
.sheet__top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sheet__top h2 { margin: 0; font: 800 24px/1.2 var(--f-head); letter-spacing: -.02em; }
.sheet__close {
  margin-left: auto; padding: 9px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair-strong); background: transparent;
  color: var(--text-soft-2); font: 700 13.5px/1 var(--f-body);
}
.sheet__close:hover { border-color: rgba(232,92,92,.45); color: var(--bad-text); }

.sheet__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sheet__col { display: flex; flex-direction: column; gap: 20px; }
.sheet__field > .kicker { display: block; margin-bottom: 9px; }

.big-input {
  width: 100%; padding: 15px 16px; border-radius: 8px;
  background: var(--surface-input); border: 1px solid var(--hair);
  color: var(--text); font: 800 19px/1.3 var(--f-body);
}
.big-input:focus { outline: none; border-color: var(--accent); }

.segments { display: flex; gap: 6px; }
.segments button {
  flex: 1; padding: 11px 6px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface-input);
  color: var(--text-soft-2); font: 800 14px/1 var(--f-body);
  transition: border-color .15s, color .15s, background .15s;
}
.segments button[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-2); color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 20px;
  cursor: pointer; border: 1px solid var(--hair); background: var(--surface-input);
  color: var(--text-soft); font: 700 13.5px/1 var(--f-body);
}
.chip:hover { border-color: rgba(127,196,242,.45); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-2); color: var(--text); }
.chip__free {
  font: 700 9.5px/1 var(--f-kick); letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 20px; background: rgba(52,199,123,.16); color: var(--ok);
}
.chip__load { font: 700 12px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer); }

.presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.preset {
  padding: 8px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface-input);
  color: var(--text-soft-2); font: 700 12.5px/1 var(--f-body);
}
.preset:hover { border-color: var(--accent); color: var(--accent-light); }

.when { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.when input, .when select {
  width: 100%; padding: 11px 12px; border-radius: 8px;
  background: var(--surface-input); border: 1px solid var(--hair);
  color: var(--text); font: 700 14px/1 var(--f-body);
}
.when input:focus, .when select:focus { outline: none; border-color: var(--accent); }

.sheet .textarea { background: var(--surface-input); }

.preview {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 16px;
  position: sticky; top: 26px;
}
.preview__label { display: block; margin-bottom: 11px; }

.sheet__actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 1160px) { .sheet__grid { grid-template-columns: minmax(0, 1fr); } .preview { position: static; } }
@media (max-width: 860px) { .when { grid-template-columns: minmax(0, 1fr); } }

.new-task-btn {
  padding: 9px 15px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--bg); font: 800 13.5px/1 var(--f-body);
}
.new-task-btn:hover { background: var(--accent-light); }

/* ======================= 4 · Puanlama ve sıralama ======================= */
.score-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1160px) { .score-grid { grid-template-columns: minmax(0, 1fr); } }

.pending-badge {
  font: 700 11.5px/1 var(--f-kick); letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px; background: rgba(242,184,75,.16); color: var(--warn);
}

.score-row { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair); margin-bottom: 8px; }
.score-row__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.score-row__title { flex: 1; min-width: 150px; font: 800 13.5px/1.35 var(--f-body); }
.stars { display: flex; gap: 5px; }
.stars button {
  width: 34px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair-strong); background: transparent;
  color: var(--text-soft-2); font: 800 14px/1 var(--f-num);
}
.stars button:hover { border-color: var(--accent); color: var(--accent-light); background: var(--tint); }

.rank-table { display: flex; flex-direction: column; gap: 5px; }
.rank-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair);
}
.rank-row[data-me="1"] { border-color: var(--accent); background: var(--tint); }
.rank-row__no {
  width: 26px; flex: none; text-align: center;
  font: 800 15px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer);
}
.rank-row__avatar {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: rgba(79,168,232,.1); box-shadow: inset 0 0 0 1px rgba(79,168,232,.32);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--f-head); color: var(--accent-light2);
}
.rank-row__name { flex: 1; min-width: 0; font: 700 14px/1.3 var(--f-body); }
.rank-row__stats { font: 700 12px/1.3 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer); }
.rank-row__avg {
  min-width: 52px; text-align: right;
  font: 800 22px/1 var(--f-head); font-variant-numeric: tabular-nums; color: var(--text);
}
.rank-row__medal { width: 22px; flex: none; text-align: center; font-size: 15px; }
.rank-row__tied { font: 700 11px/1 var(--f-body); color: var(--text-soft-2); }

/* ============================== 5 · Takvim ============================== */
.strip {
  position: relative; height: 96px; margin: 10px 0 26px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
}
.strip__line { position: absolute; left: 16px; right: 16px; top: 33px; height: 2px; background: var(--tint-3); }
.strip__fill { position: absolute; left: 16px; top: 33px; height: 2px; background: var(--accent); }
.strip__ms { position: absolute; top: 28px; display: block; }
.strip__dot {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(127,196,242,.4);
}
.strip__label {
  position: absolute; top: 50px; display: block;
  font: 700 11px/1.35 var(--f-body); color: var(--text-dimmer); max-width: 120px;
}
.strip__today { position: absolute; top: 10px; height: 34px; width: 2px; background: var(--warn); }
.strip__today span {
  position: absolute; top: -12px; left: -1px; white-space: nowrap;
  font: 700 10.5px/1 var(--f-kick); letter-spacing: .12em; text-transform: uppercase; color: var(--warn);
}

/* Takvim şeridi: 390px altında beş kilometre taşı etiketi yan yana sığmıyor
   ve üst üste biniyordu ("Stop Build Dayİzmir Bölge"). Mutlak konumlu
   oldukları için taşma da yapmıyor, yalnız okunmaz oluyorlardı. Bu genişlikte
   şerit saf ilerleme göstergesine dönüşür; isimler, tarihler ve geri sayım
   hemen altındaki kilometre taşı kartlarında zaten tam olarak duruyor. */
@media (max-width: 479px) {
  .strip { height: 62px; }
  .strip__label { display: none; }
}


.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.ms-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 16px; }
.ms-card__head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
.ms-card__head h3 { margin: 0; font: 700 15px/1.2 var(--f-head); letter-spacing: -.01em; }
.ms-card__when { margin-left: auto; font: 700 12.5px/1 var(--f-num); font-variant-numeric: tabular-nums; }

/* =============================== 6 · Ekip =============================== */
.team-row {
  display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair); margin-bottom: 8px; flex-wrap: wrap;
}
.team-row__id { display: flex; align-items: center; gap: 10px; min-width: 190px; flex: 1; }
.team-row__name { font: 700 14.5px/1.3 var(--f-body); }
.team-row__meta { font: 700 12px/1.3 var(--f-num); color: var(--text-dimmer); }
.team-row__load { width: 130px; flex: none; }
/* Mentör satırında öğrenciye özgü sütunlar (departman, iş sayısı, yük çubuğu,
   uyarı) yok. Kalan iki öğe satırın sağ ucuna yaslanır ki liste öğrenci
   listesiyle aynı hizada okunsun, ortada boşluk kalmasın. */
.team-row--mentor .rel { margin-left: auto; }
.warn-pill {
  padding: 4px 10px; border-radius: 20px; font: 700 11.5px/1.3 var(--f-body); white-space: nowrap;
}
.warn-actions { display: flex; gap: 6px; }
.warn-actions .btn { padding: 6px 10px; font-size: 12px; }
.warn-why { width: 100%; font: 700 12.5px/1.4 var(--f-num); color: var(--text-dimmer); }

/* ==================== 7 · Aksiyon planı ==================== */
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; margin-bottom: 18px; }
.plan-mascot {
  background: var(--surface); border: 1px solid rgba(79,168,232,.22); border-radius: 10px;
  padding: 16px; display: flex; gap: 14px; align-items: flex-end;
}
.plan-mascot .gg { width: 92px; height: 104px; flex: none; }
.plan-progress { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 18px 20px; }
.plan-progress__num { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.plan-progress__num b { font: 800 34px/1 var(--f-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-progress__num span { font: 700 13.5px/1.3 var(--f-body); color: var(--text-soft); }

.principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.principle {
  background: var(--bg); border: 1px solid var(--hair); border-radius: 10px; padding: 14px 15px;
  display: flex; gap: 11px;
}
.principle b {
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  background: var(--tint-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font: 800 12.5px/1 var(--f-num);
}
.principle h4 { margin: 0; font: 800 14px/1.3 var(--f-body); }
.principle p { margin: 5px 0 0; font: 700 12.5px/1.45 var(--f-body); color: var(--text-dimmer); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs button {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px;
  cursor: pointer; border: 1px solid var(--hair); background: var(--surface);
  color: var(--text-soft-2); font: 800 13.5px/1 var(--f-body);
}
.tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--tint-2); color: var(--text); }
.tabs .numeral { font: 700 11px/1 var(--f-num); color: var(--text-dimmer); }
.tabs .count { font: 700 11.5px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dimmer); }

.plan-group { margin-bottom: 16px; }
.plan-group h3 { margin: 0 0 4px; font: 700 15px/1.25 var(--f-head); letter-spacing: -.01em; }
.plan-group__note { margin: 0 0 11px; font: 700 12.5px/1.5 var(--f-body); color: var(--text-dimmer); }

/* ======================= 8 · Checklist ======================= */
.check-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.check-bar > span { font: 700 13px/1.4 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.check-bar > .btn { margin-left: auto; }
.check-card__kind {
  margin: -2px 0 10px; font: 700 11.5px/1 var(--f-kick);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.check-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 16px; }
.check-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.check-card__head h3 { margin: 0; font: 700 15px/1.2 var(--f-head); letter-spacing: -.01em; }
.check-card__pct { margin-left: auto; font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; }
/* Küçük kare "sil/gizle" düğmesi; kontrol listesi kartında da, yeni görev
   adım listesinde de aynı düğme — bu yüzden karta bağlı bir ad taşımaz. */
.x-btn {
  flex: none; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--text-dimmer);
  font: 700 13px/1 var(--f-body);
}
.x-btn:hover { border-color: rgba(232,92,92,.45); color: var(--bad-text); }
.check-card .bar { margin-bottom: 12px; }

.list-form { display: grid; gap: 10px; }
.list-form .text-input { text-align: left; font: 700 14px/1 var(--f-body); letter-spacing: 0; }

/* ------------------------------------------- günün anlamlı sözü balonu */
.quote-wrap { position: relative; }
.quote-pop {
  position: absolute; top: 48px; right: 0; width: 372px; max-width: 80vw; z-index: 40;
  animation: gtQuotePop .32s cubic-bezier(.2,.9,.25,1) both; transform-origin: 88% 0;
}
.quote-pop::before {
  content: ''; position: absolute; right: 34px; top: -7px; width: 14px; height: 14px;
  transform: rotate(45deg); background: var(--surface);
  border-left: 1px solid rgba(127,196,242,.45); border-top: 1px solid rgba(127,196,242,.45);
}
.quote-pop__card {
  position: relative; overflow: hidden; padding: 16px 18px 14px; border-radius: 12px;
  background: linear-gradient(150deg, var(--surface) 0%, var(--surface) 55%, var(--surface-inset) 100%);
  border: 1px solid rgba(127,196,242,.45); box-shadow: 0 26px 60px rgba(2,9,20,.6);
}
.quote-pop__quotemark {
  position: absolute; left: 12px; top: 26px; pointer-events: none;
  font: 900 92px/1 var(--f-head); color: rgba(52,199,123,.12);
}
.quote-pop__top { position: relative; display: flex; align-items: center; gap: 8px; }
.quote-pop__kicker {
  font: 700 11px/1 var(--f-kick); letter-spacing: .16em; text-transform: uppercase; color: var(--ok);
}
.quote-pop__no {
  padding: 3px 8px; border-radius: 20px; background: rgba(127,196,242,.14);
  font: 800 11px/1.2 var(--f-num); font-variant-numeric: tabular-nums; color: var(--accent-light3);
}
.quote-pop__close {
  margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 12px;
  border: 0; cursor: pointer; background: rgba(127,196,242,.12);
  color: var(--text-soft-2); font: 800 15px/1 var(--f-body);
}
.quote-pop__close:hover { background: rgba(232,92,92,.2); color: #F9D6D6; }
.quote-pop__body { position: relative; margin-top: 12px; display: flex; gap: 12px; align-items: flex-end; }
.quote-pop__text {
  flex: 1; min-width: 0; font: 800 17px/1.5 var(--f-head);
  letter-spacing: -.005em; color: var(--text);
}
.quote-pop__body .gg { width: 66px; height: 62px; animation: gtBob 3.6s ease-in-out infinite; }
.quote-pop__foot {
  position: relative; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(127,196,242,.24);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.quote-pop__foot span {
  flex: 1; min-width: 110px; font: 700 11.5px/1.35 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--text-faint);
}
.quote-pop__next {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: 20px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--bg); font: 900 13px/1 var(--f-body);
}
.quote-pop__next:hover { background: var(--accent-light); }

.nt-ready { margin: 11px 0 0; font: 700 12.5px/1.5 var(--f-num); }

/* --------------------------------- Görev aç: adım listesi düzenleyici */
.steps-edit { display: flex; flex-direction: column; gap: 6px; }
.steps-edit__row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; background: var(--surface-inset); border: 1px solid var(--hair);
}
.steps-edit__no {
  flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--tint-2); color: var(--accent-light);
  font: 800 11.5px/1 var(--f-num); font-variant-numeric: tabular-nums;
}
.steps-edit__label { flex: 1; min-width: 0; font: 700 13.5px/1.4 var(--f-body); overflow-wrap: anywhere; }
.steps-add { display: flex; gap: 8px; margin-top: 8px; }
.steps-add .text-input { flex: 1; min-width: 0; }
.steps-add .btn { flex: none; }

.panel-summary {
  margin: 0 0 16px; font: 700 14px/1.5 var(--f-body);
}

.goal__link { margin-top: 10px; }
.goal__link > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 11px; border-radius: 20px; border: 1px solid var(--hair-strong);
  font: 800 12.5px/1 var(--f-body); color: var(--text-soft);
}
.goal__link > summary::-webkit-details-marker { display: none; }
.goal__link > summary:hover { border-color: var(--accent-light); color: var(--text-bright); }
.goal__link[open] > summary [data-closed],
.goal__link:not([open]) > summary [data-open] { display: none; }

/* ------------------------------- Aksiyon planı: takıldığın durumlar */
.sits {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px; align-items: start; margin-top: 18px;
}
@media (max-width: 1160px) { .sits { grid-template-columns: minmax(0, 1fr); } }

.sits__list { display: flex; flex-direction: column; gap: 6px; }
.sits__q {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text-soft);
  font: 700 13.5px/1.35 var(--f-body);
}
.sits__q:hover { background: var(--tint); }
.sits__q[aria-pressed="true"] {
  background: var(--tint-2); border-color: rgba(79,168,232,.45); color: var(--text);
}
.sits__dot {
  flex: none; width: 7px; height: 7px; border-radius: 10px;
  background: var(--text-faint);
}
.sits__q[aria-pressed="true"] .sits__dot { background: var(--accent); }
.sits__text { flex: 1; min-width: 0; }
.sits__tag {
  flex: none; font: 700 11px/1 var(--f-kick); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft-2);
}

.sits__title {
  margin: 9px 0 0; font: 800 20px/1.25 var(--f-head);
  letter-spacing: -.015em; color: var(--text);
}
.sits__steps { display: flex; flex-direction: column; gap: 9px; margin-top: 15px; }
.sits__step { display: flex; align-items: flex-start; gap: 10px; }
.sits__step > span:first-child {
  flex: none; width: 22px; height: 22px; border-radius: 8px;
  display: grid; place-items: center; background: var(--tint-2);
  font: 800 12px/1 var(--f-num); color: var(--accent-light);
}
.sits__step > span:last-child { font: 600 14px/1.5 var(--f-body); color: var(--text-soft); }
.sits__warn {
  margin: 15px 0 0; padding: 11px 13px; border-radius: 8px;
  background: rgba(79,168,232,.08); border-left: 2px solid var(--accent);
  font: 800 14px/1.5 var(--f-body); color: var(--accent-light);
}

/* ------------------------------------------------ Takvim: sezon evresi */
.phases { display: flex; gap: 8px; margin-bottom: 16px; }
.phases__seg {
  /* flex-basis 0 + min-width 0: dar ekranda metin kırpılsın, şerit taşmasın. */
  flex-basis: 0; min-width: 0; padding: 10px 12px; border-radius: 8px; text-align: center;
  background: var(--surface-inset); border: 1px solid var(--hair); color: var(--text-dimmer);
  font: 700 12.5px/1.2 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phases__seg[data-on="1"] {
  color: var(--seg); border-color: color-mix(in srgb, var(--seg) 45%, transparent);
  background: color-mix(in srgb, var(--seg) 16%, transparent);
}

/* ------------------------------------------ Görevlerim: haftalık şerit */
.week { margin-top: 18px; }
.week__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.week__day {
  display: flex; flex-direction: column; gap: 6px; min-height: 92px; min-width: 0;
  padding: 10px 8px; border-radius: 10px;
  border: 1px solid var(--hair); background: transparent;
}
.week__day[data-busy="1"] { border-color: rgba(127,196,242,.28); background: rgba(127,196,242,.08); }
.week__day[data-today="1"] { border-color: rgba(79,168,232,.45); background: var(--tint); }
.week__head { display: flex; align-items: center; gap: 5px; }
.week__dow { font: 700 11.5px/1 var(--f-kick); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dimmer); }
.week__num { font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text-bright); }
.week__dot { margin-left: auto; width: 6px; height: 6px; border-radius: 10px; flex: none; }
.week__task { display: block; font: 600 11.5px/1.35 var(--f-body); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .week__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .week__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------- üyenin kendi sıralama kartları */
.rank-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px; margin-bottom: 18px; max-width: 740px;
}
.rank-card {
  display: flex; flex-direction: column; gap: 9px; padding: 16px 18px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--hair);
}
.rank-card b {
  font: 800 34px/1 var(--f-head); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rank-card b small { font: 700 14px/1 var(--f-body); color: var(--text-dimmer); }
.rank-card > span:last-child { font: 600 13.5px/1.45 var(--f-body); color: var(--text-dim); }

/* ==================== 11 · Aylık rapor (mentör) ==================== */
.report { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }
.report__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.report__head img { width: 34px; height: 34px; }
.report__head h2 { margin: 0; font: 800 22px/1.2 var(--f-head); letter-spacing: -.02em; }
.report__head .select { width: auto; min-width: 160px; margin-left: auto; }
.report__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }

.report__summary {
  margin: 0; padding: 16px 18px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--hair);
  font: 700 15px/1.65 var(--f-body); color: var(--text-strong);
}

.report__high { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.report__high-card {
  display: flex; flex-direction: column; gap: 6px; padding: 15px 16px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--hair);
}
.report__high-card b { font: 800 24px/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.report__high-card > span:last-child { font: 700 12.5px/1.4 var(--f-num); color: var(--text-dimmer); }

.report__weeks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.report__week { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.report__week-bar {
  display: flex; align-items: flex-end; width: 100%; height: 84px;
  border-radius: 6px; background: var(--tint); overflow: hidden;
}
.report__week-bar i { display: block; width: 100%; min-height: 3px; background: var(--accent); border-radius: 6px; }
.report__week b { font: 800 15px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.report__week > span:last-child { font: 700 11px/1.2 var(--f-num); color: var(--text-dimmer); text-align: center; }

.report__by { margin: 0; font: 700 12.5px/1.5 var(--f-num); color: var(--text-faint); }

@media print {
  /* Ay seçimi ve "Yazdır" düğmesi kâğıda basılmasın. */
  .sidebar, .topbar, .main__watermark, .new-task-btn,
  #r-month, #r-print { display: none !important; }

  body, .shell, .main, .view { background: #FFFFFF !important; color: #000000 !important; }

  /* Kartların kendi koyu zeminleri de beyaza dönmeli. Yalnız bölüm zeminini
     çevirmek yetmiyordu: numcard, row, özet ve öne çıkanlar koyu kalıyor,
     üstlerine siyah yazı basılıyor ve rapor okunmuyordu. */
  .report, .report section, .block, .numcard, .row,
  .report__summary, .report__high-card {
    background: #FFFFFF !important; border-color: #9FBDD4 !important; box-shadow: none !important;
  }
  .report { max-width: none !important; }
  .report *, .block * { color: #000000 !important; }

  /* Haftalık dağılım grafiği anlamını dolgudan alıyor; gri tonda kalsın. */
  .report__week-bar { background: #E7EFF6 !important; }
  .report__week-bar i { background: #6F9BBD !important; }

  /* Departman ve puan rozetleri zemin yerine çerçeveyle ayrılsın. */
  .tag { background: #FFFFFF !important; border: 1px solid #9FBDD4 !important; }

  /* Satırlar sayfa sonunda ikiye bölünmesin. */
  .row, .report__high-card, .numcard, .report__week { break-inside: avoid; }

  /* Yazdırma düğmesi yalnız raporda var ama her ekranda Ctrl+P denenebiliyor;
     koyu zeminli kartlar kâğıtta siyah yazıyla okunmuyordu. Aynı beyaz zemin
     + çerçeve muamelesi diğer ekranların kartlarına da uygulanır. */
  .panel, .taskcard, .rank-row, .score-row, .team-row, .check-card, .ms-card,
  .season-card, .issue, .goal, .principle, .step, .strip, .plan-progress,
  .plan-mascot, #view [role="tab"] {
    background: #FFFFFF !important; border-color: #9FBDD4 !important; box-shadow: none !important;
  }
  #view, #view * { color: #000000 !important; }
  /* Renkli vurgular kâğıtta da ayırt edilsin: öncelik şeridi, ilerleme
     dolgusu ve takvim işaretleri zeminlerini korur. */
  .taskcard__urgency, .bar > i, .sits__dot, .phases__seg, .strip__dot { background-color: revert-layer !important; }
  .taskcard, .rank-row, .team-row, .check-card, .ms-card, .step { break-inside: avoid; }
  /* Form denetimleri kâğıtta koyu kutu olarak çıkıyordu; içlerindeki değer
     (ör. sorumlu kişi) bilgi taşıdığı için gizlenmiyor, çerçeveye çevriliyor.
     Öncelik okları ise yalnız birer düğme, kâğıtta işi yok. */
  #view select, #view input, #view textarea {
    background: #FFFFFF !important; border: 1px solid #9FBDD4 !important;
    -webkit-appearance: none; appearance: none;
  }
  .taskcard__prio { display: none !important; }
}

/* ---------------------------------------------------------- bildirimler */
.bell {
  position: relative; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--hair); background: var(--surface-card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bell:hover { border-color: rgba(127,196,242,.4); }
.bell__count {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 10px; background: var(--bad); color: var(--bg);
  font: 500 9.5px/17px var(--f-num); font-variant-numeric: tabular-nums;
}
.notif-pop {
  position: absolute; top: 46px; right: 0; width: 320px; z-index: 40;
  background: var(--surface-card); border: 1px solid var(--hair-strong); border-radius: 10px; padding: 12px;
  box-shadow: 0 22px 50px rgba(2,9,20,.6); animation: gtRise .18s ease both;
}
.notif-pop__label {
  font: 600 12.5px/1 var(--f-body); color: var(--text-dimmer);
  text-transform: uppercase; letter-spacing: .08em; padding: 2px 4px 10px;
}
.notif-pop button {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: transparent; padding: 9px 4px; border-top: 1px solid var(--hair);
}
.notif-pop button:hover { background: rgba(127,196,242,.06); }
.notif-pop__title { font: 700 15px/1.4 var(--f-body); color: var(--text); }
.notif-pop__meta {
  margin-top: 3px; font: 700 13px/1.3 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--bad-text);
}
.notif-pop__empty { padding: 10px 4px; font: 600 14.5px/1.5 var(--f-body); color: var(--text-dim); }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
  border-radius: 10px; background: var(--surface-inset); border: 1px solid rgba(52,199,123,.32);
  box-shadow: 0 20px 44px rgba(2,9,20,.6); animation: gtPop .28s ease both;
  max-width: min(460px, calc(100vw - 32px));
}
.toast img { display: block; width: 50px; height: auto; flex: none; animation: gtBob 3s ease-in-out infinite; }
.toast__title { font: 700 13.5px/1.3 var(--f-head); color: var(--ok); }
.toast__sub {
  margin-top: 4px; font: 700 13.5px/1.3 var(--f-num);
  font-variant-numeric: tabular-nums; color: var(--text-dim);
}

/* ==================== Sorunlar ve hedefler ==================== */
.mech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
@media (max-width: 1160px) { .mech-grid { grid-template-columns: minmax(0, 1fr); } }

.mech-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mech-form input, .mech-form select {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--hair);
  color: var(--text); font: 700 13px/1 var(--f-body);
}
.mech-form input:focus, .mech-form select:focus { outline: none; border-color: var(--accent); }
.mech-form .wide { grid-column: 1 / -1; }
.mech-form .btn-primary { grid-column: 1 / -1; padding: 10px; font-size: 14px; }

.issue { padding: 11px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--hair); margin-bottom: 8px; }
.issue--done { opacity: .6; }
.issue__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.issue__problem { flex: 1; min-width: 140px; font: 800 13.5px/1.35 var(--f-body); }
.issue--done .issue__problem { text-decoration: line-through; color: var(--text-dim); }
.issue__solution { margin-top: 6px; font: 700 12.5px/1.45 var(--f-body); color: var(--text-soft); }
.issue__foot { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue__repeat {
  padding: 3px 8px; border-radius: 20px; font: 800 11px/1.3 var(--f-body);
  background: rgba(232,92,92,.16); color: var(--bad-text);
}
.goal { padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--hair); margin-bottom: 8px; }
.goal__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.goal__title { flex: 1; min-width: 140px; font: 800 13.5px/1.35 var(--f-body); }
.goal__pct { font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.goal__tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.goal__task {
  padding: 6px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent;
  color: var(--text-soft-2); font: 700 12px/1 var(--f-body);
}
.goal__task[aria-pressed="true"] { border-color: var(--ok); background: rgba(52,199,123,.14); color: var(--ok); }
.goal__task:hover { border-color: var(--accent); }

/* ------------------------------------------------- klavye odak halkası
   Alanlarda tasarım gereği outline yerine kenarlık rengi değişiyor
   (.select:focus { outline: none }). Fareyle tıklayan için doğru ama
   klavyeyle gezen için 1px kenarlık yeterince belirgin değil; odak
   halkası :focus-visible'da geri gelsin. Bu blok dosyanın sonunda:
   aynı özgüllükte kazanan kaynakta sonra yazılandır. */
.select:focus-visible, .text-input:focus-visible, .pin-input:focus-visible,
.search:focus-visible, .textarea:focus-visible, .big-input:focus-visible,
.when input:focus-visible, .when select:focus-visible,
.mech-form input:focus-visible, .mech-form select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------- dar ekranda üye ekleme
   .mech-form iki sütunlu; 320px'te sütun 124px'e düşüyor ve "Departman
   Kaptanı" açılır kutuda kırpılıyordu. Bu blok taban kuraldan sonra
   gelmeli, o yüzden burada. */
@media (max-width: 520px) {
  .mech-form { grid-template-columns: minmax(0, 1fr); }
}