/**
 * İş Hafızası — utility ile ifade edilemeyen ya da her ekranda tekrar eden kurallar.
 * Renkler Tailwind ile aynı değişkenlerden (kaynak/giris.css); iki temada da çalışır.
 */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kbd { display: inline-block; padding: 0 5px; border: 1px solid rgb(var(--c-gray-200)); border-bottom-width: 2px; border-radius: 5px; font-size: 10.5px; line-height: 16px; color: rgb(var(--c-gray-500)); background: rgb(var(--c-surface)); font-family: inherit; }

/* Sol menü (wPanel app.css "Sol menü" ile aynı ölçüler) */
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; font-weight: 500; color: rgb(var(--c-gray-600)); white-space: nowrap; }
.nav-item:hover { background: rgb(var(--c-gray-100)); }
.nav-item.is-active { background: rgb(var(--c-indigo-50)); color: rgb(var(--c-indigo-600)); font-weight: 600; }
.nav-item svg { flex-shrink: 0; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgb(var(--c-indigo-600)); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }

/* Kart (wPanel: beyaz zemin, 1px çerçeve, 12px köşe; başlık 14,5px/700) */
.kart { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-gray-200)); border-radius: 12px; }
.kart-baslik { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgb(var(--c-gray-100)); }
.kart-baslik h2 { font-size: 14.5px; line-height: 1.4; font-weight: 700; color: rgb(var(--c-gray-900)); }
.etiket { font-size: 10.5px; line-height: 1.3; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--c-gray-500)); }
/* İkincil alan: kesikli çerçeve (wPanel'de katlanır bölümler ve sistem şeridi) */
.kesikli { background: rgb(var(--c-gray-50)); border: 1px dashed rgb(var(--c-gray-300)); border-radius: 12px; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.btn-ana { background: rgb(var(--c-indigo-600)); color: #fff; border: 1px solid transparent; }
.btn-ana:hover { filter: brightness(1.08); }
.btn-ikincil { background: rgb(var(--c-surface)); color: rgb(var(--c-gray-700)); border: 1px solid rgb(var(--c-gray-200)); }
.btn-ikincil:hover { border-color: rgb(var(--c-indigo-300)); color: rgb(var(--c-indigo-600)); }
.btn-sessiz { color: rgb(var(--c-gray-500)); border: 1px solid transparent; }
.btn-sessiz:hover { background: rgb(var(--c-gray-100)); color: rgb(var(--c-gray-800)); }
.btn-mini { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }

/* Hap etiket */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }

/* Form alanı */
:where(.girdi) { width: 100%; }
.girdi { border-radius: 8px; border: 1px solid rgb(var(--c-gray-200)); background: rgb(var(--c-surface)); color: rgb(var(--c-gray-900)); padding: 7px 11px; font-size: 13.5px; outline: none; }
.girdi::placeholder { color: rgb(var(--c-gray-400)); }
.girdi:focus { border-color: rgb(var(--c-indigo-500)); box-shadow: 0 0 0 3px rgb(var(--c-indigo-500) / .18); }
select.girdi { padding-right: 28px; }
/* Senaryo 68: küçük form alanı, btn-mini ile aynı yükseklikte (gelen kutusu satırı gibi düğmelerle yan yana duran yerler). */
.girdi.girdi-mini { padding: 3px 8px; font-size: 11.5px; line-height: 1.45; border-radius: 6px; }
select.girdi.girdi-mini { padding-right: 24px; }
.girdi-mini input { padding-top: 0; padding-bottom: 0; line-height: 1.45; }
/* R2: aramalı seçim kutusu (çipler ve arama alanı tek kutuda); odak kutunun kendisinde görünür. */
.secim:focus-within { border-color: rgb(var(--c-indigo-500)); box-shadow: 0 0 0 3px rgb(var(--c-indigo-500) / .18); }
.secim input::placeholder { color: rgb(var(--c-gray-400)); }

/* Satır eylemleri: üzerine gelince görünür, yer değiştirmez; dokunmatikte ve dar ekranda hep görünür (wPanel Notlar kuralı). */
@media (hover: hover) and (min-width: 640px) {
    .satir .satir-eylem { opacity: 0; transition: opacity .12s; }
    .satir:hover .satir-eylem, .satir:focus-within .satir-eylem { opacity: 1; }
}

/* Sürükle-bırak (Sortable) */
.surukle-hayalet { opacity: .4; }
.surukle-secili { box-shadow: 0 12px 32px -8px rgba(15,23,42,.25); }

/* Kaydırma çubuğu ince */
.ince-kaydirma::-webkit-scrollbar { width: 6px; height: 6px; }
.ince-kaydirma::-webkit-scrollbar-thumb { background: rgb(var(--c-gray-300)); border-radius: 3px; }

/* Aktivite haritası hücresi */
.isi { width: 14px; height: 14px; border-radius: 3px; }

/* Modal ve menü arkasındaki karartma: gri ölçek koyu temada açıldığı için sabit renk. */
.karartma { background: rgb(15 23 42 / 0.45); }
html.dark .karartma { background: rgb(0 0 0 / 0.65); }

/* ── YALIN GÖRÜNÜŞ (onizleme/ klasöründen) ─────────────────────────────────────────────
 * Mert 29.10.2026: "çok şey görüp kafam karışıyor" → kart yok, tek vurgu rengi, rozet yok.
 * Bölümler çerçeve yerine boşlukla ve küçük gri başlıkla ayrılır. Açılır pencereler (shadow-pop)
 * ve pano kartları yüzen nesne oldukları için çerçeveli kalır.
 */
.kart:not(.shadow-pop):not(.pano-kart) { background: transparent; border-color: transparent; border-radius: 0; box-shadow: none !important; }
.kart-baslik { padding: 0 16px 6px; border-bottom: 1px solid rgb(var(--c-gray-100)); }
.kart-baslik h2 { font-size: 13px; font-weight: 600; color: rgb(var(--c-gray-500)); }
.etiket { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgb(var(--c-gray-500)); }
.kesikli { background: transparent; border: 0; }
/* Rozetler düz gri yazı: renk yalnız anlam taşıyan yerde (gecikme kırmızısı satır metninde). */
.pill { background: transparent !important; border: 0 !important; padding: 0; font-weight: 500; color: rgb(var(--c-gray-500)) !important; }
.btn-ikincil { border-color: transparent; background: rgb(var(--c-gray-100)); }
.btn-ikincil:hover { border-color: transparent; background: rgb(var(--c-gray-200)); color: rgb(var(--c-gray-900)); }
.nav-item { font-weight: 500; }
.nav-item.is-active { background: rgb(var(--c-gray-100)); color: rgb(var(--c-gray-900)); font-weight: 600; }
.nav-item svg { display: none; }
.nav-badge { background: transparent; color: rgb(var(--c-gray-500)); font-weight: 600; }
/* Pano kartı: sütun zemininde beyaz ve ince çerçeveli kalır. */
.pano-kart { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-gray-200)); border-radius: 8px; }
/* Liste satırları arasında çizgi yok (tablolar hariç): satırlar boşlukla ayrılır. */
div.divide-y > :not([hidden]) ~ :not([hidden]) { border-color: transparent; }
/* Yalın bölüm: küçük gri başlık + liste; bölümler arası boşluk sayfada gap ile verilir. */
.bolum-baslik { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 6px; margin-bottom: 2px; border-bottom: 1px solid rgb(var(--c-gray-100)); font-size: 13px; font-weight: 600; color: rgb(var(--c-gray-500)); }
.bolum-baslik a, .bolum-baslik button { margin-left: auto; font-weight: 500; color: rgb(var(--c-gray-400)); }
.bolum-baslik a:hover, .bolum-baslik button:hover { color: rgb(var(--c-gray-900)); }
/* R3: başlıkta iki düğme yan yana (+ İş, + Bölüm ekle): yalnız ilki sağa yaslanır. */
.bolum-baslik a + a, .bolum-baslik button + button, .bolum-baslik a + button, .bolum-baslik button + a { margin-left: 0; }
/* Süzgeç ve seçim kutuları çerçevesiz, açık gri zeminli. */
select.girdi { border-color: transparent; background-color: rgb(var(--c-gray-100)); }

/* R1 madde 22: metindeki @kişi ve #proje/marka bağlantısı ($store.app.bagliMetin). Renk değişkenden: iki temada da okunur. */
.bahis { color: rgb(var(--c-indigo-600)); font-weight: 500; }
.bahis:hover { text-decoration: underline; }