/* Ortak masa. Her ortağın kendi rengi var; geri kalan her şey sakin. */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-latin.c47ac31e5437.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-latin-ext.b21945eb5067.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --zemin: #e8ebe5;
  --yuzey: #f8f9f5;
  --yuzey-2: #eef1ea;
  --murekkep: #141b17;
  --ikincil: #536058;
  --soluk: #6b7770;
  --cizgi: #cbd2c9;
  --cizgi-hafif: #dde2da;
  --tehlike: #b3261e;
  --uyari: #9a5f00;
  --basari: #2f6b3a;

  --deniz: #17706a;
  --zumrut: #18774a;
  --zeytin: #5c6b1f;
  --turkuaz: #0b6f82;
  --gok: #1f63b5;
  --civit: #3442a8;
  --lacivert: #253a7a;
  --lavanta: #6a48b0;
  --murdum: #7e2f7a;
  --fusya: #b0207a;
  --gul: #ad3567;
  --nar: #b42a2a;
  --kiremit: #a8471c;
  --safran: #8f6104;
  --kum: #776a48;
  --kahve: #6e4a2e;
  --grafit: #4a5258;

  /* Palete bağlı roller. Klasik palette sayfa renklerinden türer; diğer paletler paletler.css'te. */
  --vurgu: var(--murekkep);
  --vurgu-yazi: var(--zemin);
  --vurgu2: var(--murekkep);
  --cubuk: var(--zemin);
  --cubuk-yazi: var(--murekkep);
  --cubuk-soluk: var(--ikincil);
  --cubuk-hover: var(--yuzey-2);
  --cubuk-secili: var(--yuzey);
  --cubuk-secili-yazi: var(--murekkep);
  --cubuk-secili-cizgi: var(--cizgi);
  --cubuk-cizgi: var(--cizgi);
  --cubuk-girdi: var(--yuzey);

  --r: var(--murekkep);
  --yazi: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ray: 236px;
  --yaricap-k: 6px;
  --yaricap-b: 12px;
  color-scheme: light;
}

/* Koyu tema: kişi Hesabım'dan "Koyu" seçtiyse ya da "Cihaza uy" seçip cihazı koyu moddaysa. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #0e1310;
    --yuzey: #161c18;
    --yuzey-2: #1d2420;
    --murekkep: #e3e8e2;
    --ikincil: #a2ada6;
    --soluk: #7d8a82;
    --cizgi: #2c3530;
    --cizgi-hafif: #232b26;
    --tehlike: #f08a80;
    --uyari: #e6b14d;
    --basari: #7fc48c;

    --deniz: #4fb5ac;
    --zumrut: #5fcf95;
    --zeytin: #b5c46a;
    --turkuaz: #4fc4d9;
    --gok: #79b4f2;
    --civit: #8f9cf2;
    --lacivert: #9fb0e8;
    --lavanta: #b9a2f0;
    --murdum: #d98bd4;
    --fusya: #f27cc0;
    --gul: #e57ea8;
    --nar: #f08080;
    --kiremit: #f0956a;
    --safran: #e3ab3b;
    --kum: #c1b38c;
    --kahve: #d0a17c;
    --grafit: #aab4ba;
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
  --zemin: #0e1310;
  --yuzey: #161c18;
  --yuzey-2: #1d2420;
  --murekkep: #e3e8e2;
  --ikincil: #a2ada6;
  --soluk: #7d8a82;
  --cizgi: #2c3530;
  --cizgi-hafif: #232b26;
  --tehlike: #f08a80;
  --uyari: #e6b14d;
  --basari: #7fc48c;

  --deniz: #4fb5ac;
  --zumrut: #5fcf95;
  --zeytin: #b5c46a;
  --turkuaz: #4fc4d9;
  --gok: #79b4f2;
  --civit: #8f9cf2;
  --lacivert: #9fb0e8;
  --lavanta: #b9a2f0;
  --murdum: #d98bd4;
  --fusya: #f27cc0;
  --gul: #e57ea8;
  --nar: #f08080;
  --kiremit: #f0956a;
  --safran: #e3ab3b;
  --kum: #c1b38c;
  --kahve: #d0a17c;
  --grafit: #aab4ba;
  color-scheme: dark;
}

.renk-deniz { --r: var(--deniz); }
.renk-zumrut { --r: var(--zumrut); }
.renk-zeytin { --r: var(--zeytin); }
.renk-turkuaz { --r: var(--turkuaz); }
.renk-gok { --r: var(--gok); }
.renk-civit { --r: var(--civit); }
.renk-lacivert { --r: var(--lacivert); }
.renk-lavanta { --r: var(--lavanta); }
.renk-murdum { --r: var(--murdum); }
.renk-fusya { --r: var(--fusya); }
.renk-gul { --r: var(--gul); }
.renk-nar { --r: var(--nar); }
.renk-kiremit { --r: var(--kiremit); }
.renk-safran { --r: var(--safran); }
.renk-kum { --r: var(--kum); }
.renk-kahve { --r: var(--kahve); }
.renk-grafit { --r: var(--grafit); }
.renk-yok { --r: var(--soluk); }

/* --- Temel ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi);
  font-size: 1rem;
  line-height: 1.5;
  font-variation-settings: "opsz" 14;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.45rem); font-variation-settings: "opsz" 72; letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: 1.12rem; font-variation-settings: "opsz" 24; }
h3 { font-size: 0.95rem; }
p { margin: 0; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--r, var(--murekkep)); outline-offset: 2px; border-radius: 3px; }
img { max-width: 100%; }
svg { flex: none; }
.ikon { width: 18px; height: 18px; flex: none; }
.ikonlu { display: inline-flex; align-items: center; gap: 5px; }
.ikonlu .ikon { width: 15px; height: 15px; }
[hidden] { display: none !important; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Kabuk: sol ray + içerik ------------------------------------------ */

.kabuk { display: grid; grid-template-columns: var(--ray) minmax(0, 1fr); min-height: 100vh; }
.ray {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 16px 18px;
  background: var(--cubuk); color: var(--cubuk-yazi);
  border-right: 1px solid var(--cubuk-cizgi);
}
.marka {
  font-size: 1.55rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1;
  font-variation-settings: "opsz" 96; text-decoration: none; padding: 0 10px;
  overflow-wrap: anywhere; color: var(--cubuk-yazi);
}
:root[data-palet]:not([data-palet="klasik"]) .marka::after {
  content: ""; display: block; width: 26px; height: 3px; margin-top: 7px; border-radius: 2px; background: var(--vurgu2);
}
.ray-ara { position: relative; }
.ray-ara .ikon { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--cubuk-soluk); pointer-events: none; }
.ray-ara input { width: 100%; padding-left: 34px; background: var(--cubuk-girdi); border-color: var(--cubuk-cizgi); color: var(--cubuk-yazi); }
.ray-ara input::placeholder { color: var(--cubuk-soluk); }
.ray-ara input:focus { border-color: var(--cubuk-yazi); box-shadow: none; }
.menu { display: grid; gap: 2px; }
.menu a, .zil, .ben {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--yaricap-k);
  text-decoration: none; color: var(--cubuk-soluk); font-weight: 500;
}
.menu a:hover, .zil:hover, .ben:hover { background: var(--cubuk-hover); color: var(--cubuk-yazi); }
.menu a[aria-current], .zil[aria-current], .ben[aria-current] { background: var(--cubuk-secili); color: var(--cubuk-secili-yazi); box-shadow: inset 0 0 0 1px var(--cubuk-secili-cizgi); }
.ray-alt { margin-top: auto; display: grid; gap: 2px; }
.ray-cikis { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--yaricap-k); background: none; font: inherit; font-weight: 500; color: var(--cubuk-soluk); cursor: pointer; }
.ray-cikis:hover { background: var(--cubuk-hover); color: var(--cubuk-yazi); }
.menu .ikon, .zil .ikon { color: var(--cubuk-soluk); }
.menu a[aria-current] .ikon { color: var(--cubuk-secili-yazi); }
.sayac {
  margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--vurgu); color: var(--vurgu-yazi); font-size: 0.75rem; font-weight: 650; text-align: center; line-height: 22px;
}

.icerik { padding: 34px clamp(20px, 3.5vw, 48px) 64px; max-width: 1320px; width: 100%; }

.mobil, .alt-bar, .ust-bar, .cekmece, .pano-sekmeler, .kisi-sec-mobil, .kart-adimlar { display: none; }
.buton .ikon { width: 17px; height: 17px; margin-left: -2px; }
.buton-kucuk .ikon { width: 15px; height: 15px; }
.ikon-buton { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--yaricap-k); color: var(--ikincil); border: 1px solid transparent; }
.ikon-buton:hover { border-color: var(--cizgi); color: var(--murekkep); }
.geri a { display: inline-flex; align-items: center; gap: 2px; }
.geri .ikon { width: 16px; height: 16px; }

/* --- Ortak parçalar ---------------------------------------------------- */

.sayfa-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.sayfa-bas .ozet { margin-top: 8px; color: var(--ikincil); max-width: 66ch; }
.ozet strong { color: var(--murekkep); font-variant-numeric: tabular-nums; }
.uyari-baglanti { color: var(--tehlike); font-weight: 600; }
.geri { margin-bottom: 14px; font-size: 0.9rem; }
.geri a { color: var(--ikincil); text-decoration: none; }
.hizli { display: flex; gap: 8px; flex-wrap: wrap; }

.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--yaricap-k);
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--murekkep);
  font: inherit; font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.buton:hover { border-color: var(--soluk); }
.buton-ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.buton-ana:hover { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 86%, var(--murekkep)); }
.buton-sade { background: transparent; border-color: transparent; color: var(--ikincil); }
.buton-tehlike { background: var(--tehlike); border-color: var(--tehlike); color: #fff; }
.buton-kucuk { min-height: 32px; padding: 0 12px; font-size: 0.85rem; }
.genis { width: 100%; }
.metin-buton { background: none; border: 0; padding: 0; font: inherit; color: var(--ikincil); cursor: pointer; text-decoration: underline; text-decoration-color: var(--cizgi); text-underline-offset: 3px; font-size: 0.9rem; }
.metin-buton:hover { color: var(--murekkep); }
.sil-baglanti { color: var(--tehlike); margin-left: auto; font-size: 0.9rem; }

input, select, textarea {
  font: inherit; color: var(--murekkep); background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-k);
  padding: 9px 12px; min-height: 40px; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--murekkep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--murekkep) 12%, transparent); }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--murekkep); }

.blok { background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); padding: 18px 20px; }
.blok + .blok { margin-top: 16px; }
.blok-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.blok-bas a { font-size: 0.88rem; color: var(--ikincil); }
.blok-bas + .tablo-liste, .tablo-liste + .blok-bas { margin-top: 0; }
.tablo-liste + .blok-bas { margin-top: 22px; }
.bos { color: var(--soluk); font-size: 0.93rem; }
.kucuk-meta { color: var(--soluk); font-size: 0.83rem; }
.sayi { color: var(--soluk); font-weight: 500; font-variant-numeric: tabular-nums; }

.iki-kolon { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
.yan-kolon { display: grid; gap: 16px; }
.yan-kolon .blok + .blok { margin-top: 0; }

.sade-liste li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--cizgi-hafif); }
.sade-liste li:first-child { border-top: 0; padding-top: 0; }
.sade-liste a { text-decoration: none; font-weight: 550; display: flex; align-items: baseline; gap: 8px; }
.sade-liste a:hover { text-decoration: underline; }
.sade-liste a.buton { align-items: center; text-decoration: none; }
.sade-liste li.bos { border: 0; }
.satir-form { display: inline; }

.uzanti {
  flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ikincil);
  border: 1px solid var(--cizgi); border-radius: 4px; padding: 0 5px; line-height: 1.6; text-transform: lowercase;
}

.tablo-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 12px; padding: 10px 0; border-top: 1px solid var(--cizgi-hafif); }
.tablo-liste li:first-child { border-top: 0; }
.tablo-liste li > a { font-weight: 550; text-decoration: none; }
.tablo-liste li > a:first-child { grid-column: 1 / 3; }
.tablo-liste li.bos { display: block; }
.tablo-liste time { color: var(--soluk); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.etiket { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--yuzey-2); color: var(--ikincil); border: 1px solid var(--cizgi-hafif); white-space: nowrap; }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.82rem; color: var(--soluk); }
.tarih { font-variant-numeric: tabular-nums; }
.gecikti { color: var(--tehlike); font-weight: 600; }
.yaklasiyor { color: var(--uyari); font-weight: 600; }
.oncelik-3 { color: var(--uyari); font-weight: 600; }
.oncelik-4 { color: var(--tehlike); font-weight: 700; }
.durum-etiket-bitti { color: var(--basari); }
.karar-etiket-alindi { color: var(--basari); border-color: color-mix(in srgb, var(--basari) 35%, transparent); }
.karar-etiket-tartisiliyor { color: var(--uyari); }
.karar-etiket-vazgecildi { text-decoration: line-through; }
.fikir-etiket-kabul { color: var(--basari); }
.fikir-etiket-inceleniyor { color: var(--uyari); }

/* Görev durumunu renk değil şekil anlatır: boş halka, yarım, kesik halka, dolu. */
.durum-isaret { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid var(--soluk); margin-right: 8px; vertical-align: -1px; }
.durum-isaret.durum-suruyor { border-color: var(--murekkep); background: linear-gradient(90deg, var(--murekkep) 50%, transparent 50%); }
.durum-isaret.durum-incelemede { border-style: dashed; border-color: var(--uyari); }
.durum-isaret.durum-bitti { border-color: var(--basari); background: var(--basari); }

.mesajlar { display: grid; gap: 8px; margin-bottom: 20px; }
.mesaj { padding: 10px 14px; border-radius: var(--yaricap-k); background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 3px solid var(--basari); font-weight: 500; }
.mesaj-error { border-left-color: var(--tehlike); }
.hata-kutu { padding: 10px 14px; border-radius: var(--yaricap-k); border: 1px solid color-mix(in srgb, var(--tehlike) 40%, transparent); color: var(--tehlike); background: color-mix(in srgb, var(--tehlike) 7%, var(--yuzey)); margin-bottom: 16px; }

/* --- Avatarlar --------------------------------------------------------- */

.avatar {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--r); color: var(--yuzey);
  font-weight: 700; line-height: 1; font-variation-settings: "opsz" 24;
}
.avatar-kucuk { width: 26px; height: 26px; font-size: 0.78rem; }
.avatar-orta { width: 36px; height: 36px; font-size: 1rem; }
.avatar-buyuk { width: 64px; height: 64px; font-size: 1.8rem; }
.avatar-dev { width: 96px; height: 96px; font-size: 2.6rem; }
img.avatar { object-fit: cover; background: var(--yuzey-2); box-shadow: 0 0 0 2px var(--r); }
img.avatar-kucuk { box-shadow: 0 0 0 1.5px var(--r); }

/* --- Masa: dört ortağın şeridi (sitenin imzası) ------------------------ */

.masa-bas h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
.masa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); overflow: hidden;
}
.serit { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--cizgi-hafif); }
.serit:first-child { border-left: 0; }
.serit-bas {
  display: block; padding: 18px 18px 12px; text-decoration: none;
  border-top: 6px solid var(--r);
}
.serit-bas h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 750; letter-spacing: -0.04em; line-height: 0.95;
  font-variation-settings: "opsz" 96; color: var(--r);
}
.serit-bas p { margin-top: 6px; color: var(--ikincil); font-size: 0.88rem; }
.serit-bas:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.serit-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 18px 14px; gap: 8px; }
.serit-sayilar div { display: flex; flex-direction: column-reverse; }
.serit-sayilar dt { font-size: 0.74rem; color: var(--soluk); line-height: 1.2; }
.serit-sayilar dd { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.tik { color: var(--basari); }
.bekliyor { color: var(--soluk); }
.serit-liste { border-top: 1px solid var(--cizgi-hafif); padding: 6px 0; flex: 1; }
.serit-gorev { display: block; padding: 9px 18px 9px 16px; text-decoration: none; border-left: 2px solid transparent; }
.serit-gorev:hover { background: var(--yuzey-2); border-left-color: var(--r); }
.serit-gorev .g-baslik { display: block; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.serit-gorev .g-meta { margin-top: 3px; }
.serit-gorev .etiket { padding: 0; border: 0; background: none; font-weight: 500; color: var(--soluk); }
.serit-gorev.durum-suruyor .etiket { color: var(--r); font-weight: 650; }
.serit-gorev.durum-incelemede .etiket { color: var(--uyari); font-weight: 650; }
.serit-bos, .serit-fazla { padding: 10px 18px; font-size: 0.9rem; color: var(--soluk); }

.rapor-hatirlatma {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; margin-bottom: 16px; text-decoration: none;
  border: 1px dashed var(--soluk); border-radius: var(--yaricap-b); color: var(--ikincil); font-weight: 500;
}
.rapor-hatirlatma:hover { border-style: solid; color: var(--murekkep); }
.rapor-hatirlatma > span:first-of-type { flex: 1; }

/* Akış */
.akis-satir { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--cizgi-hafif); }
.akis-govde { min-width: 0; }
.akis-kisa .akis-govde p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.akis-satir:first-child { border-top: 0; padding-top: 0; }
.akis-satir p { line-height: 1.45; padding-top: 2px; overflow-wrap: anywhere; }
.akis-satir p a { font-weight: 550; }
.akis-satir time { display: block; font-size: 0.78rem; color: var(--soluk); margin-top: 1px; }
.akis-satir.tur-bitti strong::after { content: " ✓"; color: var(--basari); }
.akis-satir.okunmamis { background: linear-gradient(90deg, color-mix(in srgb, var(--murekkep) 6%, transparent), transparent 70%); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

/* --- Görev panosu ------------------------------------------------------ */

.filtre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.filtre select { width: auto; }
.filtre input[type="search"] { width: 220px; }
.kisi-secici, .sekmeler { display: flex; flex-wrap: wrap; gap: 4px; }
.kisi-secici a, .sekmeler a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; text-decoration: none; color: var(--ikincil); font-weight: 550; font-size: 0.9rem;
  border: 1px solid transparent;
}
.kisi-secici a:hover, .sekmeler a:hover { background: var(--yuzey-2); }
.kisi-secici a[aria-current], .sekmeler a[aria-current] { background: var(--yuzey); border-color: var(--cizgi); color: var(--murekkep); }
.nokta-renk { width: 9px; height: 9px; border-radius: 50%; background: var(--r); }
.sekmeler { margin-bottom: 18px; }
.filtre .sekmeler { margin-bottom: 0; }
.sekmeler.sag { margin-left: auto; }

.pano { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.sutun { background: var(--yuzey-2); border-radius: var(--yaricap-b); padding: 12px 10px 10px; min-height: 160px; }
.sutun h2 { font-size: 0.95rem; display: flex; align-items: center; padding: 0 6px 10px; }
.sutun h2 .sayi { margin-left: 6px; }
.kartlar { display: grid; gap: 8px; min-height: 60px; border-radius: var(--yaricap-k); }
.kartlar.uzerinde { outline: 2px dashed var(--soluk); outline-offset: 2px; }
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: 9px;
  padding: 11px 12px 10px; box-shadow: inset 3px 0 0 var(--r); cursor: grab;
}
.kart:not([class*="renk-"]) { --r: var(--cizgi); }
.kart.suruklenen { opacity: 0.45; }
.kart-baslik { display: block; font-weight: 600; text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.kart-baslik:hover { text-decoration: underline; }
.kart-alt { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 0.78rem; color: var(--soluk); }
.kart-meta .ikon { width: 13px; height: 13px; }
.sutun-bos { color: var(--soluk); font-size: 0.85rem; text-align: center; padding: 18px 0; }
.sutun[data-durum="bitti"] .kart-baslik { color: var(--ikincil); }

/* --- Detay sayfaları --------------------------------------------------- */

.detay { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.detay-ana { min-width: 0; max-width: 760px; }
.genis-detay .detay-ana { max-width: none; }
.detay-bas { padding-left: 16px; border-left: 4px solid var(--r); margin-bottom: 20px; }
.detay:not([class*="renk-"]) .detay-bas { border-left-color: var(--cizgi); }
.detay-bas h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); overflow-wrap: anywhere; }
.detay-bas .g-meta { margin-top: 10px; }
.detay-yan { position: sticky; top: 24px; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); padding: 16px 18px; }
.bilgi > div { padding: 8px 0; border-top: 1px solid var(--cizgi-hafif); }
.bilgi > div:first-child { border-top: 0; padding-top: 0; }
.bilgi dt { font-size: 0.78rem; color: var(--soluk); }
.bilgi dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 550; }
.yan-eylem { margin-top: 14px; display: flex; gap: 8px; }

.metin-blok { max-width: 70ch; line-height: 1.6; }
.metin-blok p + p { margin-top: 0.8em; }
.ara-baslik { margin: 26px 0 8px; }

.durum-adimlari { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 22px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); width: fit-content; overflow: hidden; background: var(--yuzey); }
.adim { font: inherit; font-size: 0.9rem; font-weight: 550; padding: 8px 14px; border: 0; border-left: 1px solid var(--cizgi); background: none; color: var(--ikincil); cursor: pointer; }
.adim:first-child { border-left: 0; }
.adim:hover { background: var(--yuzey-2); color: var(--murekkep); }
.adim[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-yazi); }
.adim.durum-bitti[aria-pressed="true"] { background: var(--basari); color: var(--yuzey); }

.ekler { margin-top: 30px; }

.yorumlar { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--cizgi); }
.yorumlar h2 { margin-bottom: 14px; }
.yorum { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.yorum-bas { font-size: 0.9rem; }
.yorum-bas time { color: var(--soluk); font-size: 0.8rem; margin-left: 6px; }
.yorum-metin { margin-top: 2px; line-height: 1.55; overflow-wrap: anywhere; }
.yorum-form { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-top: 10px; }

/* Kararlar */
.karar-listesi { display: grid; gap: 0; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); }
.karar-satir { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--cizgi-hafif); align-items: start; }
.karar-satir:first-child { border-top: 0; }
.karar-tarih { color: var(--soluk); font-size: 0.85rem; padding-top: 3px; font-variant-numeric: tabular-nums; }
.karar-baslik { font-weight: 650; font-size: 1.05rem; text-decoration: none; }
.karar-baslik:hover { text-decoration: underline; }
.karar-sonuc { margin: 6px 0 4px; padding-left: 12px; border-left: 2px solid var(--basari); color: var(--ikincil); }
.karar-durum { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.karar-vazgecildi .karar-baslik { color: var(--soluk); }
.oy-cubugu { display: flex; gap: 3px; min-height: 8px; }
.oy { width: 14px; height: 6px; border-radius: 3px; background: var(--soluk); }
.oy-evet { background: var(--basari); }
.oy-hayir { background: var(--tehlike); }
.karar-kutusu { background: color-mix(in srgb, var(--basari) 7%, var(--yuzey)); border: 1px solid color-mix(in srgb, var(--basari) 30%, transparent); border-radius: var(--yaricap-b); padding: 16px 20px; margin-bottom: 22px; }
.karar-kutusu h2 { color: var(--basari); margin-bottom: 6px; }
.karar-kutusu h3 { margin: 14px 0 4px; }
.karar-kutusu .kucuk-meta { margin-top: 12px; }
.secenekler { display: grid; gap: 6px; }
.secenekler li { padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); background: var(--yuzey); }
.oylar { margin-top: 30px; }
.oylar h2 { margin-bottom: 12px; }
.oy-tablosu { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.oy-tablosu li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--yaricap-b); background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-top: 3px solid var(--r); }
.oy-tablosu strong { display: block; }
.oy-yazi { font-size: 0.88rem; font-weight: 600; }
.oy-yazi-evet { color: var(--basari); }
.oy-yazi-hayir { color: var(--tehlike); }
.oy-yazi-cekimser { color: var(--uyari); }
.oy-not { font-size: 0.85rem; color: var(--ikincil); margin-top: 4px; }
.oy-formu fieldset { border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); padding: 14px 16px 16px; margin: 16px 0 0; display: grid; gap: 12px; background: var(--yuzey); }
.oy-formu legend { font-weight: 650; padding: 0 6px; }
.oy-formu .buton { justify-self: start; }
.oy-secenekleri { display: flex; flex-wrap: wrap; gap: 8px; }
.oy-secenek { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cizgi); border-radius: 999px; cursor: pointer; font-weight: 550; }
.oy-secenek:has(input:checked) { border-color: var(--murekkep); box-shadow: inset 0 0 0 1px var(--murekkep); }
.sonuc-ac { margin-top: 14px; border-top: 1px solid var(--cizgi-hafif); padding-top: 12px; }
.sonuc-ac summary { cursor: pointer; font-weight: 600; }
.sonuc-ac .form { margin-top: 12px; }

/* Fikirler */
.hizli-fikir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 18px; padding: 10px; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); }
.hizli-fikir input { border-color: transparent; background: transparent; font-size: 1.05rem; }
.hizli-fikir input:focus { box-shadow: none; border-color: transparent; }
.hizli-fikir .metin-buton { padding-right: 8px; }
.fikir-panosu { columns: 3 280px; column-gap: 14px; }
.fikir { break-inside: avoid; margin-bottom: 14px; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); padding: 16px 16px 12px; border-top: 3px solid var(--r); }
.fikir:not([class*="renk-"]) { border-top-color: var(--cizgi); }
.fikir-rafta { opacity: 0.7; }
.fikir-baslik { font-weight: 650; font-size: 1.08rem; line-height: 1.3; text-decoration: none; display: block; overflow-wrap: anywhere; }
.fikir-baslik:hover { text-decoration: underline; }
.fikir-ozet { margin-top: 6px; color: var(--ikincil); font-size: 0.93rem; overflow-wrap: anywhere; }
.fikir-alt { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fikir-alt form { margin-left: auto; }
.destek { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 650; font-size: 0.88rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cizgi); background: none; color: var(--ikincil); cursor: pointer; }
.destek:hover { border-color: var(--gul); color: var(--gul); }
.destek.destekli { background: color-mix(in srgb, var(--gul) 12%, transparent); border-color: color-mix(in srgb, var(--gul) 45%, transparent); color: var(--gul); }
.destek .ikon { width: 15px; height: 15px; }
.destek.destekli .ikon { fill: currentColor; }
.destek.buyuk { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }
.fikir-eylemler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.destekleyenler { display: inline-flex; gap: 0; }
.destekleyenler .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--zemin); }

/* Dosyalar */
.dosya-listesi { background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); }
.dosya-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr) 130px 90px 74px auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--cizgi-hafif); }
.dosya-satir:first-child { border-top: 0; }
.dosya-simge { display: grid; place-items: center; width: 44px; height: 52px; border: 1px solid var(--cizgi); border-radius: 4px 12px 4px 4px; font-size: 0.7rem; font-weight: 750; color: var(--ikincil); text-transform: lowercase; background: var(--yuzey-2); }
.dosya-simge.uzanti-pdf { color: var(--tehlike); border-color: color-mix(in srgb, var(--tehlike) 40%, transparent); }
.dosya-govde { min-width: 0; display: flex; flex-direction: column; }
.dosya-baslik { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dosya-baslik:hover { text-decoration: underline; }
.dosya-kim { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.dosya-zaman, .dosya-boyut { color: var(--soluk); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.onizleme { width: 100%; height: min(80vh, 900px); border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); background: var(--yuzey); margin-top: 8px; }
.onizleme-gorsel { display: block; border-radius: var(--yaricap-b); border: 1px solid var(--cizgi); margin-top: 8px; }
.onizleme-yok { padding: 40px 20px; text-align: center; color: var(--soluk); border: 1px dashed var(--cizgi); border-radius: var(--yaricap-b); }
.dosya-eylem { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Haftalık raporlar */
.hafta-gezgini { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 10px 14px; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); }
.hafta-gezgini a { color: var(--ikincil); font-size: 0.9rem; }
.rapor-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.rapor { background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-top: 4px solid var(--r); border-radius: var(--yaricap-b); padding: 16px 18px; }
.rapor-yok { background: transparent; border-style: dashed; border-top-style: solid; }
.rapor-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rapor-bas h2 { color: var(--r); }
.rapor-bas .metin-buton { margin-left: auto; }
.rapor h3 { margin: 12px 0 2px; font-size: 0.8rem; color: var(--soluk); font-weight: 600; }
.rapor .metin-blok { font-size: 0.95rem; }
.engel { color: var(--tehlike); }
.rapor-yorum { margin-top: 14px; border-top: 1px solid var(--cizgi-hafif); padding-top: 10px; font-size: 0.9rem; }
.rapor-yorum summary { cursor: pointer; color: var(--ikincil); }
.kisa-yorum { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.satir-yorum { display: flex; gap: 6px; margin-top: 10px; }
.satir-yorum input { min-height: 34px; padding: 5px 10px; }

/* Ekip */
.ekip-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.uye-karti { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 18px; background: var(--yuzey); border: 1px solid var(--cizgi-hafif); border-radius: var(--yaricap-b); text-decoration: none; overflow: hidden; }
.uye-bant { position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--r); }
.uye-karti h2 { font-size: 1.7rem; letter-spacing: -0.035em; font-variation-settings: "opsz" 96; color: var(--r); }
.uye-karti:hover h2 { text-decoration: underline; }
.uye-unvan { font-weight: 600; }
.uye-sorumluluk { color: var(--ikincil); font-size: 0.93rem; }
.uye-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cizgi-hafif); }
.uye-sayilar div { display: flex; flex-direction: column-reverse; }
.uye-sayilar dt { font-size: 0.72rem; color: var(--soluk); }
.uye-sayilar dd { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.uye-bas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 4px solid var(--r); }
.uye-bas h1 { color: var(--r); }
.uye-bas > div { flex: 1; min-width: 220px; }
.uye-bas .uye-sorumluluk { margin-top: 4px; max-width: 70ch; }

/* Panelim */
.panel-bas {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end;
  padding: 22px 24px 20px; margin-bottom: 4px; background: var(--yuzey);
  border: 1px solid var(--cizgi-hafif); border-top: 8px solid var(--r); border-radius: var(--yaricap-b);
}
.panel-kimlik { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.panel-kimlik > :not(.panel-foto) { grid-column: 2; }
.panel-foto { grid-row: 1 / span 3; text-decoration: none; }
.panel-foto .avatar { width: 72px; height: 72px; font-size: 2rem; }
.uye-karti-bas { display: flex; align-items: center; gap: 12px; }
.serit-bas .avatar { float: left; margin: 2px 10px 0 0; }
.serit-bas h2 { overflow-wrap: anywhere; }
.panel-kimlik h1 { color: var(--r); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); letter-spacing: -0.045em; line-height: 0.95; font-variation-settings: "opsz" 96; }
.panel-kimlik .uye-unvan { margin-top: 8px; }
.panel-kimlik .uye-sorumluluk { margin-top: 2px; max-width: 60ch; }
.panel-sayilar { display: flex; gap: 28px; }
.panel-sayilar div { display: flex; flex-direction: column-reverse; }
.panel-sayilar dt { font-size: 0.78rem; color: var(--soluk); }
.panel-sayilar dd { font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 72; }
.panel-sayilar .kirmizi dd { color: var(--tehlike); }
.panel-bas .hizli { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--cizgi-hafif); }
.panel-govde { margin-top: 16px; }
.grup-baslik { font-size: 0.85rem; color: var(--ikincil); margin: 18px 0 4px; display: flex; gap: 6px; }
.blok-bas + .grup-baslik { margin-top: 0; }
.grup-geciken { color: var(--tehlike); }
.grup-bitti { color: var(--basari); }
.benim-gorev { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cizgi-hafif); }
.benim-gorev:first-child { border-top: 0; }
.benim-gorev .durum-isaret { margin: 0; align-self: start; margin-top: 5px; }
.bg-govde { min-width: 0; }
.bg-baslik { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.bg-baslik:hover { text-decoration: underline; }
.bg-govde .g-meta { margin-top: 2px; }
.bg-adimlar { display: flex; gap: 6px; }
.buton-bitti:hover { border-color: var(--basari); color: var(--basari); }
.satir-yan { flex-direction: row !important; align-items: center; gap: 10px !important; }
.satir-yan > a { flex: 1; min-width: 0; }
.satir-yan form { margin-left: auto; }
.vurgulu { border-color: color-mix(in srgb, var(--uyari) 45%, transparent); }
.not-defteri { display: grid; gap: 8px; }
.not-defteri .buton { justify-self: start; }
.bos-buyuk.kucuk { padding: 24px 12px; }

/* Hesabım: fotoğraf ve renk */
.foto-bolum { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--cizgi); }
.foto-satir { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.foto-onizleme img.avatar-dev { box-shadow: 0 0 0 3px var(--r); }
.foto-eylem { display: grid; gap: 10px; flex: 1; min-width: 200px; }
.foto-form { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-form label.buton { cursor: pointer; }
.foto-eylem .metin-buton { justify-self: start; }
.renk-secici { border: 0; padding: 0; margin: 0; }
.renk-secici legend { font-weight: 600; font-size: 0.93rem; padding: 0; }
.renk-secici .ipucu { margin: 2px 0 10px; }
.renk-kutulari { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.renk-kutu { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); background: var(--yuzey); cursor: pointer; font-size: 0.88rem; font-weight: 550; }
.renk-secici label.renk-kutu { display: flex; align-items: center; gap: 8px; margin: 0; }
.renk-kutu input { position: absolute; opacity: 0; pointer-events: none; }
.renk-nokta { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--r); flex: none; }
.renk-ad { color: var(--r); min-width: 0; overflow-wrap: anywhere; }
.renk-kutu:has(input:checked) { border-color: var(--r); box-shadow: inset 0 0 0 1.5px var(--r); }
.renk-kutu:has(input:checked) .renk-nokta { box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 4px var(--r); }
.renk-kutu:has(input:focus-visible) { outline: 2px solid var(--r); outline-offset: 2px; }

.yonetici-bolum { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.sifre-ad { flex: 1; min-width: 0; font-weight: 550; }

/* Palet seçimi */
.palet-secici { border: 0; padding: 0; margin: 0; }
.palet-secici legend { font-weight: 600; font-size: 0.93rem; padding: 0; }
.palet-secici > .ipucu { margin: 2px 0 10px; }
.palet-kutulari { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.palet-secici label.palet-kutu { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-b); background: var(--yuzey); cursor: pointer; font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.palet-kutu input { position: absolute; opacity: 0; pointer-events: none; }
.palet-ornek { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 40px; height: 40px; flex: none; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi); }
.palet-ad small { display: block; font-weight: 450; font-size: 0.78rem; color: var(--soluk); margin-top: 2px; }
.palet-secici label.palet-kutu:has(input:checked) { border-color: var(--vurgu); box-shadow: inset 0 0 0 1.5px var(--vurgu); }
.palet-kutu:has(input:focus-visible) { outline: 2px solid var(--murekkep); outline-offset: 2px; }

/* Tema düğmesi ve seçimi */
.tema-form { margin: 0; }
.tema-ay, .tema-gunes, .tema-yazi-koyu, .tema-yazi-acik { display: inline-flex; align-items: center; }
.tema-gunes, .tema-yazi-acik { display: none; }
:root[data-tema="koyu"] .tema-ay, :root[data-tema="koyu"] .tema-yazi-koyu { display: none; }
:root[data-tema="koyu"] .tema-gunes, :root[data-tema="koyu"] .tema-yazi-acik { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-ay, :root:not([data-tema="acik"]) .tema-yazi-koyu { display: none; }
  :root:not([data-tema="acik"]) .tema-gunes, :root:not([data-tema="acik"]) .tema-yazi-acik { display: inline-flex; }
}
.ray-cikis .tema-ay .ikon, .ray-cikis .tema-gunes .ikon { color: var(--cubuk-soluk); }
.tema-secici { border: 0; padding: 0; margin: 0; }
.tema-secici legend { font-weight: 600; font-size: 0.93rem; padding: 0; margin-bottom: 8px; }
.tema-kutulari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tema-secici label.tema-kutu { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 12px 6px; border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); background: var(--yuzey); cursor: pointer; font-size: 0.88rem; font-weight: 550; text-align: center; }
.tema-kutu input { position: absolute; opacity: 0; pointer-events: none; }
.tema-kutu .ikon { width: 22px; height: 22px; color: var(--ikincil); }
.tema-secici label.tema-kutu:has(input:checked) { border-color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.tema-kutu:has(input:focus-visible) { outline: 2px solid var(--murekkep); outline-offset: 2px; }
.tema-secici .ipucu { margin-top: 8px; }

/* Formlar */
.form-sayfa { max-width: 680px; }
.form { display: grid; gap: 18px; }
.form + .form { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.form.sikisik { gap: 10px; }
.form-bolum { font-size: 1.2rem; }
.alan label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.93rem; }
.ipucu { color: var(--soluk); font-size: 0.85rem; margin-top: 5px; }
.hata { color: var(--tehlike); font-size: 0.88rem; margin-top: 5px; font-weight: 550; }
.hatali input, .hatali textarea, .hatali select { border-color: var(--tehlike); }
.form-eylem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alan-baslik input { font-size: 1.15rem; font-weight: 600; }
.alan input[type="file"] { padding: 18px; border-style: dashed; background: var(--yuzey-2); cursor: pointer; }

.arama-buyuk { display: flex; gap: 10px; margin-bottom: 20px; max-width: 640px; }
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; color: var(--soluk); }
.bos-buyuk { padding: 40px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--ikincil); }
.bos-buyuk p:first-child { font-weight: 650; color: var(--murekkep); font-size: 1.1rem; }
.bos-buyuk p { max-width: 52ch; }
.fikir-panosu .bos-buyuk { column-span: all; }

/* --- Giriş ------------------------------------------------------------- */

.giris { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; }
.giris-serit { position: fixed; inset: 0 0 auto 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 8px; }
.giris-serit span { background: var(--r); }
.giris-kutu { width: min(400px, 100%); }
.giris-kutu h1 { font-size: clamp(2.6rem, 2rem + 3vw, 3.6rem); letter-spacing: -0.045em; font-variation-settings: "opsz" 96; line-height: 0.95; overflow-wrap: anywhere; }
.giris-alt { margin: 12px 0 28px; color: var(--ikincil); }
.giris-kutu form { display: grid; gap: 16px; }
.giris-not { margin-top: 22px; color: var(--soluk); font-size: 0.85rem; }

/* --- Dar ekranlar ------------------------------------------------------ */

@media (max-width: 1100px) {
  .detay { grid-template-columns: 1fr; }
  .detay-yan { position: static; }
  .detay-yan .bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }
  .detay-yan .bilgi > div:nth-child(-n+2) { border-top: 0; }
  .dosya-satir { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .dosya-kim, .dosya-zaman { display: none; }
}

@media (max-width: 860px) {
  body { font-size: 1rem; }
  input, select, textarea { font-size: 16px; } /* iOS odaklanınca yakınlaştırmasın */
  .masaustu { display: none !important; }
  .mobil { display: revert; }
  .kabuk { display: block; }
  .ray { display: none; }
  .icerik { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }

  /* Üst çubuk: şirket adı, arama, bildirim, hesap */
  .ust-bar {
    display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 15;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
    background: var(--cubuk); color: var(--cubuk-yazi);
    border-bottom: 1px solid var(--cubuk-cizgi);
  }
  .ust-marka { flex: 1; min-width: 0; color: var(--cubuk-yazi); font-size: 1.25rem; font-weight: 750; letter-spacing: -0.03em; text-decoration: none; font-variation-settings: "opsz" 72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ust-ikon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cubuk-soluk); cursor: pointer; }
  .ust-ikon:hover { background: var(--cubuk-hover); color: var(--cubuk-yazi); }
  .ust-ikon[aria-current] { color: var(--cubuk-secili-yazi); background: var(--cubuk-secili); }
  .ust-ikon .ikon { width: 22px; height: 22px; }
  .rozet { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tehlike); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; }
  .ust-ben { display: grid; place-items: center; width: 42px; height: 42px; }
  .ust-ben .avatar { width: 30px; height: 30px; font-size: 0.85rem; }

  /* Alt çubuk: ortada ekle düğmesi */
  .alt-bar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--yuzey); border-top: 1px solid var(--cizgi);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }
  .alt-bar a, .alt-bar button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 0; font: inherit; font-size: 0.68rem; font-weight: 600; color: var(--soluk);
    text-decoration: none; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .alt-bar .ikon { width: 24px; height: 24px; }
  .alt-bar [aria-current="page"], .alt-bar [aria-expanded="true"] { color: var(--murekkep); }
  .alt-bar [aria-current="page"] .ikon { stroke-width: 2.4; }
  .alt-bar .alt-ekle { justify-self: center; width: 52px; height: 52px; min-height: 0; margin-top: -18px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-yazi); box-shadow: 0 6px 18px rgb(0 0 0 / 0.18), 0 0 0 4px var(--zemin); }
  .alt-bar .alt-ekle .ikon { width: 26px; height: 26px; transition: rotate 0.2s; }
  .alt-bar .alt-ekle[aria-expanded="true"] { color: var(--vurgu-yazi); }
  .alt-bar .alt-ekle[aria-expanded="true"] .ikon { rotate: 45deg; }

  /* Alttan açılan çekmeceler */
  .cekmece:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / 0.32); }
  .cekmece-ic {
    position: absolute; inset: auto 0 0 0; max-height: 80vh; overflow-y: auto;
    background: var(--yuzey); border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(86px + env(safe-area-inset-bottom));
    animation: cekmece-gir 0.18s ease-out;
  }
  @keyframes cekmece-gir { from { translate: 0 24px; opacity: 0; } }
  .cekmece-baslik { font-weight: 650; color: var(--ikincil); font-size: 0.9rem; margin: 0 4px 8px; }
  #ekle-cekmece a { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: var(--yaricap-b); text-decoration: none; font-weight: 600; font-size: 1.02rem; }
  #ekle-cekmece a:active { background: var(--yuzey-2); }
  #ekle-cekmece a .ikon { width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: 12px; background: var(--yuzey-2); }
  #ekle-cekmece small { display: block; font-size: 0.82rem; font-weight: 450; color: var(--soluk); }
  .karo-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .karo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 4px 12px; border-radius: var(--yaricap-b); background: var(--yuzey-2); text-decoration: none; font-weight: 600; font-size: 0.85rem; text-align: center; }
  .karo .ikon { width: 26px; height: 26px; }
  .karo[aria-current] { box-shadow: inset 0 0 0 1.5px var(--murekkep); }
  .cekmece-cikis { margin-top: 12px; }
  .cekmece-cikis .buton { color: var(--tehlike); }

  /* Sayfa başları */
  .sayfa-bas { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .sayfa-bas h1 { font-size: 1.85rem; }
  .sayfa-bas .ozet { font-size: 0.93rem; margin-top: 4px; }
  .sayfa-bas > .buton, .sayfa-bas > form .buton { width: 100%; }
  .hizli { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
  .hizli .buton { padding: 0 10px; }
  .hizli .buton-ana { grid-column: 1 / -1; }
  .geri { margin-bottom: 8px; }

  /* Masa: şeritler alt alta, sağa kaydırma yok */
  .masa-bas h1 { font-size: 2rem; }
  .masa { display: grid; grid-template-columns: 1fr; }
  .serit { border-left: 0; border-top: 1px solid var(--cizgi-hafif); }
  .serit:first-child { border-top: 0; }
  .serit-bas .avatar { float: none; margin: 0; align-self: center; width: 30px; height: 30px; font-size: 0.85rem; }
  .panel-foto .avatar { width: 56px; height: 56px; font-size: 1.6rem; }
  .serit-bas { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; border-top-width: 0; border-left: 5px solid var(--r); }
  .serit-bas h2 { font-size: 1.6rem; }
  .serit-bas p { margin: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .serit-sayilar { display: flex; gap: 18px; padding: 0 16px 8px 21px; }
  .serit-sayilar div { flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 5px; }
  .serit-sayilar dd { font-size: 1rem; }
  .serit-liste { padding: 0 0 6px; border-top: 0; }
  .serit-liste li:nth-child(n+3):not(.serit-fazla) { display: none; }
  .serit-gorev { padding: 7px 16px 7px 21px; }
  .serit-bos, .serit-fazla { padding: 4px 16px 8px 21px; }
  .iki-kolon { grid-template-columns: 1fr; }
  .masa-alt .yan-kolon { order: -1; }
  .akis-kisa .akis-satir:nth-child(n+6) { display: none; }
  .blok { padding: 14px 16px; }

  /* Görev panosu: telefonda sekmeli, tek sütun */
  .kisi-secici { display: none; }
  .kisi-sec-mobil { display: block; }
  .filtre { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filtre select, .filtre input[type="search"] { width: 100%; }
  .filtre input[type="search"], .filtre .sekmeler { grid-column: 1 / -1; }
  .pano { display: grid; grid-template-columns: 1fr; gap: 16px; overflow: visible; }
  .sutun { min-height: 0; padding: 10px 8px 8px; }
  .js .pano-sekmeler:not([hidden]) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; padding: 4px; background: var(--yuzey-2); border-radius: var(--yaricap-b); }
  .pano-sekmeler button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 0; border-radius: var(--yaricap-k); background: none; font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--ikincil); cursor: pointer; line-height: 1.15; text-align: center; }
  .pano-sekmeler button .durum-isaret { margin: 0; }
  .pano-sekmeler button .sayi { font-size: 0.8rem; }
  .pano-sekmeler button[aria-selected="true"] { background: var(--yuzey); color: var(--murekkep); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
  .js .pano[data-aktif] .sutun { display: none; }
  .js .pano[data-aktif="yapilacak"] .sutun[data-durum="yapilacak"],
  .js .pano[data-aktif="suruyor"] .sutun[data-durum="suruyor"],
  .js .pano[data-aktif="incelemede"] .sutun[data-durum="incelemede"],
  .js .pano[data-aktif="bitti"] .sutun[data-durum="bitti"] { display: block; background: none; padding: 0; }
  .js .pano[data-aktif] .sutun h2 { display: none; }
  .kart { cursor: default; }
  .kart-adimlar { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi-hafif); }
  .kart-adimlar .buton { flex: 1; }

  .sekmeler { flex-wrap: wrap; }
  .sekmeler.sag { margin-left: 0; }
  .karar-satir { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; }
  .karar-durum { flex-direction: row; align-items: center; justify-content: flex-start; }
  .hizli-fikir { grid-template-columns: minmax(0, 1fr) auto; }
  .hizli-fikir .buton span { display: none; }
  .hizli-fikir .metin-buton { grid-column: 1 / -1; justify-self: start; padding-left: 12px; }
  .dosya-satir { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px 10px 12px 14px; gap: 12px; }
  .dosya-simge { width: 38px; height: 46px; }
  .dosya-boyut { display: none; }
  .onizleme { height: 70vh; }
  .dosya-eylem .buton { flex: 1; }
  .yorum-form { grid-template-columns: minmax(0, 1fr) auto; }
  .yorum-form .avatar { display: none; }
  .yorum-form .buton { width: 46px; padding: 0; }
  .tablo-liste li { grid-template-columns: auto minmax(0, 1fr); }
  .tablo-liste li > .kucuk-meta, .tablo-liste li > .g-meta, .tablo-liste time { grid-column: 2; }
  .tablo-liste li > a:first-child { grid-column: 1 / -1; }
  .akis-satir.okunmamis { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .durum-adimlari { width: 100%; }
  .adim { flex: 1; padding: 10px 4px; font-size: 0.8rem; }
  .detay { gap: 16px; }
  .detay-bas h1 { font-size: 1.5rem; }
  .oy-tablosu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oy-tablosu li { min-width: 0; overflow-wrap: anywhere; }
  .oy-secenek { flex: 1; justify-content: center; }
  .rapor-izgara { grid-template-columns: 1fr; }
  .hafta-gezgini { padding: 8px 10px; font-size: 0.9rem; }
  .ekip-izgara { grid-template-columns: 1fr; }
  .uye-bas { gap: 12px; }
  .uye-bas .buton { width: 100%; }
  .form-eylem .buton { flex: 1; }
  .arama-buyuk .buton { flex: none; }
  .panel-bas { grid-template-columns: 1fr; padding: 18px 16px; }
  .panel-sayilar { gap: 20px; }
  .benim-gorev { grid-template-columns: 12px minmax(0, 1fr); }
  .bg-adimlar { grid-column: 2; }
  .bg-adimlar .buton { flex: 1; }
  .satir-yan { flex-wrap: wrap; }
  .renk-kutulari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palet-kutulari { grid-template-columns: 1fr; }
  .foto-satir { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}