/* =====================================================================
   MKSK — Bileşenler
   Köşe yarıçapı anlam taşır: tablo 0, kap 2px, rozet 999px (bant/kuşak).
   Gölge yok; derinlik çizgiden ve zemin tonundan gelir (docs/06 §6.5).
   ===================================================================== */

/* --- butonlar --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  min-height: 48px; padding: 0 var(--b5);
  border: 1px solid transparent; border-radius: var(--k-yapi);
  font-family: inherit; font-size: var(--ol-govde); font-weight: 600;
  line-height: 1; cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-birincil { background: var(--aka); color: #fff; }
.btn-birincil:hover { background: var(--aka-dk); }

.btn-ikincil { background: transparent; border-color: var(--sen); color: var(--moji); }
.btn-ikincil:hover { border-color: var(--sen-kv); background: var(--kage-2); }

.btn-sessiz { background: transparent; color: var(--moji-2); min-height: 36px; padding: 0 var(--b3); font-weight: 500; }
.btn-sessiz:hover { background: var(--kage-2); color: var(--moji); }

.btn-yikici { background: transparent; color: var(--hata); }
.btn-yikici:hover { background: var(--hata); color: #fff; }

.btn-tam { width: 100%; }
/* Sayfa başlığındaki yardımcı eylemler satırı şişirmesin */
.btn-kompakt { min-height: 38px; padding: 0 var(--b3); font-size: var(--ol-kucuk); }
.btn-buyuk { min-height: 56px; font-size: 1.0625rem; }

/* --- form -------------------------------------------------------------- */
.alan { margin-bottom: var(--b4); }
.alan > label {
  display: block; font-size: var(--ol-etiket); font-weight: 500;
  color: var(--moji-2); margin-bottom: 6px;
}
/* Zorunluyu saymak yerine atlanabilir olanı işaretle (docs/06 §6.6) */
.alan .ops { color: var(--moji-3); font-weight: 400; }

.alan input[type="text"], .alan input[type="email"], .alan input[type="tel"],
.alan input[type="password"], .alan input[type="number"], .alan input[type="date"],
.alan input[type="search"], .alan select, .alan textarea {
  width: 100%; min-height: 48px; padding: 0 var(--b3);
  border: 1px solid var(--sen-kv); border-radius: var(--k-yapi);
  background: var(--gi); color: var(--moji);
  font-family: inherit; font-size: var(--ol-govde);
  transition: border-color var(--gecis);
}
.alan textarea { min-height: 120px; padding: var(--b3); line-height: 1.5; resize: vertical; }
.alan input:hover, .alan select:hover { border-color: var(--moji-3); }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--ao); }

.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--hata); }
.alan .yardim { display: block; font-size: var(--ol-mikro); color: var(--moji-3); margin-top: 6px; }
.alan .yardim-hata { display: block; font-size: var(--ol-mikro); color: var(--hata); margin-top: 6px; font-weight: 500; }

.onay { display: flex; align-items: flex-start; gap: var(--b2); cursor: pointer; font-size: var(--ol-kucuk); }
.onay input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--aka); flex: none; }

/* --- kart ---------------------------------------------------------------- */
.kart {
  background: var(--gi); border: 1px solid var(--sen);
  border-radius: var(--k-yapi); padding: var(--b5);
}
.kart-s { padding: var(--b4); }
/* `flex-wrap: wrap`: baslik ile yanindaki aciklama dar ekranda alt alta
   gecsin. Sarilmayinca ikisi yan yana 387 piksel istiyor ve sayfayi
   375 pikselin disina tasiriyordu. */
.kart-baslik {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--b2) var(--b3); margin-bottom: var(--b4);
}
.kart-baslik h2, .kart-baslik h3 { margin: 0; }

/* Tıklanabilir sayı kartı (pano) */
.sayi-kart {
  display: block; background: var(--gi); border: 1px solid var(--sen);
  border-radius: var(--k-yapi); padding: var(--b4);
  color: inherit; text-decoration: none; transition: border-color var(--gecis);
}
.sayi-kart:hover { border-color: var(--sen-kv); text-decoration: none; }
.sayi-kart.dikkat { border-left: 3px solid var(--aka); }
.sayi-kart .sayi { display: block; font-size: 2rem; font-weight: 800; font-stretch: 80%; line-height: 1.1; }
.sayi-kart .sayi.uyar { color: var(--aka); }
.sayi-kart .ad  { display: block; font-size: var(--ol-etiket); color: var(--moji-2); margin-top: 2px; }
.sayi-kart .alt { display: block; font-size: var(--ol-mikro); color: var(--moji-3); margin-top: var(--b2); }

/* --- KUŞAK ŞERİDİ: sistemin imzası (docs/06 §6.6) ------------------------ */
.sporcu-satir {
  display: flex; align-items: center; gap: var(--b4);
  background: var(--gi); border: 1px solid var(--sen); border-left: 0;
  border-radius: var(--k-yapi); padding: var(--b3) var(--b4);
  margin-bottom: -1px; color: inherit; text-decoration: none;
  transition: background var(--gecis);
}
.sporcu-satir:hover { background: var(--kage-2); text-decoration: none; }

.serit {
  flex: none; width: var(--serit-en); align-self: stretch;
  margin: calc(var(--b3) * -1) 0 calc(var(--b3) * -1) calc(var(--b4) * -1);
  border: 1px solid var(--sen); border-right: 0;
}
/* Siyah kuşakta dan derecesi kadar altın çizgi */
.serit.dan {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 8px, var(--kusak-altin) 8px 11px);
}

.avatar {
  flex: none; width: 40px; height: 40px; border-radius: var(--k-yapi);
  background: var(--kage); display: grid; place-items: center;
  font-weight: 700; font-size: var(--ol-kucuk); color: var(--moji-3);
  object-fit: cover; overflow: hidden;
}
.avatar-b { width: 56px; height: 56px; font-size: var(--ol-govde); }

.kim { flex: 1; min-width: 0; }
.kim .ad { display: block; font-weight: 600; }
.kim .meta {
  display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap;
  font-size: var(--ol-kucuk); color: var(--moji-2);
}
/* Orta nokta zinciri yerine ince dikey ayraç (docs/06 §6.10) */
.ayrac { width: 1px; height: 12px; background: var(--sen-kv); display: inline-block; flex: none; }

/* --- rozetler (yarıçap = bant, çünkü bunlar kuşaktır) -------------------- */
.rz {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--k-bant); padding: 3px 10px;
  font-size: var(--ol-mikro); font-weight: 500; border: 1px solid;
  white-space: nowrap;
}
.rz-ok    { background: var(--ok-bg);    color: var(--ok);    border-color: var(--ok-br); }
.rz-uyari { background: var(--uyari-bg); color: var(--uyari); border-color: var(--uyari-br); }
.rz-hata  { background: var(--hata-bg);  color: var(--hata);  border-color: var(--hata-br); }
.rz-bilgi { background: var(--bilgi-bg); color: var(--bilgi); border-color: var(--bilgi-br); }
.rz-notr  { background: var(--kage);     color: var(--moji-2);border-color: var(--sen); }
.nokta { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --- ilerleme çubuğu (kuşak yolculuğu) ----------------------------------- */
.ilerleme { height: 6px; background: var(--kage); border-radius: var(--k-bant); overflow: hidden; }
.ilerleme > span { display: block; height: 100%; background: var(--ao); border-radius: var(--k-bant); }
.ilerleme.tamam > span { background: var(--ok); }

/* --- tablo ---------------------------------------------------------------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--sen); border-radius: var(--k-yapi); background: var(--gi); }
table.tablo { border-collapse: collapse; width: 100%; font-size: var(--ol-kucuk); }
table.tablo th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; color: var(--moji-2); font-size: var(--ol-etiket);
  padding: var(--b3) var(--b4); background: var(--gi);
  border-bottom: 2px solid var(--sen-kv); white-space: nowrap;
}
table.tablo td { padding: var(--b3) var(--b4); border-bottom: 1px solid var(--sen); }
table.tablo tr:last-child td { border-bottom: 0; }
table.tablo td.sag, table.tablo th.sag { text-align: right; font-variant-numeric: tabular-nums; }
table.tablo tfoot td { font-weight: 700; border-top: 2px solid var(--sen-kv); background: var(--kage-2); }

/* --- flaş mesajlar --------------------------------------------------------- */
.flas {
  display: flex; align-items: flex-start; gap: var(--b3);
  padding: var(--b3) var(--b4); border: 1px solid; border-radius: var(--k-yapi);
  font-size: var(--ol-kucuk); margin-bottom: var(--b3);
}
.flas-ok    { background: var(--ok-bg);    color: var(--ok);    border-color: var(--ok-br); }
.flas-uyari { background: var(--uyari-bg); color: var(--uyari); border-color: var(--uyari-br); }
.flas-hata  { background: var(--hata-bg);  color: var(--hata);  border-color: var(--hata-br); }
.flas-bilgi { background: var(--bilgi-bg); color: var(--bilgi); border-color: var(--bilgi-br); }
.flas p { margin: 0; color: inherit; }
.flas a { color: inherit; text-decoration: underline; word-break: break-all; }
.flas .kapat { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }

/* --- boş durum: üzgün değil, davet edici ----------------------------------- */
.bos-durum {
  border: 1px dashed var(--sen-kv); border-radius: var(--k-yapi);
  padding: var(--b7) var(--b5); text-align: center; background: var(--gi);
}
.bos-durum p { margin: 0 auto var(--b4); color: var(--moji-2); max-width: 46ch; }

/* --- uyarı listesi (pano "dikkat gerektirenler") ---------------------------- */
.dikkat-liste { list-style: none; padding: 0; margin: 0; }
.dikkat-liste li { border-bottom: 1px solid var(--sen); }
.dikkat-liste li:last-child { border-bottom: 0; }
.dikkat-liste a {
  display: flex; align-items: center; gap: var(--b3);
  padding: var(--b3) 0; color: var(--moji); text-decoration: none;
}
.dikkat-liste a:hover { color: var(--aka); text-decoration: none; }
.dikkat-liste .adet {
  flex: none; min-width: 28px; height: 24px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--k-bant);
  background: var(--hata-bg); color: var(--hata);
  font-size: var(--ol-mikro); font-weight: 700;
}

/* --- madde listesi (uyarı kartlarının içi) --------------------------------
   Tarayıcının disk işareti kart içinde fazla ağır durur; ince bir
   çizgi hem hizayı korur hem maddeleri ayırır. */
.madde-liste { list-style: none; padding: 0; margin: 0 0 var(--b4); }
.madde-liste li {
  position: relative; padding: var(--b2) 0 var(--b2) var(--b5);
  font-size: var(--ol-kucuk); color: var(--moji-2); line-height: 1.55;
  border-bottom: 1px solid var(--sen);
}
.madde-liste li:last-child { border-bottom: 0; }
.madde-liste li::before {
  content: ''; position: absolute; left: var(--b2); top: 1.05em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--aka);
}
.madde-liste b { color: var(--moji); }

/* --- kod bloğu (crontab, komut örneği) -----------------------------------
   Yatay kaydırma kendi kabında kalır: sayfa gövdesi asla yana kaymaz. */
.kod-blok {
  margin: 0 0 var(--b4);
  padding: var(--b4);
  background: var(--kage);
  border: 1px solid var(--sen);
  border-radius: var(--k-yapi);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--ol-mikro);
  line-height: 1.7;
  color: var(--moji-2);
  overflow-x: auto;
  white-space: pre;
  -webkit-user-select: all; user-select: all;   /* tek tıkla seç, panele yapıştır */
}

/* =====================================================================
   LİSTE ARAÇLARI — filtre çubuğu, araç çubuğu, sekmeler, sayfalama
   ===================================================================== */

/* --- sayfa üst çubuğu --------------------------------------------------- */
.arac-cubugu {
  display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap;
  margin-bottom: var(--b4);
}
.arac-cubugu .sag-grup { margin-left: auto; display: flex; gap: var(--b2); flex-wrap: wrap; }

/* --- filtre çubuğu ------------------------------------------------------- */
.filtre {
  background: var(--gi); border: 1px solid var(--sen); border-radius: var(--k-yapi);
  padding: var(--b3) var(--b4); margin-bottom: var(--b4);
}
.filtre-satir { display: flex; gap: var(--b3); flex-wrap: wrap; align-items: flex-end; }
.filtre .alan { margin-bottom: 0; flex: 0 0 auto; }
.filtre .alan.genis { flex: 1 1 240px; min-width: 200px; }
.filtre .alan select, .filtre .alan input { min-height: 40px; }
.filtre .alan.dar input { width: 78px; }
.filtre-eylem { display: flex; gap: var(--b2); align-items: flex-end; }

/* Uygulanan filtreleri gösteren çipler */
.cipler { display: flex; gap: var(--b2); flex-wrap: wrap; margin-top: var(--b3); }
.cip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kage); border: 1px solid var(--sen); border-radius: var(--k-bant);
  padding: 3px 6px 3px 10px; font-size: var(--ol-mikro); color: var(--moji-2);
}
.cip a { color: var(--moji-3); text-decoration: none; font-size: 14px; line-height: 1; padding: 0 3px; }
.cip a:hover { color: var(--hata); text-decoration: none; }

/* --- seçim çubuğu (toplu işlem) ------------------------------------------ */
.secim-cubugu {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap;
  background: var(--sumi); color: #fff;
  border-radius: var(--k-yapi); padding: var(--b3) var(--b4);
  margin-top: var(--b4);
}
.secim-cubugu .sayi { font-weight: 700; }
.secim-cubugu select {
  min-height: 40px; padding: 0 var(--b3); border-radius: var(--k-yapi);
  border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff;
  font-family: inherit; font-size: var(--ol-kucuk);
}
.secim-cubugu select option { color: var(--moji); background: var(--gi); }
.secim-cubugu .btn-ikincil { border-color: rgba(255,255,255,.32); color: #fff; min-height: 40px; }
.secim-cubugu .btn-ikincil:hover { background: rgba(255,255,255,.1); }
.secim-cubugu .btn-birincil { min-height: 40px; }

/* --- satır seçim kutusu --------------------------------------------------- */
.sporcu-satir .sec { flex: none; }
.sporcu-satir .sec input { width: 18px; height: 18px; accent-color: var(--aka); }

/* --- sekmeler (sporcu kartı) ---------------------------------------------- */
.sekmeler {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--sen); margin-bottom: var(--b5);
}
.sekmeler a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: var(--b3) var(--b4); color: var(--moji-2); text-decoration: none;
  border-bottom: 2px solid transparent; font-size: var(--ol-kucuk); font-weight: 500;
}
.sekmeler a:hover { color: var(--moji); text-decoration: none; background: var(--kage-2); }
.sekmeler a[aria-current="page"] { color: var(--aka); border-bottom-color: var(--aka); }
.sekmeler .kilit { font-size: 11px; opacity: .7; }

/* --- sporcu kartı başlığı --------------------------------------------------- */
.kart-ust {
  display: flex; gap: var(--b4); align-items: flex-start; flex-wrap: wrap;
  background: var(--gi); border: 1px solid var(--sen); border-left: 0;
  border-radius: var(--k-yapi); padding: var(--b4) var(--b5);
  margin-bottom: var(--b4); position: relative;
}
.kart-ust .serit {
  margin: calc(var(--b4) * -1) 0 calc(var(--b4) * -1) calc(var(--b5) * -1);
  width: var(--serit-en);
}
.kart-ust .kim-blok { flex: 1 1 260px; min-width: 0; }
.kart-ust h1 { margin-bottom: 4px; font-size: 1.625rem; }
.kart-ust .ozet {
  display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap;
  font-size: var(--ol-kucuk); color: var(--moji-2);
}
.kart-ust .eylemler { display: flex; gap: var(--b2); flex-wrap: wrap; align-items: center; }

/* --- tanım listesi (kimlik/spor sekmeleri) ----------------------------------- */
.tanim { display: grid; grid-template-columns: 1fr; gap: 0; }
.tanim > div {
  display: flex; gap: var(--b4); padding: var(--b3) 0;
  border-bottom: 1px solid var(--sen); font-size: var(--ol-kucuk);
}
.tanim > div:last-child { border-bottom: 0; }
.tanim dt { flex: 0 0 168px; color: var(--moji-2); margin: 0; }
.tanim dd { margin: 0; flex: 1; min-width: 0; }
.tanim dd.bos { color: var(--moji-3); }
@media (min-width: 900px) { .tanim { grid-template-columns: 1fr 1fr; column-gap: var(--b7); } }

/* --- iki sütunlu sekme düzeni -------------------------------------------------- */
/* `minmax(0, 1fr)`: tek sutunlu dar ekranda da izgara icerigine gore
   sismesin. Icindeki .tablo-kap boylece kendi icinde kayabiliyor. */
.sekme-govde { display: grid; gap: var(--b4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .sekme-govde.yan-panelli { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --- sayfalama ------------------------------------------------------------------ */
.sayfalama {
  display: flex; align-items: center; gap: var(--b2); flex-wrap: wrap;
  margin-top: var(--b4); font-size: var(--ol-kucuk);
}
.sayfalama a, .sayfalama span {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sen); border-radius: var(--k-yapi);
  color: var(--moji); text-decoration: none;
}
.sayfalama a:hover { border-color: var(--sen-kv); background: var(--kage-2); text-decoration: none; }
.sayfalama .simdiki { background: var(--aka); border-color: var(--aka); color: #fff; font-weight: 600; }
.sayfalama .pasif { color: var(--moji-3); border-color: var(--sen); opacity: .5; }
.sayfalama .bilgi { border: 0; margin-left: auto; color: var(--moji-2); }

/* --- içe aktarım adımları ---------------------------------------------------------- */
.adimlar { display: flex; gap: var(--b2); flex-wrap: wrap; margin-bottom: var(--b6); }
.adimlar li {
  display: flex; align-items: center; gap: var(--b2);
  list-style: none; font-size: var(--ol-kucuk); color: var(--moji-3);
}
.adimlar li + li::before { content: ""; width: 20px; height: 1px; background: var(--sen-kv); }
.adimlar .no {
  width: 24px; height: 24px; border-radius: var(--k-bant);
  display: grid; place-items: center; font-size: var(--ol-mikro); font-weight: 700;
  border: 1px solid var(--sen-kv); color: var(--moji-3);
}
.adimlar .simdiki { color: var(--moji); font-weight: 600; }
.adimlar .simdiki .no { background: var(--aka); border-color: var(--aka); color: #fff; }
.adimlar .bitti .no { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Önizleme tablosunda satır durumu */
tr.satir-hatali   td { background: var(--hata-bg); }
tr.satir-mukerrer td { background: var(--uyari-bg); }

/* --- dosya seçici --------------------------------------------------------------------- */
.dosya-alani {
  border: 1px dashed var(--sen-kv); border-radius: var(--k-yapi);
  padding: var(--b6) var(--b5); text-align: center; background: var(--gi);
}
.dosya-alani input[type="file"] { margin: var(--b3) auto 0; display: block; max-width: 100%; }

/* =====================================================================
   AŞAMA 3 — Yoklama ekranı
   Antrenör salonda, ayakta, tek elle çalışır: satır 64 px, dokunma
   hedefleri büyük, ana eylem başparmakla ulaşılabilir (docs/05 W-06).
   ===================================================================== */

.yoklama-ozet {
  position: sticky; top: 56px; z-index: 10;
  display: flex; align-items: center; gap: var(--b3);
  padding: var(--b3) var(--b4); margin-bottom: var(--b4);
  background: var(--gi); border: 1px solid var(--sen); border-radius: var(--k-yapi);
  font-size: var(--ol-kucuk);
}
.yoklama-ozet .say b { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.yoklama-ozet .say:first-child b { color: var(--ok); }
.yoklama-ozet .say:nth-child(3) b { color: var(--hata); }

.yoklama-liste { margin-bottom: var(--b4); }
.yoklama-alt-bosluk { height: 104px; }

.yoklama-satir {
  display: flex; align-items: center; gap: var(--b3);
  min-height: 64px; padding: var(--b2) var(--b4);
  background: var(--gi); border: 1px solid var(--sen); border-left: 0;
  border-radius: var(--k-yapi); margin-bottom: -1px;
  position: relative; transition: background var(--gecis);
}
/* Gelmedi işaretlenen satır göz ucuyla ayırt edilir */
.yoklama-satir[data-durum="gelmedi"] { background: var(--hata-bg); }
.yoklama-satir[data-durum="izinli"],
.yoklama-satir[data-durum="hasta"]   { background: var(--uyari-bg); }
.yoklama-satir[data-durum="gec"]     { background: var(--bilgi-bg); }

.yoklama-satir .serit {
  margin: calc(var(--b2) * -1) 0 calc(var(--b2) * -1) calc(var(--b4) * -1);
}

/* --- iki durumlu anahtar --------------------------------------------- */
.yoklama-anahtar { display: flex; gap: 4px; flex: none; margin-left: auto; }

.yoklama-anahtar label {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--sen-kv); border-radius: var(--k-yapi);
  background: var(--gi); color: var(--moji-3);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
  -webkit-tap-highlight-color: transparent;
}
.yoklama-anahtar label:hover { border-color: var(--moji-3); }

/*
   Seçili görünüm SATIRIN data-durum özniteliğinden türer.
   Radio kardeşliğine ("input:checked + label") dayanmıyor: ana düğmeler
   artık kendi radio'sunu taşımıyor, ayrıntı menüsündekini `for` ile
   hedefliyor. Böylece bir sporcunun tek bir radio grubu olur ve JS kapalıyken
   de doğru düğme dolu görünür.
*/
.yoklama-satir[data-durum="geldi"] .anahtar-geldi,
.yoklama-satir[data-durum="gec"]   .anahtar-geldi {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
.yoklama-satir[data-durum="gec"] .anahtar-geldi {
  background: var(--bilgi); border-color: var(--bilgi);
}
.yoklama-satir[data-durum="gelmedi"] .anahtar-gelmedi {
  background: var(--hata); border-color: var(--hata); color: #fff;
}
/* İzinli/hasta: ikisi de dolu değil — satır rengi durumu anlatır */
.yoklama-satir[data-durum="izinli"] .yoklama-anahtar label,
.yoklama-satir[data-durum="hasta"]  .yoklama-anahtar label { opacity: .55; }

/* Ayrıntı menüsündeki radio klavyeyle gezilebilir kalmalı */
.yoklama-anahtar label:focus-within { outline: 2px solid var(--ao); outline-offset: 2px; }
.yoklama-secenekler input:focus-visible { outline: 2px solid var(--ao); outline-offset: 2px; }

/* --- ayrıntılı durumlar (katlanmış) ----------------------------------- */
.yoklama-ayrinti { flex: none; }
.yoklama-ayrinti > summary {
  list-style: none; display: grid; place-items: center;
  width: 40px; height: 48px; cursor: pointer;
  color: var(--moji-3); font-size: 18px; border-radius: var(--k-yapi);
  -webkit-tap-highlight-color: transparent;
}
.yoklama-ayrinti > summary::-webkit-details-marker { display: none; }
.yoklama-ayrinti > summary:hover { background: var(--kage-2); color: var(--moji); }

.yoklama-secenekler {
  position: absolute; right: var(--b4); top: calc(100% - 6px); z-index: 15;
  min-width: 220px; padding: var(--b3);
  background: var(--gi); border: 1px solid var(--sen-kv);
  border-radius: var(--k-yapi); box-shadow: var(--golge-katman);
}
.yoklama-secenek {
  display: flex; align-items: center; gap: var(--b2);
  min-height: 40px; padding: 0 var(--b2); cursor: pointer;
  font-size: var(--ol-kucuk); border-radius: var(--k-yapi);
}
.yoklama-secenek:hover { background: var(--kage-2); }
.yoklama-secenek input { width: 18px; height: 18px; accent-color: var(--aka); }
.yoklama-not { display: block; margin-top: var(--b2); padding: 0 var(--b2); }
.yoklama-not input {
  width: 100%; min-height: 40px; margin-top: 4px; padding: 0 var(--b2);
  border: 1px solid var(--sen-kv); border-radius: var(--k-yapi);
  background: var(--gi); color: var(--moji); font-family: inherit; font-size: var(--ol-kucuk);
}

/* --- kaydet çubuğu: başparmakla ulaşılabilir yerde --------------------- */
.yoklama-kaydet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding: var(--b3) var(--b4) calc(var(--b3) + env(safe-area-inset-bottom));
  background: var(--gi); border-top: 1px solid var(--sen);
}
@media (min-width: 1024px) {
  .yoklama-kaydet {
    position: static; padding: 0; border: 0; background: transparent;
    margin-top: var(--b5); max-width: 320px;
  }
  .yoklama-alt-bosluk { display: none; }
}

/* =====================================================================
   Haftalık ders programı
   ===================================================================== */
.hafta {
  display: grid; gap: var(--b3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hafta-gun {
  background: var(--gi); border: 1px solid var(--sen);
  border-radius: var(--k-yapi); padding: var(--b3); min-height: 120px;
}
.hafta-gun.bugun { border-color: var(--aka); }
.hafta-baslik {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--ol-etiket); font-weight: 600; color: var(--moji-2);
  padding-bottom: var(--b2); margin-bottom: var(--b2);
  border-bottom: 1px solid var(--sen);
}
.hafta-gun.bugun .hafta-baslik { color: var(--aka); }
.hafta-bos { font-size: var(--ol-mikro); color: var(--moji-3); padding: var(--b3) 0; }

.hafta-ders {
  display: block; padding: var(--b2) var(--b3);
  border-left: 3px solid var(--ao); background: var(--kage-2);
  border-radius: 0 var(--k-yapi) var(--k-yapi) 0;
  margin-bottom: var(--b2); text-decoration: none; color: inherit;
  transition: background var(--gecis);
}
.hafta-ders:hover { background: var(--kage); text-decoration: none; }
.hafta-ders .saat { display: block; font-size: var(--ol-mikro); color: var(--moji-2); }
.hafta-ders .grup { display: block; font-weight: 600; font-size: var(--ol-kucuk); }

/* =====================================================================
   AŞAMA 4 — Kuşak sistemi
   ===================================================================== */

/* Kuşak rengini metin yanında gösteren küçük nokta */
.kusak-nokta {
  display: inline-block; width: 10px; height: 10px; flex: none;
  border-radius: 50%; border: 1px solid var(--sen);
}

/* --- kuşak dağılımı (yatay bar; pasta grafik kullanılmaz) ------------- */
.dagilim { display: grid; gap: var(--b2); }
.dagilim-satir {
  display: grid; grid-template-columns: minmax(120px, 180px) 1fr 44px;
  align-items: center; gap: var(--b3); font-size: var(--ol-kucuk);
}
.dagilim-ad { display: flex; align-items: center; gap: var(--b2); }
.dagilim-cubuk { height: 12px; background: var(--kage); border-radius: var(--k-bant); overflow: hidden; }
.dagilim-cubuk > span { display: block; height: 100%; border-radius: var(--k-bant); }
.dagilim-sayi { text-align: right; font-weight: 600; }

@media (max-width: 640px) {
  .dagilim-satir { grid-template-columns: 1fr 36px; }
  .dagilim-cubuk { grid-column: 1 / -1; }
}

/* --- uygunluk listesi --------------------------------------------------- */
.uygunluk-satir {
  display: flex; align-items: center; gap: var(--b4); flex-wrap: wrap;
  background: var(--gi); border: 1px solid var(--sen); border-left: 0;
  border-radius: var(--k-yapi); padding: var(--b3) var(--b4); margin-bottom: -1px;
}
.uygunluk-satir.hazir { background: var(--ok-bg); }
.uygunluk-satir .serit {
  margin: calc(var(--b3) * -1) 0 calc(var(--b3) * -1) calc(var(--b4) * -1);
}
.uygunluk-satir .kim { flex: 1 1 220px; min-width: 0; }
.uygunluk-satir .kim .ad { display: block; font-weight: 600; color: inherit; text-decoration: none; }
.uygunluk-satir .kim .ad:hover { color: var(--aka); }
.uygunluk-satir .hedef { display: inline-flex; align-items: center; gap: 4px; }
.uygunluk-satir .sartlar { display: flex; gap: 4px; flex-wrap: wrap; flex: 2 1 320px; }
.uygunluk-satir .durum { flex: none; margin-left: auto; }

/* --- toplu yükseltme: seçim --------------------------------------------- */
.secim-liste { border: 1px solid var(--sen); border-radius: var(--k-yapi); overflow: hidden; }
.secim-satir {
  display: flex; align-items: center; gap: var(--b3);
  min-height: 56px; padding: var(--b2) var(--b4);
  background: var(--gi); border-bottom: 1px solid var(--sen);
  cursor: pointer; position: relative;
}
.secim-satir:last-child { border-bottom: 0; }
.secim-satir:hover { background: var(--kage-2); }
.secim-satir.pasif { opacity: .5; cursor: not-allowed; }
.secim-satir > input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--aka); }
.secim-satir .serit {
  margin: calc(var(--b2) * -1) 0; height: auto; align-self: stretch;
}
.secim-satir .kim { flex: 1; min-width: 0; }
.secim-satir .kim .ad { display: block; font-weight: 600; }

/* --- toplu yükseltme: önizleme ------------------------------------------- */
.onizleme-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--b4); flex-wrap: wrap;
  background: var(--gi); border: 1px solid var(--sen);
  border-radius: var(--k-yapi); padding: var(--b3) var(--b4); margin-bottom: -1px;
}
.onizleme-satir.uyarili { border-left: 3px solid var(--uyari); }
.onizleme-satir.atlanan { opacity: .6; }
.onizleme-satir .kim { flex: 1 1 200px; min-width: 0; }
.onizleme-satir .kim .ad { display: block; font-weight: 600; }
.onizleme-satir .kim .meta { font-size: var(--ol-mikro); color: var(--moji-2); }

.onizleme-satir .gecis { display: flex; align-items: center; gap: var(--b3); flex-wrap: wrap; }
.kusak-etiket {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ol-kucuk); white-space: nowrap;
}
.onizleme-satir .ok { color: var(--moji-3); font-size: 15px; }

/* --- açıklama notu ----------------------------------------------------------------
   Ekranın altındaki "bu ekran neden böyle davranıyor" paragrafı. Aşama 3'ten beri
   kullanılıyordu ama tanımı yoktu; gövde metniyle aynı ağırlıkta görünüyordu. */
.izah {
  font-size: var(--ol-kucuk); line-height: 1.6; color: var(--moji-2);
  border-left: 2px solid var(--sen-kv); padding-left: var(--b3);
  max-width: 76ch;
}
.izah b { color: var(--moji); font-weight: 600; }

/* --- marka rozeti (monogram) ----------------------------------------------
   Hem panel başlığında hem site menüsünde ve alt bilgisinde kullanılıyor;
   bu yüzden panel.css'te değil ortak dosyada durur. */
/*
 * Marka rozeti.
 *
 * Eskiden kulüp kısaltmasını yazan bir daireydi: logo kaynak
 * dosyası yoktu, yer tutuyordu. Logo geldi, artık görsel.
 * Logonun kendi beyaz halkası var, bu yüzden çerçeve ve zemin
 * kaldırıldı — ikisi üst üste binince halka çift görünüyordu.
 *
 * `object-fit: contain`: kare olmayan bir dosya konursa logo
 * ezilmez, boşluk bırakır.
 */
.rozet {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
}