/* navilhepnisay proje masası — sade beyaz, Medium sadeliği.
   Renkler: mürekkep / kâğıt / tek vurgu (koyu yeşil). Degrade yok, emoji yok. */
:root {
  --murekkep: #1c1b18;
  --soluk: #57534b;
  --cizgi: #e7e3da;
  --kagit: #ffffff;
  --zemin: #fbfaf7;
  --vurgu: #2f6b4f;
  --vurgu-acik: #eaf2ed;
  --yuksek: #b4552d;
  --orta: #a9822f;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', system-ui, sans-serif;
  --mono: Consolas, 'Courier New', monospace;

  /* ---------- yazı ölçeği ----------
     Paneldeki HER font-size bu altı basamağa bağlı; --yz hepsini birlikte
     ölçekler (Düzen modu > Yazı boyu, tema.json'daki yaziOlcek). Tek tek
     seçim yok: oranlar sabit kaldığı için başlık her zaman gövdeden büyük.
     Taban değerler eski sabitlerden ~3px büyük — 12px altına metin inmez. */
  --yz: 1;
  --yz-mini:   calc(12px * var(--yz));  /* eski 8-10px  — mini etiket, odak hedefi */
  --yz-kucuk:  calc(13px * var(--yz));  /* eski 11px    — satır işlemleri, z-zaman */
  --yz-orta:   calc(14px * var(--yz));  /* eski 12px    — kart metni, sayım satırı */
  --yz-normal: calc(15px * var(--yz));  /* eski 13px    — görev satırları */
  --yz-buyuk:  calc(16px * var(--yz));  /* eski 14-15px — gövde */
  --yz-dev:    calc(19px * var(--yz));  /* eski 16-19px — bölüm başlıkları */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: var(--yz-buyuk);
  color: var(--murekkep);
  background: var(--kagit);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* ---------- üst bar ---------- */
/* Üst bar zemini tam genişlikte kalır ama içindekiler sayfanın içerik
   sütunuyla aynı hizada başlar: marka, altındaki ilk kartla aynı dikeyde. */
:root { --icerik-w: min(96vw, calc(1060px * var(--yz))); }
.ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px max(32px, calc((100% - var(--icerik-w)) / 2)) 18px;
  border-bottom: 1px solid var(--cizgi);
}
.marka {
  font-family: var(--serif);
  font-size: calc(20px * var(--yz));
  letter-spacing: .01em;
}
.marka .nisay { font-weight: inherit; color: var(--gun-rengi, var(--vurgu)); }
.marka span {
  font-family: var(--sans);
  font-size: var(--yz-orta);
  color: var(--soluk);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-left: 10px;
}
.ust-nav { display: flex; align-items: baseline; gap: 22px; }
.tarih { font-family: var(--mono); font-size: var(--yz-orta); color: var(--soluk); }
.kisisel-link {
  font-size: var(--yz-buyuk);
  font-weight: 600;
  border-bottom: 2px solid var(--vurgu);
  padding-bottom: 2px;
}
.rozet-sayi { font-family: var(--mono); font-size: var(--yz-orta); color: var(--vurgu); }

main { flex: 1; width: 100%; max-width: var(--icerik-w); margin: 0 auto; padding: 30px 32px 60px; }

.alt {
  border-top: 1px solid var(--cizgi);
  padding: 14px max(32px, calc((100% - var(--icerik-w)) / 2));
  font-size: var(--yz-orta);
  color: var(--soluk);
}
.alt code { font-family: var(--mono); }

/* ---------- durum rozeti ---------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
  white-space: nowrap;
}
.rozet::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); }
.rozet.canli::before { background: var(--vurgu); }
.rozet.canli { color: var(--vurgu); }
.rozet.aktif::before { background: var(--murekkep); }
.rozet.teslim-bekliyor::before { background: var(--orta); }
.rozet.teslim-bekliyor { color: var(--orta); }
.rozet.planda::before { background: transparent; border: 1px solid var(--soluk); }
.rozet.pasif::before { background: var(--cizgi); }

/* ---------- ilerleme cetveli ---------- */
.cetvel { position: relative; height: 18px; margin: 10px 0 2px; }
.cetvel-iz { position: absolute; top: 8px; left: 0; right: 38px; height: 1px; background: var(--cizgi); }
.cetvel-iz i { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--cizgi); }
.cetvel-dolu { position: absolute; top: 7px; left: 0; height: 3px; background: var(--vurgu); }
.cetvel-yuzde {
  position: absolute; right: 0; top: 0;
  font-family: var(--mono);
  font-size: calc(var(--yz-orta) * var(--yz-yuzde, 1.3));  /* Düzen > Yüzde puntosu */
  font-weight: 600;
  color: var(--vurgu);
}
.pasif-kart .cetvel-dolu { background: var(--soluk); }
.pasif-kart .cetvel-yuzde { color: var(--soluk); }

/* ---------- arama ---------- */
.arama-kap { position: relative; }
#arama {
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  font-family: var(--sans);
  font-size: var(--yz-normal);
  padding: 5px 10px;
  width: 170px;
}
#arama:focus { outline: none; border-color: var(--vurgu); background: var(--kagit); width: 240px; }
#arama-sonuc {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 420px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--kagit);
  border: 1px solid var(--murekkep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 100;
}
#arama-sonuc a {
  display: block;
  padding: 9px 14px;
  font-size: var(--yz-normal);
  border-bottom: 1px dotted var(--cizgi);
}
#arama-sonuc a:hover { background: var(--vurgu-acik); }
#arama-sonuc .as-metin { display: block; }
#arama-sonuc i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--yz-mini);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
}
#arama-sonuc .as-bos { padding: 12px 14px; font-size: var(--yz-normal); color: var(--soluk); font-style: italic; }
/* ---------- Claude'a not kutusu (taban; modern.css üstüne yazar) ---------- */
.komut-kutusu { margin-bottom: 22px; }
.komut-form { display: flex; gap: 8px; }
.komut-form input[type=text] {
  flex: 1;
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  padding: 9px 12px;
  font-size: var(--yz-buyuk);
  font-family: var(--sans);
}
.komut-form input[type=text]:focus { outline: none; border-color: var(--vurgu); background: var(--kagit); }
.komut-form button {
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: var(--kagit);
  font-size: var(--yz-normal);
  padding: 7px 14px;
  cursor: pointer;
}
.komut-form button:hover { background: var(--vurgu); border-color: var(--vurgu); }
/* mikrofon (dikte) düğmesi — dinlerken kırmızı nabız */
.komut-form .komut-mik {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  color: var(--soluk);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}
.komut-form .komut-mik:hover { background: var(--kagit); border-color: var(--murekkep); color: var(--murekkep); }
.komut-form .komut-mik.dinliyor, .komut-form .komut-mik.dinliyor:hover {
  background: #bd2c2c; border-color: #bd2c2c; color: #fff;
  animation: mik-nabiz 1.2s ease-in-out infinite;
}
@keyframes mik-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(189, 44, 44, .55); }
  50% { box-shadow: 0 0 0 7px rgba(189, 44, 44, 0); }
}
.komut-liste { margin-top: 8px; }
.komut-satir { display: flex; align-items: baseline; gap: 10px; font-size: var(--yz-normal); color: var(--soluk); padding: 3px 0; border-bottom: 1px dotted var(--cizgi); }
.komut-metin { flex: 1; color: var(--murekkep); }
.komut-satir .z-zaman { font-family: var(--mono); font-size: var(--yz-kucuk); }

/* ---------- yaklaşan son tarihler ---------- */
.yaklasan-serit { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.yaklasan {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--cizgi);
  padding: 6px 12px;
  font-size: var(--yz-orta);
  max-width: 420px;
  background: var(--zemin);
}
.yaklasan b { font-family: var(--mono); font-weight: 400; color: var(--orta); white-space: nowrap; }
.yaklasan.kritik b { color: var(--yuksek); font-weight: 700; }
.yaklasan.gecti { border-color: var(--yuksek); }
.yaklasan.gecti b { color: var(--yuksek); font-weight: 700; }
.yaklasan span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yaklasan i { font-style: normal; font-family: var(--mono); font-size: var(--yz-mini); color: var(--soluk); text-transform: uppercase; white-space: nowrap; }
.yaklasan:hover { border-color: var(--murekkep); }

/* ---------- bugünün 3 işi ---------- */
.odak-kutu { border: 1px solid var(--murekkep); padding: 14px 18px; margin-bottom: 26px; background: var(--kagit); }
.odak-kutu .m-gunluk-baslik {
  font-family: var(--mono);
  font-size: var(--yz-kucuk);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
  margin-bottom: 8px;
}
.odak-sayi { color: var(--vurgu); }
.odak-satir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--cizgi);
  font-size: var(--yz-buyuk);
}
.odak-satir:last-child { border-bottom: none; }
.odak-satir input[type=checkbox] { accent-color: var(--vurgu); }
.odak-metin { flex: 1; }
.odak-satir.tamamlandi .odak-metin { text-decoration: line-through; color: var(--soluk); }
.odak-kutu .z-etiket, .kisisel-liste .z-etiket {
  font-family: var(--mono);
  font-size: var(--yz-mini);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
}
.odak-kutu .z-bos { font-size: var(--yz-normal); color: var(--soluk); font-style: italic; }

/* görev satırında son tarih çipi */
.tarih-cip {
  font-family: var(--mono);
  font-size: var(--yz-mini);
  white-space: nowrap;
  color: var(--orta);
  border: 1px solid var(--cizgi);
  padding: 1px 7px;
  margin-top: 3px;
}
.tarih-cip.kritik { color: var(--yuksek); border-color: var(--yuksek); }
.tarih-cip.gecti { color: #fff; background: var(--yuksek); border-color: var(--yuksek); }

/* ---------- ana sayfa ---------- */
.bolum-baslik {
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
  margin: 26px 0 14px;
}
.kart-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kart {
  display: block;
  border: 1px solid var(--cizgi);
  padding: 20px 22px 16px;
  background: var(--kagit);
}
.kart:hover { border-color: var(--murekkep); }
.kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kart-ad { font-family: var(--serif); font-size: calc(26px * var(--yz)); line-height: 1.2; }
.kart-etiket { font-size: var(--yz-orta); color: var(--soluk); font-style: italic; margin-left: 2px; }
.kart-ozet { font-size: var(--yz-buyuk); color: var(--soluk); margin-top: 8px; }
.kart-acik { font-size: var(--yz-normal); margin-top: 10px; }
.kart-acik b { font-family: var(--mono); font-weight: 400; color: var(--vurgu); }
.kucuk-liste .kart { padding: 14px 18px; }
.kucuk-liste .kart-ad { font-size: var(--yz-dev); }
.kucuk-liste { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pasif-kart { opacity: .55; }
.pasif-kart:hover { opacity: 1; }

/* ---------- proje sayfası ---------- */
.geri { font-size: var(--yz-normal); color: var(--soluk); display: inline-block; margin-bottom: 18px; }
.geri:hover { color: var(--murekkep); }
.proje-baslik { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.proje-baslik h1 { font-family: var(--serif); font-size: calc(38px * var(--yz)); font-weight: 400; line-height: 1.1; }
.proje-linkler { margin: 8px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.proje-linkler a {
  font-size: var(--yz-normal);
  color: var(--vurgu);
  border-bottom: 1px solid var(--vurgu-acik);
}
.proje-linkler a:hover { border-bottom-color: var(--vurgu); }
.proje-ozet { margin-top: 10px; font-size: var(--yz-buyuk); color: var(--soluk); max-width: 70ch; }

.sekmeler { display: flex; gap: 4px; margin: 26px 0 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.sekme {
  padding: 8px 14px 9px;
  font-size: var(--yz-buyuk);
  color: var(--soluk);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sekme:hover { color: var(--murekkep); }
.sekme.secili { color: var(--murekkep); font-weight: 600; border-bottom-color: var(--vurgu); }
/* Kardeş sekmedeki tamamlama yüzdesi — klasör sekmeleriyle aynı ölçeğe bağlı
   (Düzen modu > Yüzde puntosu, --yz-yuzde). */
.sekme .mini-yuzde {
  font-family: var(--mono);
  font-size: calc(var(--yz-kucuk) * var(--yz-yuzde, 1.3));
  font-weight: 600;
  color: var(--vurgu);
  margin-left: 6px;
}

.kutular { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.kutu { border: 1px solid var(--cizgi); padding: 18px 20px; background: var(--kagit); }
.kutu h2 {
  font-size: var(--yz-orta);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soluk);
  font-weight: 600;
  margin-bottom: 12px;
}
.kutu h2 .sayi { font-family: var(--mono); color: var(--vurgu); margin-left: 6px; }
.bos-not { font-size: var(--yz-normal); color: var(--soluk); font-style: italic; }

/* yapılanlar */
.yapilan-liste { list-style: none; }
.yapilan-liste li {
  font-size: var(--yz-buyuk);
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px dotted var(--cizgi);
}
.yapilan-liste li:last-child { border-bottom: none; }
.yapilan-liste li::before { content: '—'; position: absolute; left: 0; color: var(--vurgu); }

/* yapılacaklar */
.gorev-liste { list-style: none; }
.gorev {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--cizgi);
  font-size: var(--yz-buyuk);
}
.gorev:last-child { border-bottom: none; }
.gorev input[type=checkbox] { margin-top: 4px; accent-color: var(--vurgu); cursor: pointer; }
.gorev .metin { flex: 1; }
.gorev.tamamlandi .metin { text-decoration: line-through; color: var(--soluk); }
/* unutulmaması gereken görev: kalın + sol kenar işareti */
.gorev.vurgulu .metin { font-weight: 700; color: var(--murekkep); }
.gorev.vurgulu { border-left: 3px solid var(--yuksek); padding-left: 9px; margin-left: -12px; }
.gorev.vurgulu.tamamlandi { border-left-color: var(--cizgi); }
body.modern .gorev.vurgulu { border-left-color: var(--m-kirmizi, #bd2c2c); }
body.modern .gorev.vurgulu .metin { color: var(--m-murekkep, #1c1b18); }

.gorev.biten .metin { color: var(--murekkep); } /* Yapılanlar'a taşınan görev: çizgisiz, dolu metin */
.gorev.biten { border-bottom: 1px dotted var(--cizgi); }
.oncelik { font-size: var(--yz-mini); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.oncelik.yuksek { color: var(--yuksek); }
.oncelik.orta { color: var(--orta); }
.oncelik.dusuk { color: var(--soluk); }
.gorev-islem {
  border: none; background: none; cursor: pointer;
  font-size: var(--yz-kucuk); color: var(--soluk); font-family: var(--sans);
  padding: 3px 0; margin-top: 2px; white-space: nowrap;
}
.gorev-islem:hover { color: var(--vurgu); }
.gorev-islem.eklendi { color: var(--vurgu); cursor: default; }
.gorev-ekle { display: flex; gap: 8px; margin-top: 12px; }
.gorev-ekle input[type=text] {
  flex: 1;
  border: 1px solid var(--cizgi);
  padding: 7px 10px;
  font-size: var(--yz-buyuk);
  font-family: var(--sans);
  background: var(--zemin);
}
.gorev-ekle input[type=text]:focus { outline: none; border-color: var(--vurgu); background: var(--kagit); }
.gorev-ekle button, .kisisel-ekle button {
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: var(--kagit);
  font-size: var(--yz-normal);
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--sans);
}
.gorev-ekle button:hover, .kisisel-ekle button:hover { background: var(--vurgu); border-color: var(--vurgu); }

/* öneriler */
.oneri-liste { list-style: none; }
.oneri-liste li {
  font-size: var(--yz-buyuk);
  padding: 6px 0 6px 16px;
  position: relative;
  border-bottom: 1px dotted var(--cizgi);
}
.oneri-liste li:last-child { border-bottom: none; }
.oneri-liste li::before { content: '›'; position: absolute; left: 2px; color: var(--orta); font-weight: 700; }

/* notlarım */
.not-alani {
  width: 100%;
  min-height: 170px;
  border: 1px solid var(--cizgi);
  background: var(--zemin);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: var(--yz-buyuk);
  line-height: 1.6;
  resize: vertical;
}
.not-alani:focus { outline: none; border-color: var(--vurgu); background: var(--kagit); }
.not-durum { font-size: var(--yz-kucuk); color: var(--soluk); margin-top: 6px; font-family: var(--mono); }

/* ---------- kişisel sayfa ---------- */
.kisisel-baslik { font-family: var(--serif); font-size: calc(38px * var(--yz)); font-weight: 400; }
.kisisel-aciklama { color: var(--soluk); font-size: var(--yz-buyuk); margin-top: 6px; max-width: 62ch; }
.kisisel-ekle { display: flex; gap: 8px; margin: 22px 0 6px; max-width: 640px; }
.kisisel-ekle input[type=text] {
  flex: 1;
  border: 1px solid var(--cizgi);
  padding: 9px 12px;
  font-size: var(--yz-buyuk);
  font-family: var(--sans);
  background: var(--zemin);
}
.kisisel-ekle input[type=text]:focus { outline: none; border-color: var(--vurgu); background: var(--kagit); }
.kisisel-liste { list-style: none; margin-top: 14px; max-width: 760px; }
.kisisel-liste .gorev { padding: 9px 0; font-size: var(--yz-buyuk); }
.kaynak-etiket {
  font-size: var(--yz-kucuk);
  color: var(--vurgu);
  background: var(--vurgu-acik);
  padding: 2px 8px;
  margin-top: 3px;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .ust, .alt { padding-left: 18px; padding-right: 18px; }
  main { padding: 20px 18px 50px; }
  .kart-izgara, .kucuk-liste, .kutular { grid-template-columns: 1fr; }
  .proje-baslik h1 { font-size: calc(30px * var(--yz)); }
}

@media (prefers-reduced-motion: no-preference) {
  .kart, .sekme, .gorev-islem, a { transition: color .12s, border-color .12s, opacity .12s, background .12s; }
}

:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }