/*
  GOREVLER MODULU - tablo gorunumu ve arac cubugu (madde 36)
  ---------------------------------------------------------------------------
  `uzak-kontrol.css` ve `toplantilar.css` ile AYNI DESEN: kendi yerlesimini
  getiren bir modul, token dosyalarini sismanlatmadan kendi siniflarini
  burada tanimlar. Siniflar `docs/ARAYUZ-SOZLESMESI.md` §3'e eklendi ve
  `gorevler.test.js` icindeki MODUL_CSS listesinde kayitli - "uydurulmus
  sinif" testi bu dosyayi mesru kaynak sayar.

  ⚠ YALNIZCA ANLAMSAL TOKEN. `var(--asv-cyan)` degil `var(--asv-vurgu-renk)`.
  Palet tokenini dogrudan kullanmak, tema degisiminde ezilecek bir sey
  birakmaz (arayuz sozlesmesi §5).

  ⚠ `[data-tema]` ONEKI: kural iki temada da gecerli, ama oneki dusurmek
  ozgulugu dusurur ve `asvaris-neon.css` icindeki kanban izgarasi geri
  gelirdi (asagidaki ilk blogun tam sebebi).
*/

/* --- Gorunum kabi --------------------------------------------------------

  KANBAN IZGARASI KART GOVDESINDEN ALINDI.

  `asvaris-neon.css` `.asv-gorevler-ekrani > .asv-kart-govde` uzerine dort
  sutunluk bir izgara ve `min-width: 1030px` koyuyordu. Tablo o kabin icine
  cizilince tablonun kendisi izgaranin bir hucresi oluyor, sutunlar
  daraliyor ve sayfa yatay olarak 1030 pikselden dar olamiyordu.

  Izgara artik panonun KENDI sarmalinda (`.asv-gorev-pano`); kart govdesi
  yeniden sirdan bir blok. Neon'un sutun/kart bicimleri `.asv-sutun` ve
  `.asv-liste-oge` uzerinden geldigi icin pano gorunumu AYNEN korunuyor. */

[data-tema] .asv-gorevler-ekrani > .asv-kart-govde {
  display: block;
  min-width: 0;
}

[data-tema] .asv-gorev-pano {
  display: grid;
  grid-template-columns: repeat(4, minmax(245px, 1fr));
  gap: var(--asv-space-sm);
  min-width: 1030px;
}

/* --- Arac cubugu (sekmeler + suzgecler) ---------------------------------- */

[data-tema] .asv-gorev-arac-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--asv-space-md);
  padding-bottom: var(--asv-space-sm);
  border-bottom: var(--asv-border) solid var(--asv-kenar-renk);
}

[data-tema] .asv-gorev-sekmeler {
  display: flex;
  gap: var(--asv-space-xs);
}

[data-tema] .asv-gorev-suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-sm);
  align-items: center;
}

/* Arama kutusu okunabilir bir genislikte kalir; esnek birakilirsa
   telefonda tek satira sikisip iki karakter gosterir. */
[data-tema] .asv-gorev-suzgec input[type="search"] {
  min-width: 200px;
}

[data-tema] .asv-gorev-onay {
  display: inline-flex;
  gap: var(--asv-space-xs);
  align-items: center;
  min-height: var(--asv-target-desktop);
  color: var(--asv-metin-soluk);
  cursor: pointer;
}

/* --- Tablo ----------------------------------------------------------------

  YATAY KAYDIRMA SARMALI. Dokuz sutunlu bir tablo telefona sigmaz; sigmaya
  zorlamak sutunlari okunamayacak kadar daraltir. Sarmal, SAYFAYI degil
  yalnizca tabloyu kaydirir - sozlesmenin "telefonda tek sutuna duser"
  kurali yerlesim icin gecerli, bir elektronik tablo icin degil. */

[data-tema] .asv-tablo-sarmal {
  overflow-x: auto;
  width: 100%;
  border: var(--asv-border) solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  background: var(--asv-yuzey);
}

[data-tema] .asv-tablo-sarmal .asv-tablo {
  min-width: 1040px;
  border: 0;
}

/* Girinti derinlikten geliyor: `--asv-girinti` satirda inline ayarlaniyor,
   carpan burada. Inline `padding` yazmak tema dosyalarindaki hucre
   dolgusunu ezerdi. */
[data-tema] .asv-gorev-ad {
  /* ⚠ CARPAN `space-lg` DEGIL `space-md` (madde 41). Uc kat derinlikte
     (sayfa > gorev > alt gorev) buyuk carpan, ad sutununun yarisini
     bosluga ayirip sagdaki sutunlari ekran disina itiyordu. Girinti
     hala okunur; alt gorevlerin sol kenar cizgisi de agaci gosteriyor. */
  padding-inline-start: calc(
    var(--asv-space-md) + (var(--asv-girinti, 0) * var(--asv-space-md))) !important;
  white-space: nowrap;
}

[data-tema] .asv-sayfa-satiri {
  background: var(--asv-yuzey-yuksek);
  font-weight: 700;
}

[data-tema] .asv-sayfa-satiri .asv-vurgulu {
  color: var(--asv-metin-renk);
}

[data-tema] .asv-hucre-dar {
  width: 1%;
  white-space: nowrap;
}

[data-tema] .asv-satir-no {
  color: var(--asv-metin-cok-soluk);
  font-variant-numeric: tabular-nums;
}

/* ISLEM DUGMELERI SARMAZ.
   Sardiklarinda satir dort dugme boyunca uzuyor ve tablo, iki gorev
   satiri arasinda 180 piksellik bosluklar barindiran bir seye donusuyordu.
   Sarmayi kapatmak satiri genisletir - ama tablo ZATEN yatay kayiyor
   (.asv-tablo-sarmal kurali), yani genislik bedava, yukseklik degil. */
[data-tema] .asv-gorev-islem {
  /* ⚠ ADIN ALTINDA, YANINDA DEGIL. Yaninda dururken islem dugmeleri Ad
     sutununu 600 piksele cikariyor ve tablonun SON UC SUTUNU (baslangic,
     bitis, ekip) ekran disinda kaliyordu - yani tablo gorunumunun asil
     vaadi, en cok bakilan alanlar, yatay kaydirma ardina dusuyordu.
     Klasor satiri iki satir yuksekliginde olsun; tarihler gorunur kalsin. */
  display: flex;
  flex-wrap: nowrap;
  gap: var(--asv-space-xs);
  align-items: center;
  margin-top: var(--asv-space-xs);
}

/* Shadow DOM'a ::part ile giriliyor (arayuz sozlesmesi §3).
   ⚠ min-height EZILMIYOR: 32px dokunma hedefi tabani bilesene
   BILINCLI olarak gomulu (Erisilebilirlik raporu §12.2). Yalnizca yatay
   dolgu ve harf araligi daraltiliyor - dokunulabilirlik aynen duruyor. */
[data-tema] .asv-gorev-islem asv-buton::part(buton) {
  padding-inline: var(--asv-space-sm);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Ac/kapa dugmesi: dokunma hedefi sozlesmenin masaustu tabani kadar.
   Daha kucugu, ic ice bir agacta en sik dokunulan seyi en kucuk hedef
   yapardi. */
[data-tema] .asv-ac-kapa {
  min-width: var(--asv-target-desktop);
  min-height: var(--asv-target-desktop);
  margin-inline-end: var(--asv-space-xs);
  color: var(--asv-metin-renk);
  background: transparent;
  border: var(--asv-border) solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--asv-text-sm);
}

[data-tema] .asv-ac-kapa:hover {
  border-color: var(--asv-kenar-parlak);
  background: var(--asv-yuzey-yuksek);
}

/* --- Durum rozeti ---------------------------------------------------------

  RENK TEK BASINA ANLAM TASIMAZ (sozlesme §6): rozet durumun ADINI zaten
  yaziyor, `data-durum` yalnizca ikinci bir isaret. Dort sinif yerine tek
  sinif + oznitelik: yeni bir durum eklendiginde CSS'e tek satir, tema
  dosyalarina hic dokunmadan. */

[data-tema] .asv-gorev-durum {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--asv-space-sm);
  border: var(--asv-border) solid currentColor;
  border-radius: 999px;
  font-size: var(--asv-text-xs);
  white-space: nowrap;
}

[data-tema] .asv-gorev-durum[data-durum="0"] { color: var(--asv-metin-soluk); }
[data-tema] .asv-gorev-durum[data-durum="1"] { color: var(--asv-mavi-vurgu); }
[data-tema] .asv-gorev-durum[data-durum="2"] { color: var(--asv-dikkat-renk); }
[data-tema] .asv-gorev-durum[data-durum="3"] { color: var(--asv-basari-renk); }

/* --- Gecikmis is ----------------------------------------------------------

  Kenarlik + renk BIRLIKTE: renk korlugu olan kullanici icin kirmizi tek
  basina gorunmez bir isaret olurdu. Metin ipucu (`title`) cizimde
  ayrica ekleniyor. */

[data-tema] .asv-gecikmis {
  color: var(--asv-hata-renk);
  border-color: var(--asv-hata-renk);
  font-weight: 700;
}

/* --- Telefon -------------------------------------------------------------- */

@media (max-width: 768px) {
  [data-tema] .asv-gorev-arac-cubugu {
    flex-direction: column;
    align-items: stretch;
  }

  [data-tema] .asv-gorev-suzgec input[type="search"] {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* Pano telefonda tek sutuna duser - sozlesme §6. */
  [data-tema] .asv-gorev-pano {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

@media (pointer: coarse) {
  /* Dokunmatikte hedef 44px - sozlesme §6, tema dosyalariyla ayni esik. */
  [data-tema] .asv-ac-kapa {
    min-width: var(--asv-target-touch);
    min-height: var(--asv-target-touch);
  }
}

/* --- Sprintler (madde 37) -------------------------------------------------

  Kart duzeni, tablo DEGIL. Sprint sayisi azdir ve her birinde bakilan sey
  tek satira sigmiyor: ad, hedef, tarih araligi, durum ve ilerleme. Tabloya
  sikistirmak hedef metnini kirpardi - yani sprintin varlik sebebini. */

[data-tema] .asv-sprint-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--asv-space-md);
}

[data-tema] .asv-sprint-karti {
  display: flex;
  flex-direction: column;
  background: var(--asv-yuzey);
  border: var(--asv-border) solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  box-shadow: var(--asv-kart-golge);
}

/* SUREN SPRINT: sol kenarda kalin bir serit.
   Renk TEK BASINA anlam tasimiyor - kartta durum rozeti ve tarih araligi
   zaten yazili; serit yalnizca gozun once nereye gidecegini soyluyor. */
[data-tema] .asv-sprint-suren {
  border-inline-start: 4px solid var(--asv-vurgu-renk);
}

[data-tema] .asv-sprint-karti .asv-kart-baslik {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-sm);
  align-items: center;
  justify-content: space-between;
}

[data-tema] .asv-sprint-karti .asv-kart-govde {
  display: flex;
  flex-direction: column;
  gap: var(--asv-space-sm);
}

/* Ilerleme cubugu SAYIYLA BIRLIKTE okunur (cizimde ayrica yaziliyor);
   cubuk tek basina kac gorev oldugunu soylemez. */
[data-tema] .asv-sprint-karti .asv-ilerleme {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: var(--asv-yuzey-yuksek);
  border: var(--asv-border) solid var(--asv-kenar-renk);
  border-radius: 999px;
}

[data-tema] .asv-sprint-karti .asv-ilerleme-dolgu {
  height: 100%;
  background: var(--asv-basari-renk);
}

/* --- Zaman cizelgesi (madde 39) -------------------------------------------

  ⚠ KUTUPHANE YOK (ADR-014). Cubuklar yuzde konumlu kutular; `left` ve
  `width` degerleri saf fonksiyonlardan (`cubukYerlesimi`) geliyor. Bu
  yuzden yerlesim matematigi tarayicisiz test edilebiliyor. */

[data-tema] .asv-zaman-sarmal {
  overflow-x: auto;
  width: 100%;
}

[data-tema] .asv-zaman-cizelge {
  min-width: 880px;
  border: var(--asv-border) solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  background: var(--asv-yuzey);
}

[data-tema] .asv-zaman-satir {
  display: grid;
  /* Sol sutun SABIT: kaydirirken gorev adi kaymasin diye degil - ad
     sutunu esnek olsaydi uzun bir baslik butun cizelgeyi daraltirdi. */
  grid-template-columns: 260px 1fr;
  align-items: center;
  min-height: 36px;
  border-top: var(--asv-border) solid var(--asv-kenar-renk);
}

[data-tema] .asv-zaman-satir:first-child {
  border-top: 0;
}

[data-tema] .asv-zaman-baslik {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--asv-yuzey-yuksek);
  font-size: var(--asv-text-xs);
}

[data-tema] .asv-zaman-grup {
  background: var(--asv-yuzey-yuksek);
  font-weight: 700;
}

[data-tema] .asv-zaman-ad {
  padding-block: var(--asv-space-xs);
  padding-inline: calc(
    var(--asv-space-md) + (var(--asv-girinti, 0) * var(--asv-space-md))) var(--asv-space-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-inline-end: var(--asv-border) solid var(--asv-kenar-renk);
}

/* Eksen: cubuklarin uzerine oturdugu konumlandirma baglami. */
[data-tema] .asv-zaman-eksen {
  position: relative;
  height: 28px;
}

[data-tema] .asv-zaman-ay {
  position: absolute;
  top: 0;
  height: 100%;
  padding-inline-start: var(--asv-space-xs);
  overflow: hidden;
  color: var(--asv-metin-soluk);
  white-space: nowrap;
  border-inline-start: var(--asv-border) solid var(--asv-kenar-renk);
}

/* BUGUN CIZGISI her satirda tekrarlanir - yalnizca baslikta olsaydi
   uzun bir listede asagi inince "bugun neredeydi" kaybolurdu. */
[data-tema] .asv-zaman-bugun {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--asv-vurgu-renk);
  opacity: 0.7;
}

[data-tema] .asv-zaman-cubuk {
  position: absolute;
  top: 6px;
  display: flex;
  align-items: center;
  height: 16px;
  min-width: 6px;
  padding-inline: var(--asv-space-xs);
  overflow: hidden;
  background: var(--asv-mavi-vurgu);
  border: var(--asv-border) solid currentColor;
  border-radius: 999px;
}

[data-tema] .asv-zaman-cubuk-metin {
  overflow: hidden;
  color: var(--asv-zemin);
  font-size: var(--asv-text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Oncelik renkleri rozetlerle AYNI kaynaktan - iki yerde ayri renk
   kullanmak "yuksek oncelik" icin iki farkli gorsel dil uretirdi. */
[data-tema] .asv-zaman-cubuk.asv-rozet-yuksek { background: var(--asv-dikkat-renk); }
[data-tema] .asv-zaman-cubuk.asv-rozet-orta   { background: var(--asv-mavi-vurgu); }
[data-tema] .asv-zaman-cubuk.asv-rozet-dusuk  { background: var(--asv-metin-cok-soluk); }

/* Tek tarihli gorev: kesikli kenar - "sure bilinmiyor" demek. */
[data-tema] .asv-zaman-cubuk.asv-zaman-tek-gun {
  border-style: dashed;
}

[data-tema] .asv-zaman-cubuk.asv-zaman-bitti {
  opacity: 0.45;
}

[data-tema] .asv-zaman-cubuk.asv-gecikmis {
  background: var(--asv-hata-renk);
}

/* --- Toplu islem seridi (madde 39) ---------------------------------------

  Tablonun USTUNDE duruyor ve yalnizca secim varken ciziliyor. Alta
  konsaydi uzun bir tabloda gorunmez, her zaman cizilseydi hicbir sey
  secmeyen kullanici icin bir seritlik bosluk olurdu. */

[data-tema] .asv-toplu-serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-sm);
  align-items: center;
  margin-bottom: var(--asv-space-sm);
  padding: var(--asv-space-sm) var(--asv-space-md);
  background: var(--asv-yuzey-yuksek);
  border: var(--asv-border) solid var(--asv-vurgu-renk);
  border-radius: var(--asv-kose);
}

/* Secili satir: sol kenarda serit + hafif zemin.
   Renk tek basina anlam tasimiyor - satirdaki onay kutusu zaten
   isaretli (arayuz sozlesmesi §6). */
[data-tema] .asv-tablo-satir.asv-secili {
  background: var(--asv-yuzey-yuksek);
  box-shadow: inset 3px 0 0 0 var(--asv-vurgu-renk);
}

/* ===================== MADDE 41 · WRIKE DERINLIGI ======================= */

/* ---- Alt gorev satiri ------------------------------------------------- */

/* Alt gorev, ustunun bir parcasi oldugunu GIRINTIDEN BASKA bir seyle de
   soylemeli: girinti tek basina, uzun bir tabloda kaydirildiginda
   kayboluyor. Sol kenardaki cizgi satiri bir gruba baglar. */
.asv-tablo-satir.asv-alt-gorev > .asv-gorev-ad {
  border-left: 2px solid var(--asv-kenar-renk);
}

/* ---- Etiketler -------------------------------------------------------- */

.asv-etiket-kutu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--asv-space-xs);
}

.asv-etiket {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--asv-kose);
  font-size: var(--asv-text-xs);
  border: 1px solid var(--asv-kenar-renk);
  background: var(--asv-yuzey-yuksek);
  color: var(--asv-metin-renk);
}

/* RENK ADLARI SUNUCUDAKI `GorevEtiketi.Renkler` ILE BIREBIR. Burada
   olmayan bir ad, varsayilan (gri) gorunumde kalir - bozuk degil,
   yalnizca renksiz. */
.asv-etiket[data-renk='mavi'] { border-color: var(--asv-vurgu-renk); }
.asv-etiket[data-renk='yesil'] { border-color: var(--asv-basari-renk); }
.asv-etiket[data-renk='sari'] { border-color: var(--asv-dikkat-renk); }
.asv-etiket[data-renk='turuncu'] { border-color: var(--asv-dikkat-renk); }
.asv-etiket[data-renk='kirmizi'] { border-color: var(--asv-hata-renk); }
.asv-etiket[data-renk='mor'] { border-color: var(--asv-kenar-parlak); }

/* ⚠ RENK TEK BASINA ANLAM TASIMIYOR (arayuz sozlesmesi §6): rozet zaten
   etiketin ADINI yaziyor, renk yalnizca gruplamayi hizlandiriyor. Bu
   yuzden zemin degil KENAR renklendiriliyor - iki temada da okunur
   kaliyor ve kontrast metinden bagimsiz. */

.asv-etiket-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-xs);
  align-items: center;
}

.asv-etiket-satir {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.asv-etiket-sil::part(buton) {
  padding: 0 0.3rem;
  font-size: var(--asv-text-xs);
}

/* ---- Surukle-birak ---------------------------------------------------- */

.asv-tablo-satir.asv-surukleniyor {
  opacity: 0.45;
}

/* Birakma hedefi USTTEN cizgiyle isaretleniyor: satirin tamamini
   boyamak, "bu satirin uzerine mi, yoksa onune mi?" sorusunu
   cevapsiz birakirdi. Ust cizgi "buraya, bu satirin ONUNE" diyor. */
.asv-tablo-satir.asv-birakma-hedefi > td {
  box-shadow: inset 0 2px 0 0 var(--asv-vurgu-renk);
}

.asv-sayfa-satiri.asv-birakma-hedefi > td {
  box-shadow: inset 0 0 0 2px var(--asv-vurgu-renk);
}

/* ---- Kontrol listesi (gorev detayi) ----------------------------------- */

.asv-kontrol-liste {
  display: flex;
  flex-direction: column;
  gap: var(--asv-space-xs);
}

.asv-kontrol-ozet {
  font-size: var(--asv-text-sm);
  color: var(--asv-metin-soluk);
  margin-bottom: var(--asv-space-xs);
}

.asv-kontrol-satir {
  display: flex;
  align-items: center;
  gap: var(--asv-space-sm);
  padding: var(--asv-space-xs) 0;
  border-bottom: 1px solid var(--asv-kenar-renk);
}

.asv-kontrol-etiket {
  display: flex;
  align-items: center;
  gap: var(--asv-space-sm);
  flex: 1;
  cursor: pointer;
}

/* Bitmis madde USTU CIZILI ve soluk - iki isaret birden, cunku yalnizca
   solukluk dusuk kontrastta kaybolur. */
.asv-kontrol-bitti .asv-kontrol-etiket {
  text-decoration: line-through;
  color: var(--asv-metin-soluk);
}

.asv-kontrol-form {
  display: flex;
  gap: var(--asv-space-xs);
  align-items: center;
  margin-top: var(--asv-space-sm);
}

/* ---- Ilerleme notlari ------------------------------------------------- */

.asv-not-liste {
  display: flex;
  flex-direction: column;
  gap: var(--asv-space-sm);
}

.asv-not {
  padding: var(--asv-space-sm);
  border: 1px solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  background: var(--asv-yuzey);
}

.asv-not-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--asv-space-xs);
  margin-bottom: var(--asv-space-xs);
}

.asv-not-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asv-space-xs);
  margin-top: var(--asv-space-xs);
}

/* Not kunyesi - satir ici, kucuk ve soluk. */
.asv-not-yazan {
  color: var(--asv-metin-soluk);
  font-size: var(--asv-text-xs);
}

/* Ilerleme kaydiraci - tabloda hucre acilinca, detayda her zaman. */
.asv-ilerleme-kaydirac {
  accent-color: var(--asv-vurgu-renk);
}

/* ══════════════ MADDE 42 · WRIKE GORUNUMU ══════════════════════════════
   OLCULEN SORUN: tablo bir LISTE degil, doldurulmamis bir FORM gibi
   gorunuyordu. Her hucrede kalici bir `<select>`/`<input>`, her sutun
   arasinda dikey cizgi, her satirda "gg.aa.yyyy" ve "%0".

   UC DEGISIKLIK:
     1. Hucreler metin; kontrol yalnizca tiklaninca (`tablo.js`).
     2. Dikey cizgiler kalkti, satir yuksekligi dustu, zebra kalkti.
     3. Bos degerler yer tutucu yerine ince bir tire.

   ⚠ HEPSI `.asv-gorevler-ekrani` ALTINA KAPSANDI. Kapsanmasaydi
   Kullanicilar, Dosyalar, Ekip gibi butun tablo ekranlari da degisirdi -
   oysa olculen sorun yalnizca bu ekranda.

   ⚠ SECICILER TEMA DOSYALARINDAN DAHA OZGUL OLMAK ZORUNDA.
   `asvaris-kurumsal.css` bu dosyadan SONRA yukleniyor (`index.html`),
   yani esit ozgullukte o kazanir. `[data-tema] .asv-gorevler-ekrani`
   uc sinif/oznitelik tasiyor ve temanin `[data-tema] .asv-tablo`
   kaliplarini gecer.
   ═══════════════════════════════════════════════════════════════════════ */

[data-tema] .asv-gorevler-ekrani .asv-tablo {
  border-collapse: collapse;
  background: var(--asv-yuzey);
  box-shadow: none;
  border-radius: var(--asv-kose);
  overflow: hidden;
}

/* Baslik seridi: kucuk, soluk, tek cizgili. */
[data-tema] .asv-gorevler-ekrani .asv-tablo-baslik {
  background: var(--asv-yuzey-yuksek);
  color: var(--asv-metin-soluk);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--asv-text-xs);
  font-weight: 600;
}

/* ⚠ DIKEY CIZGILER KALKIYOR. `asvaris-neon.css` her hucreye
   `border-right` koyuyor; on sutunlu bir tabloda bu, iceriginden cok
   cizgisi olan bir izgara uretiyordu. Wrike'ta da yalnizca YATAY
   ayirici var. */
[data-tema] .asv-gorevler-ekrani :where(.asv-tablo-baslik, .asv-tablo-satir) > * {
  border-right: 0;
  padding: 2px 10px;
  vertical-align: middle;
}

/* ⚠ ZEBRA KALKIYOR. Bir satir koyu bir satir acik, satir ici
   duzenlemede hucrenin odak zeminini okunamaz hale getiriyordu; tek
   renk zemin + belirgin hover, uzun listelerde daha okunur. */
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir,
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir:nth-child(even) {
  background: var(--asv-yuzey);
  border-top: 0;
  border-bottom: 1px solid var(--asv-kenar-renk);
  height: 38px;
}

[data-tema] .asv-gorevler-ekrani .asv-tablo-satir:hover {
  background: var(--asv-yuzey-yuksek);
}

/* Secili satir, hover'dan AYIRT EDILEBILIR olmali: sol kenarda serit. */
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir.asv-secili {
  background: var(--asv-yuzey-yuksek);
  box-shadow: inset 3px 0 0 0 var(--asv-vurgu-renk);
}

/* ---- Hucre dugmesi: metin gibi durur, tiklanabilir oldugunu hover'da
        soyler ---------------------------------------------------------- */

.asv-hucre-dugme {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 28px;
  padding: 2px 6px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--asv-kose);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asv-hucre-dugme:hover {
  border-color: var(--asv-kenar-renk);
  background: var(--asv-zemin);
}

/* ⚠ ODAK HALKASI KALDIRILMIYOR. Hucreler artik dugme oldugu icin
   klavyeyle gezilebiliyorlar; halkasiz bir dugmede kullanicinin nerede
   oldugu gorunmez olurdu. */
.asv-hucre-dugme:focus-visible {
  outline: 2px solid var(--asv-vurgu-renk);
  outline-offset: -1px;
}

/* Kilitli hucre dugme DEGIL - imlec de degismiyor ki tiklanabilir
   sanilmasin. */
.asv-hucre-kilitli {
  cursor: default;
}

/* Hucre icindeki kontrol, dugmenin yerini aldiginda ayni yuksekligi
   korumali; yoksa satir tiklandigi anda ziplar. */
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir select,
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir input[type='date'],
[data-tema] .asv-gorevler-ekrani .asv-tablo-satir input[type='range'] {
  width: 100%;
  min-height: 28px;
  margin: 0;
}

/* ---- Bos deger ---------------------------------------------------------
   ⚠ METIN ICERIDE DEGIL, `::before` ILE. Bos hucrenin tiresi
   KOPYALANABILIR bir karakter olsaydi, tabloyu Excel'e yapistiran
   kullanicinin bos hucrelerine "–" dolardi. */
.asv-hucre-bos {
  display: inline-block;
  min-width: 1rem;
  color: var(--asv-metin-cok-soluk);
  font-size: var(--asv-text-sm);
}

.asv-hucre-bos::before {
  content: '\2013';
}

/* ---- Numara / secim ayni sutunda -------------------------------------- */

.asv-satir-basi {
  position: relative;
  width: 44px;
  text-align: center;
}

.asv-satir-basi .asv-satir-no {
  color: var(--asv-metin-cok-soluk);
  font-size: var(--asv-text-xs);
  font-variant-numeric: tabular-nums;
}

/* Kutu DOM'da duruyor ama gorunmuyor: `display: none` olsaydi
   klavyeyle secim imkansiz olurdu. */
.asv-satir-basi .asv-secim-kutusu {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  opacity: 0;
  pointer-events: none;
}

.asv-tablo-satir:hover .asv-satir-basi .asv-secim-kutusu,
.asv-tablo-satir.asv-secili .asv-satir-basi .asv-secim-kutusu,
.asv-satir-basi .asv-secim-kutusu:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.asv-tablo-satir:hover .asv-satir-basi .asv-satir-no,
.asv-tablo-satir.asv-secili .asv-satir-basi .asv-satir-no {
  opacity: 0;
}

.asv-secim-tumu {
  width: 14px;
  height: 14px;
}

/* ---- Ad sutunu --------------------------------------------------------- */

.asv-sutun-ad {
  min-width: 22rem;
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-ad {
  /* Islem dugmeleri BURAYA gore mutlak konumlaniyor (asagidaki
     "tablo oynuyordu" gerekcesi). */
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Klasor isareti - yalnizca SAYFA satirlarinda.
   ⚠ METIN DEGIL, CIZIM. Emoji kullanilsaydi her isletim sisteminde
   baska bir sekil cikardi ve hizalama bozulurdu.
   ⚠ GOREV SATIRINDA KARSILIGI YOK: denendi, adin solundaki bos kare
   onay kutusu gibi okunuyordu (`tablo.js` yorumu). */
.asv-klasor-simge {
  flex: none;
  width: 13px;
  height: 11px;
  border: 1.5px solid var(--asv-metin-cok-soluk);
  border-top-width: 4px;
  border-top-color: var(--asv-metin-soluk);
  border-radius: 2px;
}

/* Sayfa/alt gorev sayaci - rozet degil, soluk bir sayi (Wrike'taki gibi). */
.asv-sayi {
  flex: none;
  color: var(--asv-metin-cok-soluk);
  font-size: var(--asv-text-xs);
  font-weight: 400;
}

.asv-kontrol-rozet {
  flex: none;
  color: var(--asv-metin-soluk);
  font-size: var(--asv-text-xs);
  font-variant-numeric: tabular-nums;
}

/* ---- Sorumlu ----------------------------------------------------------- */

.asv-kisi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.asv-kisi-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--asv-vurgu-renk);
  color: var(--asv-zemin);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Atanmamis: kesikli bos daire. Hucre tamamen bos kalsaydi "buraya kisi
   atanir" oldugu anlasilmazdi. */
.asv-kisi-avatar-bos {
  background: transparent;
  border: 1px dashed var(--asv-kenar-renk);
}

.asv-kisi-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--asv-text-sm);
}

/* ---- Durum: sol renk blokuyla hap ------------------------------------- */

[data-tema] .asv-gorevler-ekrani .asv-gorev-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: var(--asv-yuzey-yuksek);
  color: var(--asv-metin-renk);
  font-size: var(--asv-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* ⚠ RENK TEK BASINA ANLAM TASIMIYOR (arayuz sozlesmesi §6): hap zaten
   durumun ADINI yaziyor, soldaki blok yalnizca taramayi hizlandiriyor. */
[data-tema] .asv-gorevler-ekrani .asv-gorev-durum::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--asv-metin-cok-soluk);
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-durum[data-durum='1']::before {
  background: var(--asv-vurgu-renk);
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-durum[data-durum='2']::before {
  background: var(--asv-dikkat-renk);
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-durum[data-durum='3']::before {
  background: var(--asv-basari-renk);
}

/* ---- Oncelik: duz metin, yalnizca YUKSEK renkli ------------------------
   ⚠ SECICI TEMADAN DAHA OZGUL OLMAK ZORUNDA. `asvaris-kurumsal.css`
   `.asv-rozet-orta` ve `.asv-rozet-dusuk` icin de renk veriyor; uc
   oncelik birden renklenince tablo bir trafik isigina donuyordu ve
   gercekten acil olan satir one cikmiyordu. */
[data-tema] .asv-gorevler-ekrani .asv-oncelik {
  font-size: var(--asv-text-sm);
  color: var(--asv-metin-soluk);
  font-weight: 400;
  background: transparent;
  border: 0;
  padding: 0;
}

[data-tema] .asv-gorevler-ekrani .asv-oncelik.asv-rozet-yuksek {
  color: var(--asv-hata-renk);
  font-weight: 600;
}

/* ---- Tarih ------------------------------------------------------------- */

.asv-tarih {
  font-size: var(--asv-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Ilerleme ---------------------------------------------------------- */

.asv-ilerleme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 5.5rem;
}

.asv-ilerleme-oluk {
  flex: 1;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--asv-kenar-renk);
  overflow: hidden;
}

.asv-ilerleme-dolgu {
  display: block;
  height: 100%;
  width: var(--asv-ilerleme, 0%);
  background: var(--asv-vurgu-renk);
}

.asv-ilerleme-tam {
  background: var(--asv-basari-renk);
}

.asv-ilerleme-metin {
  flex: none;
  min-width: 2.2rem;
  text-align: right;
  color: var(--asv-metin-soluk);
  font-size: var(--asv-text-xs);
  font-variant-numeric: tabular-nums;
}

/* ---- Etiket ------------------------------------------------------------ */

[data-tema] .asv-gorevler-ekrani .asv-etiket {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.6;
}

.asv-tablo .asv-etiket-kutu {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  max-width: 13rem;
}

/* ---- Sayfa satiri ------------------------------------------------------ */

[data-tema] .asv-gorevler-ekrani .asv-sayfa-satiri {
  background: var(--asv-zemin);
  font-weight: 600;
}

[data-tema] .asv-gorevler-ekrani .asv-sayfa-satiri:hover {
  background: var(--asv-zemin);
}

[data-tema] .asv-gorevler-ekrani .asv-sayfa-satiri .asv-gorev-ad > a,
[data-tema] .asv-gorevler-ekrani .asv-sayfa-satiri .asv-vurgulu {
  font-weight: 600;
}

/* ---- Ac/kapa okları ---------------------------------------------------- */

[data-tema] .asv-gorevler-ekrani .asv-ac-kapa {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
}

.asv-ac-kapa-bosluk {
  flex: none;
  display: inline-block;
  width: 18px;
}

/* ---- Satir ici ekleme -------------------------------------------------- */

[data-tema] .asv-gorevler-ekrani .asv-ekleme-satiri,
[data-tema] .asv-gorevler-ekrani .asv-ekleme-satiri:hover {
  background: transparent;
  border-bottom-color: transparent;
}

.asv-ekleme-girdi {
  flex: 1;
  min-width: 8rem;
  max-width: 22rem;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--asv-kose);
  background: transparent;
  color: var(--asv-metin-renk);
  font: inherit;
  font-size: var(--asv-text-sm);
}

.asv-ekleme-satiri:hover .asv-ekleme-girdi {
  border-color: var(--asv-kenar-renk);
}

.asv-ekleme-girdi:focus {
  border-color: var(--asv-vurgu-renk);
  background: var(--asv-yuzey);
}

.asv-ekleme-arti {
  flex: none;
  color: var(--asv-metin-cok-soluk);
  font-weight: 700;
}

/* ---- Islem dugmeleri --------------------------------------------------- */

/* ================== OLCULEN ARIZA: TABLO OYNUYORDU ==================
   Dugmeler satir icinde AKISTA duruyordu ve uzerine gelince
   `max-width: 0` -> `30rem` diye genisliyordu. Tablo `table-layout:
   auto` oldugu icin ad sutununun genisligi bu icerikten hesaplaniyor:
   imlec bir satira her girdiginde BUTUN SUTUNLAR yeniden olculuyor ve
   basliklar saga sola ziplıyordu. Kullanicinin bildirdigi "bir saga
   bir sola oynama" tam olarak buydu.

   ⚠ COZUM: DUGMELER AKISTAN CIKARILDI. Mutlak konumlu bir oge
   ebeveyninin genisligine HIC katkida bulunmaz; gorunup kaybolmasi
   artik tek bir pikseli bile kaydirmiyor. `visibility` de artik
   guvenli - yer kaplamasinin onemi kalmadi.

   ⚠ ARKASI DOLU OLMAK ZORUNDA. Dugmeler uzun basliklarin USTUNE
   biniyor; saydam birakilsaydi metin dugmelerin altindan okunur ve
   ikisi birbirine karisirdi.
   ==================================================================== */
.asv-tablo-satir .asv-gorev-islem {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 2px;
  padding-left: 14px;
  background: var(--asv-yuzey-yuksek);
}

.asv-sayfa-satiri .asv-gorev-islem {
  background: var(--asv-zemin);
}

@media (hover: hover) and (pointer: fine) {
  .asv-tablo-satir .asv-gorev-islem {
    visibility: hidden;
  }

  .asv-tablo-satir:hover .asv-gorev-islem,
  .asv-tablo-satir:focus-within .asv-gorev-islem {
    visibility: visible;
  }
}

.asv-tablo-satir .asv-gorev-islem asv-buton::part(buton) {
  padding: 1px 6px;
  font-size: 11px;
  min-height: 0;
}

/* ---- Alt gorev --------------------------------------------------------- */

[data-tema] .asv-gorevler-ekrani .asv-tablo-satir.asv-alt-gorev .asv-gorev-ad > a {
  font-weight: 400;
}

/* ---- Dar ekran --------------------------------------------------------- */

@media (max-width: 40rem) {
  .asv-sutun-ad { min-width: 14rem; }
  [data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a { max-width: 11rem; }
  .asv-kisi-ad { display: none; }
}

/* Gorev tablosu ON SUTUN tasiyor; alt siniri olmasaydi tarayici
   sutunlari sikistirip tarihleri ve etiketleri okunamaz hale getirirdi.
   Sarmal zaten yatay kaydiriyor (`.asv-tablo-sarmal`). */
.asv-gorev-tablosu {
  min-width: 1100px;
}

/* ================== BUYUK HARF KAPATILIYOR ==================
   Tema, dugmelere `text-transform: uppercase` veriyor (dugmelerde
   dogru bir tercih). Hucreler artik birer `<button>` oldugu icin kisi
   adlari "ZACK TURNER", durumlar "DEVAM EDIYOR" diye BAGIRIYORDU -
   tablo okunmasi gereken bir liste, bir dugme dizisi degil.
   ============================================================ */
[data-tema] .asv-gorevler-ekrani .asv-hucre-dugme,
[data-tema] .asv-gorevler-ekrani .asv-hucre-dugme * {
  text-transform: none;
  letter-spacing: normal;
  font-weight: inherit;
}

/* Ad sutunu biraz daralti: on sutunlu tabloda yatay kaydirmayi azaltir. */
.asv-sutun-ad {
  min-width: 18rem;
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a {
  max-width: 20rem;
}

/* ---- Son rotuslar (madde 42) ------------------------------------------- */

/* Ilerleme: cubuk ile yuzde metni CAKISIYORDU. `inline-flex` + sabit
   `min-width`, esnek kutuda daralinca oluk metnin altina giriyordu;
   oluga `min-width: 0` vermek buzulmeyi metne degil cubuga yikar. */
.asv-ilerleme {
  display: flex;
  width: 100%;
  gap: 8px;
}

.asv-ilerleme-oluk {
  min-width: 0;
}

/* ⚠ GOREV ADI MAVI BAGLANTI DEGIL. Her satirda mavi bir baglanti,
   tabloyu bir baglanti listesine cevirip okunmasi gereken metni
   (durum, tarih) geri plana itiyordu. Baglanti oldugu uzerine
   gelince anlasiliyor - Wrike da boyle yapiyor. */
[data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a {
  color: var(--asv-metin-renk);
  text-decoration: none;
}

[data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a:hover,
[data-tema] .asv-gorevler-ekrani .asv-gorev-ad > a:focus-visible {
  color: var(--asv-vurgu-renk);
  text-decoration: underline;
}

/* ⚠ HUCRE HOVER ZEMINI BEYAZ, koyu degil. `--asv-zemin` kurumsal temada
   satir zeminine cok yakin bir ton; uzerine gelinen hucrede kisi adi
   okunmaz hale geliyordu (olculdu). Beyaz zemin + kenarlik, hem hangi
   hucrede oldugunu hem metni net birakiyor. */
[data-tema] .asv-gorevler-ekrani .asv-hucre-dugme:hover {
  background: var(--asv-yuzey);
  border-color: var(--asv-kenar-renk);
  color: var(--asv-metin-renk);
}

/* ======================================================================== */
/* MADDE 44 · WRIKE YAPISI                                                  */
/* Coklu sorumlu, onay akisi, favori/takip ve ozel alanlar.                 */
/* ======================================================================== */

/* ---- Favori yildizi ---------------------------------------------------- */

/* ⚠ SABIT GENISLIK. Dolu yildiz (★) ile bos yildizin (☆) yazitipi
   genisligi ayni degil; sabitlenmeseydi favorileme aninda ad sutunu
   birkac piksel kayar ve tablo "titrerdi" - madde 43'te bir kez
   olculmus ve duzeltilmis olan arizanin aynisi. */
.asv-yildiz {
  flex: 0 0 auto;
  width: 1.4rem;
  min-width: 1.4rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
  font-size: var(--asv-text-sm);
  color: var(--asv-metin-cok-soluk);
}

.asv-yildiz:hover,
.asv-yildiz:focus-visible {
  color: var(--asv-dikkat-renk);
}

.asv-yildiz-dolu {
  color: var(--asv-dikkat-renk);
}

/* Tema dugmelere buyuk harf ve harf araligi veriyor; yildiz bir simge. */
[data-tema] .asv-gorevler-ekrani .asv-yildiz,
[data-tema] .asv-gorev-detay-ekrani .asv-yildiz {
  text-transform: none;
  letter-spacing: normal;
  min-height: 0;
}

/* ---- Coklu sorumlu seridi ---------------------------------------------- */

.asv-sorumlu-serit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--asv-space-xs);
}

/* ⚠ AVATARLAR UST USTE BINIYOR (Wrike deseni). Yan yana dizilselerdi
   uc kisilik bir gorev, sorumlu sutununun genisligini iki katina
   cikarirdi. */
.asv-sorumlu-serit .asv-kisi-avatar {
  margin-left: -6px;
  border: 1px solid var(--asv-yuzey);
}

.asv-sorumlu-fazla {
  font-size: var(--asv-text-xs);
  color: var(--asv-metin-soluk);
  white-space: nowrap;
}

/* ---- Onay rozeti ------------------------------------------------------- */

.asv-onay-rozet {
  display: inline-block;
  margin-left: var(--asv-space-xs);
  padding: 1px 6px;
  border: 1px solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  font-size: var(--asv-text-xs);
  color: var(--asv-metin-soluk);
  white-space: nowrap;
}

/* ⚠ "SENDEN BEKLENIYOR" VURGULU. Ayni soluk rozet olsaydi kullanici
   kendi isini uc gorevlik bir listede gozle ayirt edemezdi. */
.asv-onay-benim {
  border-color: var(--asv-dikkat-renk);
  color: var(--asv-dikkat-renk);
  font-weight: 600;
}

/* ---- Onay paneli ------------------------------------------------------- */

.asv-onay-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--asv-space-xs);
  padding: var(--asv-space-xs) 0;
  border-bottom: 1px solid var(--asv-kenar-renk);
}

.asv-onay-durum {
  padding: 1px 6px;
  border-radius: var(--asv-kose);
  font-size: var(--asv-text-xs);
  border: 1px solid var(--asv-kenar-renk);
  white-space: nowrap;
}

.asv-onay-bekliyor {
  color: var(--asv-dikkat-renk);
  border-color: var(--asv-dikkat-renk);
}

.asv-onay-olumlu {
  color: var(--asv-basari-renk);
  border-color: var(--asv-basari-renk);
}

.asv-onay-olumsuz {
  color: var(--asv-hata-renk);
  border-color: var(--asv-hata-renk);
}

/* ⚠ IPTAL EDILEN ONAY SOLUK, KIRMIZI DEGIL. Kirmizi "reddedildi" ile
   karisirdi; ikisi bambaska iki sey - biri karar, oteki vazgecme. */
.asv-onay-iptal {
  color: var(--asv-metin-cok-soluk);
}

/* ---- Ozel alanlar ------------------------------------------------------ */

.asv-ozel-alan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--asv-space-sm);
  padding: var(--asv-space-xs) 0;
}

.asv-ozel-alan-ad {
  min-width: 10rem;
  font-size: var(--asv-text-sm);
  color: var(--asv-metin-soluk);
}

.asv-ozel-alan-deger {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.asv-gorev-tablosu td .asv-ozel-alan-deger {
  min-width: 4rem;
}