/* Atölye — Frontend Faz 1 (GOREV_frontend_faz1.md §Görsel kimlik)
   PDF raporuyla aynı palet: zemin #FAFAF8, ana metin #1A1A1A, vurgu (K3 altını) #B9975B.
   K3'ün web sitesindeki koyu tema burada KULLANILMIYOR. */

:root {
  --zemin: #FAFAF8;
  --zemin-yukseltilmis: #FFFFFF;
  --metin: #1A1A1A;
  --metin-soluk: #6B6A64;
  --altin: #B9975B;
  --altin-tint: #F3EADA;
  --cizgi: #E4DFD3;
  --hata: #A6402E;
  --hata-zemin: #FBECE8;
  --basari: #4C7A52;
  --basari-zemin: #EBF3EC;
  --gri: #8A8A83;
  /* GOREV_Atolye_Kullanici_Departman_Personel.md Faz D — Firma Kullanıcısı/Veri Toplama
     formlarını ayırt etmek için nötr bir ikinci vurgu (mevcut .rozet-duzenlendi mavisiyle aynı
     aile, --hata/--basari gibi anlam yüklü renklerle karışmasın diye yeni bir ton değil). */
  --ikincil-vurgu: #3A5C7A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--altin); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 700; letter-spacing: 0.01em; margin: 0 0 0.5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; color: var(--metin-soluk); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Üst menü ── */

.ust-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: var(--zemin-yukseltilmis);
  border-bottom: 1px solid var(--cizgi);
}

.wordmark {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--metin);
}
.wordmark span { color: var(--altin); font-weight: 400; }

.ust-menu nav { display: flex; gap: 18px; flex: 1; }
.ust-menu nav a { color: var(--metin); font-weight: 600; font-size: 0.92rem; }
.ust-menu nav a:hover { color: var(--altin); text-decoration: none; }

.cikis-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.kullanici-adi { color: var(--metin-soluk); font-size: 0.88rem; }

.link-buton {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--altin); font: inherit; cursor: pointer;
}
.link-buton:hover { text-decoration: underline; }

/* ── Sayfa iskeleti ── */

.icerik { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.icerik-genis { max-width: 1180px; }

.giris-sayfasi {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.giris-sayfasi main.icerik { padding: 0; max-width: none; }
.giris-kutu {
  width: 340px; background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi);
  border-radius: 10px; padding: 32px 28px;
}
.giris-kutu .wordmark { display: block; text-align: center; margin-bottom: 22px; font-size: 1.1rem; }

/* ── Uyarılar ── */

.uyari { padding: 10px 14px; border-radius: 6px; margin-bottom: 18px; font-size: 0.92rem; }
.uyari-hata { background: var(--hata-zemin); color: var(--hata); border: 1px solid #E8C9C1; }
.uyari-basari { background: var(--basari-zemin); color: var(--basari); border: 1px solid #C9DCC9; }

/* ── Formlar ── */

label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: var(--metin-soluk); }
.alan { margin-bottom: 16px; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--zemin-yukseltilmis); color: var(--metin); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--altin); }
textarea { resize: vertical; min-height: 90px; }

.onay-satiri { display: flex; align-items: center; gap: 8px; }
.onay-satiri input { width: auto; }
.onay-satiri label { margin: 0; font-weight: 400; color: var(--metin); }

.buton {
  display: inline-block; padding: 9px 18px; border-radius: 6px; border: 1px solid var(--altin);
  background: var(--altin); color: #FFFFFF; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; text-align: center;
}
.buton:hover { background: #A8854B; text-decoration: none; }
.buton-ikincil {
  background: transparent; color: var(--metin); border-color: var(--cizgi);
}
.buton-ikincil:hover { border-color: var(--altin); color: var(--altin); background: transparent; }
.buton-kucuk { padding: 4px 10px; font-size: 0.8rem; }
.buton-tehlike { background: transparent; color: var(--hata); border-color: #E8C9C1; }

.buton-grubu { display: flex; gap: 10px; margin-top: 22px; }

/* ── Kartlar / listeler ── */

.kart {
  background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 20px 22px; margin-bottom: 18px;
}

.liste-basligi { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

.firma-listesi { list-style: none; margin: 0; padding: 0; }
.firma-listesi li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 10px;
  background: var(--zemin-yukseltilmis);
}
.firma-listesi li:hover { border-color: var(--altin); }
.firma-listesi .unvan { font-weight: 700; }
.firma-listesi .sektor { color: var(--metin-soluk); font-size: 0.85rem; }

.bos-durum { color: var(--metin-soluk); padding: 30px; text-align: center; border: 1px dashed var(--cizgi); border-radius: 8px; }

.rozet {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.rozet-taslak { background: var(--altin-tint); color: #8A6A2F; }
.rozet-duzenlendi { background: #E6EEF5; color: #3A5C7A; }
.rozet-onaylandi { background: var(--basari-zemin); color: var(--basari); }
/* GOREV_gorev_atama_firma_yapisi.md — GorevAtama.durum rozetleri */
.rozet-atandi { background: var(--altin-tint); color: #8A6A2F; }
.rozet-tamamlandi { background: var(--basari-zemin); color: var(--basari); }
/* GOREV_K3_Komuta_Merkezi_v2.md §Faz 3/5 — hatırlatma tarihi geçmiş lead rozeti/kart vurgusu */
.rozet-gecikti { background: var(--hata-zemin); color: var(--hata); }
/* Devredebilirlik Haritası — 4 durum rozeti (app/core/devredebilirlik_hesap.py) */
.rozet-guvenle_devredilebilir { background: var(--basari-zemin); color: var(--basari); }
.rozet-devret_ama_izle { background: var(--altin-tint); color: #8A6A2F; }
.rozet-henuz_olculmedi { background: #E6EEF5; color: #3A5C7A; }
.rozet-kimse_yok { background: var(--hata-zemin); color: var(--hata); }
/* GOREV 6 Parça 2 — Stratejik (Karar Seviyesi) adım/rol işaretlemesi, PRK-01'in Gate kutusuna
   benzer kalın altın çerçeve; ÜÇ ekranda (Süreklilik dropdown, Süreç Örnekleri, Süreç Adımı
   Yönetimi) aynı class — bkz. app/templates/_karar_seviyesi_rozet.html. */
.rozet-stratejik { background: var(--altin-tint); color: var(--metin); border: 2px solid var(--altin); font-weight: 800; }
.kart-gecikti { border-color: var(--hata); border-width: 2px; }
/* GOREV_Atolye_Kullanici_Departman_Personel.md Faz D — Firma Kullanıcısı Ekle (altın, .kart
   varsayılanıyla aynı) / Veri Toplama Kullanıcısı Oluştur (ikincil mavi) görsel ayrımı. */
.kart-firma-kullanici { border-left: 3px solid var(--altin); }
.kart-veri-toplayici { border-left: 3px solid var(--ikincil-vurgu); }

.tablo { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.tablo th, .tablo td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cizgi); font-size: 0.9rem; }
.tablo th { color: var(--metin-soluk); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; }
/* GOREV_K3_Komuta_Merkezi_v2.md §Faz 11a — Leadler liste satırında hatırlatma geçmiş uyarısı. */
.tablo tr.satir-gecikti td { background: var(--hata-zemin); }

/* GOREV_K3_Komuta_Merkezi_v2.md §Faz 11d — otomatik genişleyen textarea (govde/not alanı),
   JS (komuta.js::komutaTextareaOtoBoyut) yüksekliği içerik arttıkça `scrollHeight`e göre ayarlar;
   `overflow:hidden` olmadan scrollHeight kendi scrollbar'ını da sayıp sürekli büyürdü. */
.textarea-oto { overflow: hidden; min-height: 7.5em; }

/* GOREV_K3_Komuta_Merkezi_v2.md §Faz 11d — Ek Dosyalar listesinde resim önizlemesi. */
.ek-onizleme { display: block; max-width: 64px; max-height: 64px; border-radius: 4px; margin-bottom: 4px; object-fit: cover; }

.modul-listesi { list-style: none; margin: 0; padding: 0; }
.modul-listesi li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border: 1px solid var(--cizgi); border-radius: 8px; margin-bottom: 8px;
}
.modul-listesi .yakinda { color: var(--gri); font-size: 0.85rem; font-style: italic; }

/* ── Süreç Mimarisi seçim kartları ── */

.secim-kartlari { display: flex; gap: 18px; margin-top: 20px; }
.secim-karti {
  flex: 1; padding: 24px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: var(--zemin-yukseltilmis); text-align: left;
}
.secim-karti:hover { border-color: var(--altin); }
.secim-karti h3 { color: var(--altin); }
.secim-karti p { color: var(--metin-soluk); font-size: 0.9rem; }

/* ── Çok-satırlı form (şerit/adım/VSM editörü) ── */

.satir-grubu { margin: 18px 0 26px; }
/* Adım satırı artık 6 dar alan taşıyor (şerit + R + A + makro aşama + bağımlılık + karar seviyesi).
   Sabit genişlikli, küçülmeyen alanlar satırı kaptan taşırıp etiket alanını sıfıra çökertiyordu
   ("boş kutu" + yatay kayma). Alanlar artık küçülebilir ve gerekince alt satıra sarılır. */
.satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.satir .alan { margin-bottom: 0; flex: 1 1 200px; min-width: 150px; }
.satir .alan-dar { flex: 1 1 130px; min-width: 118px; max-width: 200px; }
.satir-no { flex: 0 0 22px; padding-bottom: 9px; color: var(--gri); font-size: 0.85rem; }
.satir-sil { flex: 0 0 auto; }

/* GOREV_4_form_ux_duzeltmesi.md — Adım satırı ~11 alana çıkınca dar kutulara sıkışıp
   kullanılamaz hale gelmişti. Her adım artık bir kart: Bölüm A (temel — etiket/şerit/R/A) her
   zaman açık, Bölüm B (sınıflandırma + GÖREV 1'in ölçüm alanları) <details> ile varsayılan
   kapalı — dolu alan varsa rozetle özetlenir, kart açılmadan da görülebilir. */
.adim-karti { border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--zemin-yukseltilmis); }
.adim-temel { margin-bottom: 0; }
.adim-detay { margin-top: 10px; border-top: 1px dashed var(--cizgi); padding-top: 10px; }
.adim-detay summary { cursor: pointer; font-size: 0.85rem; color: var(--altin); font-weight: 600; list-style: none; }
.adim-detay summary::-webkit-details-marker { display: none; }
.adim-detay summary::before { content: "▸ "; }
.adim-detay[open] summary::before { content: "▾ "; }
.adim-detay-kapat { display: none; }
.adim-detay[open] .adim-detay-ac { display: none; }
.adim-detay[open] .adim-detay-kapat { display: inline; }
.gorsel-not-inline { color: var(--metin-soluk); font-weight: 400; font-size: 0.82rem; }
.rozet-detay { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; background: var(--altin-tint); color: #8A6A2F; font-size: 0.75rem; font-weight: 600; }
.adim-detay-govde { margin-top: 10px; }
.adim-detay-satir .alan-dar { min-width: 160px; max-width: 230px; }
.adim-olcum-baslik { font-size: 0.85rem; font-weight: 600; margin: 4px 0 8px; }

/* ── Swimlane / VSM görsel ── */

.gorsel-sarici { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px; background: var(--zemin-yukseltilmis); }
.gorsel-sarici svg { display: block; }
.gorsel-not { color: var(--metin-soluk); font-size: 0.82rem; margin-top: 8px; }
.pce-deger { font-size: 2.2rem; font-weight: 700; color: var(--altin); margin: 4px 0; }

.legend-listesi { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.85rem; }
.legend-listesi li { padding: 4px 0; border-bottom: 1px dotted var(--cizgi); }
.legend-listesi .raci { color: var(--gri); }

/* GOREV_karar_seviyesi_tam_gorsel.md — Çakışma Noktaları kutusu + 4 katmanlı swimlane lejantı */
.cakisma-kutusu { margin-top: 16px; padding: 10px 14px; background: var(--altin-tint); border-radius: 6px; }
.cakisma-kutusu h4 { margin: 0 0 4px; font-size: 0.82rem; color: var(--metin); text-transform: uppercase; letter-spacing: 0.04em; }
.cakisma-kutusu .legend-listesi li { border-bottom: none; padding: 2px 0; }

.swimlane-lejant { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cizgi); display: grid; gap: 8px; }
.lj-satir { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--metin-soluk); }
.lj-ornek { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lj-renk { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.lj-cizgi { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--altin); }
.lj-cizgi-kesik { border-top-style: dashed; }
.lj-cizgi-nokta { border-top-style: dotted; }
.lj-cember {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--zemin); color: var(--metin); font-size: 0.7rem; font-weight: 700;
}
.lj-cember-kalin { border: 3px solid var(--altin); }
.lj-cember-ince { border: 1.5px solid var(--altin); }
.lj-rozet {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--altin-tint); border: 1px solid var(--altin);
  font-size: 0.7rem; font-weight: 700; color: var(--metin);
}

table.sipoc-tablo { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.sipoc-tablo th, table.sipoc-tablo td {
  border: 1px solid var(--cizgi); padding: 8px 10px; text-align: left; vertical-align: top; font-size: 0.86rem;
}
table.sipoc-tablo th { background: var(--altin); color: #FFFFFF; font-size: 0.78rem; text-transform: uppercase; }

.bolum { margin-top: 30px; }
.bolum-baslik { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.baslik-aksiyon { display: flex; align-items: center; gap: 10px; }
a.buton { display: inline-block; text-decoration: none; }

/* ── Derin Değerlendirme (Frontend Faz 3, GOREV_frontend_faz3.md) ── */

.gizli { display: none; }

.ilerleme { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ilerleme .bar { flex: 1; height: 5px; background: var(--cizgi); border-radius: 3px; overflow: hidden; }
.ilerleme .bar i { display: block; height: 100%; background: var(--altin); border-radius: 3px; transition: width .3s; }
.adim-no { color: var(--metin-soluk); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; }
.leg-alt { color: var(--metin-soluk); font-size: 0.9rem; font-style: italic; margin-bottom: 14px; }
.kat-eti { color: var(--altin); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.soru { color: var(--metin); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 24px; }

.secenek {
  display: block; width: 100%; text-align: left; background: var(--zemin-yukseltilmis);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 15px 18px; margin-bottom: 11px;
  color: var(--metin); font-family: inherit; font-size: 0.94rem; line-height: 1.5; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.secenek:hover { border-color: var(--altin); background: var(--altin-tint); }
.secenek.secili { border-color: var(--altin); background: var(--altin-tint); font-weight: 600; }
.geri-btn { background: none; border: none; color: var(--metin-soluk); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; margin-top: 12px; padding: 6px 0; }
.geri-btn:hover { color: var(--metin); text-decoration: underline; }

/* ── ağırlıklandırma ── */
.agirlik-satir { background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.ag-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 12px; }
.ag-ad { color: var(--metin); font-weight: 700; font-size: 0.94rem; }
.ag-yuzde { color: var(--altin); font-weight: 800; font-size: 0.94rem; white-space: nowrap; }
.agirlik-satir input[type=range] { width: 100%; accent-color: var(--altin); }

/* ── sonuç: radar + harita ── */
.genel-satir { text-align: center; margin: 20px 0 4px; font-size: 1.02rem; color: var(--metin); }
.radar-sarma { max-width: 560px; margin: 20px auto 4px; }
.radar-sarma svg { width: 100%; height: auto; display: block; overflow: visible; }
.eksen-etiket { font-family: inherit; }
.eksen-etiket .ek-ad { color: var(--metin); font-weight: 800; font-size: 12px; line-height: 1.25; }
.eksen-etiket .ek-onem { color: var(--metin-soluk); font-size: 10.5px; margin-top: 3px; font-weight: 600; }
.grid-halka { fill: none; stroke: var(--cizgi); stroke-width: 1; }
.hedef-halka { stroke: var(--altin); stroke-width: 1.6; stroke-dasharray: 6 6; opacity: .6; }
.eksen-cizgi { stroke: var(--cizgi); stroke-width: 1; }
.sektor-parlama { fill: var(--altin); stroke: none; }
.veri-sekli { fill: rgba(185, 151, 91, .2); stroke: var(--altin); stroke-width: 1.5; }
.veri-kenar { stroke: var(--altin); stroke-linecap: round; }
.veri-nokta { fill: var(--altin); stroke: var(--zemin-yukseltilmis); stroke-width: 1.5; }

.radar-lejant { max-width: 520px; margin: 20px auto 0; font-size: 0.85rem; color: var(--metin-soluk); text-align: left; }
.radar-lejant p { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; line-height: 1.5; }
.radar-lejant p:last-child { margin-bottom: 0; }
.lj-cizgi { display: inline-block; width: 20px; height: 2px; background: var(--altin); margin-top: 9px; flex-shrink: 0; }
.lj-kalin { display: inline-block; width: 20px; height: 5px; background: var(--altin); border-radius: 3px; margin-top: 7px; flex-shrink: 0; }

.harita { margin: 26px 0 6px; }
.h-baslik { color: var(--metin); font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }
.durak-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi); border-radius: 8px; padding: 13px 16px; margin-bottom: 10px; }
.durak-satir .d-ad { font-weight: 700; font-size: 0.94rem; }
.durak-satir .d-yorum { color: var(--metin-soluk); font-size: 0.82rem; margin-top: 3px; line-height: 1.45; }

.durum { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em; border-radius: 20px; padding: 5px 13px; white-space: nowrap; }
.durum-kazanc { background: var(--basari-zemin); color: var(--basari); }
.durum-standart { background: #E6EEF5; color: #3A5C7A; }
.durum-risk { background: var(--altin-tint); color: #8A6A2F; }
.durum-kayip { background: var(--hata-zemin); color: var(--hata); }

.okuma { margin: 26px 0; }
.okuma .blok { border-left: 3px solid var(--altin); padding: 4px 0 4px 18px; margin-bottom: 18px; }
.okuma .blok .b-eti { color: var(--altin); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }
.okuma .blok p { color: var(--metin); font-size: 0.95rem; }

/* ── Analizler (Frontend Faz 4, GOREV_frontend_faz4.md) — "profil kartı" Grup A/B/C'nin
   hepsinde ortak: referans_faz2d/*.html'in `.profil`/`.p-eti`/`.p-ad` sınıflarından birebir. ── */

.arac-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }

.profil { background: var(--zemin-yukseltilmis); border: 1px solid var(--cizgi); border-radius: 12px; padding: 26px 28px; margin: 24px 0; }
.profil .p-eti { color: var(--altin); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.profil .p-ad { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.profil .p-ad-kayip { color: var(--hata); }
.profil .p-ad-risk { color: #8A6A2F; }
.profil .p-ad-kazanc { color: var(--basari); }
.profil p { font-size: 0.95rem; color: var(--metin); }

/* ── Stratejik Rapor (Frontend Faz 5, GOREV_frontend_faz5.md) ── */

.rozet-buyuk { font-size: 0.85rem; padding: 5px 14px; }

.not-kutu {
  background: var(--altin-tint); border: 1px solid var(--altin); border-radius: 8px;
  padding: 14px 16px; color: var(--metin); font-size: 0.92rem; line-height: 1.5;
}

table.veri-tablo { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.veri-tablo th, table.veri-tablo td {
  border: 1px solid var(--cizgi); padding: 8px 10px; text-align: left; vertical-align: top; font-size: 0.88rem;
}
table.veri-tablo th { background: var(--altin); color: #FFFFFF; font-size: 0.78rem; text-transform: uppercase; }
.kaynak-eti { color: var(--gri); font-size: 0.76rem; margin-top: 3px; }

.dayanak {
  color: var(--metin-soluk); font-size: 0.85rem; font-style: italic;
  border-left: 2px solid var(--altin); padding-left: 10px; margin: 6px 0 10px;
}

.yol-ufku { color: var(--altin); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin: 18px 0 8px; }
.yol-ufku:first-child { margin-top: 0; }
.yol-adim { margin-bottom: 12px; }
.yol-adim .y-ad { font-weight: 700; }
.yol-adim p { margin: 4px 0 0; color: var(--metin); }
/* GOREV_A — Yol Haritası maddesindeki "Sorumlu:" / "Yöntem:" alt satırları */
.yol-adim p.nkn { margin: 3px 0 0 12px; color: var(--metin-soluk); font-size: 0.92rem; }
.yol-adim p.nkn strong { color: var(--metin); font-weight: 700; }

.mad-karti { margin-bottom: 14px; }
.mad-karti .mad-ust { display: flex; justify-content: flex-end; margin-bottom: 6px; }

/* ── Duyarlı davranış (GOREV_ui_kontrol_360_gorev_pwa_ikon.md §1) ──
   Uygulama tek max-width + width:100% + flex-wrap ile büyük ölçüde duyarlı; aşağıdaki blok
   dar ekranlarda (telefon) taşan birkaç noktayı toparlar: üst menünün sarması, Yönetim
   düzenleme satırlarındaki geniş min-width'li inline-flex alanların tek sütuna inmesi,
   kenar boşluklarının küçülmesi. */
@media (max-width: 640px) {
  .ust-menu { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .ust-menu nav { flex-basis: 100%; order: 3; flex-wrap: wrap; gap: 10px 16px; }
  .icerik { padding-left: 16px; padding-right: 16px; }
  .secim-kartlari { flex-wrap: wrap; }
  /* Yönetim/düzenleme formlarındaki inline flex satırları: her alan tam genişlik, taşma yok. */
  form[style*="flex"] > .alan,
  form[style*="flex"] > input,
  form[style*="flex"] > select,
  form[style*="grid"] > div[style*="flex"] > input,
  form[style*="grid"] > div[style*="flex"] > select {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }
}