/* Gecici. Gorsel katman A.5'te Ortak.Blazor temasindan gelecek
(OrtakBlazorVarliklar); burada tema CSS'i ELLE yazilmayacak. */
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
margin: 0;
padding: 2rem;
line-height: 1.5;
}
/* ==========================================================================
Portal kabugu — duzen, menu, listeler, bos durumlar.
Sade ve bilincli: bu bir "tasarim" degil, KULLANILABILIR bir yuzey.
Gercek gorsel dil Faz C'de bilesen kutuphanesiyle geliyor.
========================================================================== */
:root {
--kenar: #d8dde3;
--metin: #1f2933;
--soluk: #62707f;
--vurgu: #1c6fd4;
--uyari-zemin: #fff6e0;
--uyari-kenar: #e0a800;
--basari-zemin: #e8f5ec;
--basari-kenar: #2e8b57;
--hata: #b3261e;
/* Sayfa BOLUM ARALIGI — tek kaynak.
Bolumleri (yetenek ozeti, atlanan collector'lar, zaman serisi)
birbirinden ayiran dikey olcu. Deger tarayicinin h2 varsayilanindan
(0.83em x 1.5rem) geliyor: ritim zaten oydu, artik ACIK ve tek
yerden degisiyor. Bir bolume "kendine ozel" bir aralik verilirse
sayfa ritmi bozulur — nitekim grafikler tam olarak boyle
bitisikti. */
--bolum-araligi: 1.25rem;
}
/* Bolum basliklari da AYNI olcuyu kullansin: token gercekten tek kaynak
olsun, tarayici varsayilanina denk gelmesi tesadufe kalmasin. */
h2 { margin: var(--bolum-araligi) 0; }
body { color: var(--metin); }
.duzen { display: flex; min-height: 100vh; }
.yan-menu {
width: 220px;
flex: 0 0 220px;
border-right: 1px solid var(--kenar);
padding: 1rem 0;
background: #f7f9fb;
}
/* MARKA BLOGU: portalin tek gorsel degisikligi.
Menunun geri kalanindan cizgiyle ayriliyor — logo bir menu ogesi
degil, kimin urunu oldugunun isareti. */
.marka {
display: flex;
align-items: center;
gap: .5rem;
text-decoration: none;
color: var(--metin);
}
/* AYIRICI YALNIZCA YAN MENUDE. `.marka` genel kurala yazilinca cizgi
giris ekranindaki logoya da bulasti: koyu zeminde acik gri bir cizgi.
Ayirici, logonun degil MENUNUN ihtiyaci — logo bir menu ogesi degil,
kimin urunu oldugunun isareti ve listeden ayrilmasi gerekiyor. */
.yan-menu .marka {
padding: 0 .9rem 1rem;
margin-bottom: .5rem;
border-bottom: 1px solid #e4e9ee;
}
.marka-ad {
font-weight: 700;
font-size: .95rem;
line-height: 1.1;
letter-spacing: .01em;
}
/* Urun adi KUCUK ve soluk: marka kalici, urun adi gecici (CLAUDE.md —
isim karari verilince degisecek). Gorsel agirligi da o oranda. */
.marka-urun {
display: block;
font-size: .55rem;
font-weight: 400;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--soluk);
margin-top: .1rem;
}
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a {
display: block;
padding: .55rem 1rem;
color: var(--metin);
text-decoration: none;
}
.menu a:hover { background: #eef2f6; }
.menu a.active {
background: #e6effa;
border-left: 3px solid var(--vurgu);
font-weight: 600;
}
.icerik-sutunu { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ust-bar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: .75rem;
padding: .6rem 1.25rem;
border-bottom: 1px solid var(--kenar);
}
.kullanici { color: var(--soluk); font-size: .9rem; }
.rol-rozet {
margin-left: .4rem;
padding: .1rem .45rem;
border: 1px solid var(--kenar);
border-radius: 999px;
font-size: .75rem;
}
.cikis { display: inline; margin: 0; }
.baglanti-buton {
background: none;
border: none;
color: var(--vurgu);
cursor: pointer;
padding: 0;
font: inherit;
}
.icerik { padding: 1.25rem; }
.sade-duzen { max-width: 380px; margin: 4rem auto; padding: 0 1rem; }
.baslik-satiri {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
/* Dar ekranda SARILIR. Sarilmadan once uzun bir instance adi ile
yanindaki buton yan yana sigmiyor ve satir govdeyi tasirarak TUM
SAYFAYI yatay kaydiriyordu (375px'te 430px genislik olculdu).
Grafik araligina bakarken cikti; grafiklerle ilgisi yok. */
flex-wrap: wrap;
}
/* Baslik kucule bilsin: flex ogesi varsayilan olarak icerigi kadar
kuculur (min-width: auto) ve uzun bir ad boyle tasar. */
.baslik-satiri h1 { min-width: 0; overflow-wrap: anywhere; }
.baslik-eylemleri { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.baslik-eylemleri form { margin: 0; }
/* --- Formlar ------------------------------------------------------------ */
label { display: block; margin: .75rem 0 .2rem; font-weight: 600; font-size: .9rem; }
input, select {
width: 100%;
padding: .45rem .5rem;
border: 1px solid var(--kenar);
border-radius: 4px;
font: inherit;
}
/* ONAY VE SECIM KUTULARI %100 GENISLIK ALMAZ.
Ustteki kural metin alanlari icin yazildi ama `input` seciciligi
checkbox ve radio'yu da yakaliyor: kutu satir boyunca uzuyor ve
isaret, etiketinden kopuk bir yerde — genelde sagda — beliriyor.
Sahada goruldu (kiraci duzenleme ekrani, 30 Agu 2026).
Dolgu ve kenarlik da sifirlaniyor; ikisi de kutunun kendi cizimini
bozuyordu. */
input[type="checkbox"],
input[type="radio"] {
width: auto;
padding: 0;
border: 0;
border-radius: 0;
}
fieldset {
border: 1px solid var(--kenar);
border-radius: 6px;
margin: 0 0 1rem;
padding: .5rem 1rem 1rem;
}
legend { font-weight: 700; padding: 0 .35rem; }
.buton {
display: inline-block;
margin-top: 1rem;
padding: .5rem .9rem;
background: var(--vurgu);
color: #fff;
border: none;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
font: inherit;
}
.buton.kucuk { margin: 0; padding: .3rem .6rem; font-size: .85rem; }
.buton.uyari-buton { background: var(--uyari-kenar); color: #2b2b2b; }
.baglanti { margin-left: .75rem; }
.hata { color: var(--hata); font-weight: 600; }
/* --- Listeler ----------------------------------------------------------- */
.liste { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.liste th, .liste td {
text-align: left;
padding: .5rem .6rem;
border-bottom: 1px solid var(--kenar);
vertical-align: top;
}
.liste tr.pasif { color: var(--soluk); background: #fafbfc; }
.rozet {
display: inline-block;
padding: .1rem .45rem;
border: 1px solid var(--kenar);
border-radius: 999px;
font-size: .75rem;
white-space: nowrap;
}
.rozet.iyi { border-color: var(--basari-kenar); color: var(--basari-kenar); }
.rozet.kotu { border-color: var(--hata); color: var(--hata); }
.rozet.dikkat { border-color: var(--uyari-kenar); color: #8a6d00; }
.rozet.bilinmiyor { border-color: var(--kenar); color: var(--soluk); }
/* --- Sabit baslik: hukum + eksen seridi --------------------------------
Sekmenin USTUNDE kaliyor. Degerlendirmenin varlik sebebi "ilk bakista
cevap"; sekmenin arkasina koymak o sebebi yok ederdi. */
.hukum-satiri {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
margin: .6rem 0 0;
}
.hukum {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .25rem .7rem;
border: 1px solid var(--kenar);
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
}
.hukum::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.hukum.iyi { color: var(--basari-kenar); border-color: var(--basari-kenar); background: var(--basari-zemin); }
.hukum.dikkat { color: #8a6d00; border-color: var(--uyari-kenar); background: var(--uyari-zemin); }
.hukum.sorun { color: var(--hata); border-color: var(--hata); background: #fdeceb; }
.eksen-serit {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: .8rem 0 0;
padding-top: .8rem;
border-top: 1px solid var(--kenar);
}
.eksen-cip {
display: inline-flex;
align-items: baseline;
gap: .45rem;
padding: .3rem .6rem;
border: 1px solid var(--kenar);
border-left-width: 3px;
border-radius: 3px;
font-size: .85rem;
}
.eksen-cip.iyi { border-left-color: var(--basari-kenar); }
.eksen-cip.dikkat { border-left-color: var(--uyari-kenar); }
.eksen-cip.sorun { border-left-color: var(--hata); }
.eksen-cip span { font-size: .8rem; color: var(--soluk); }
/* --- Liste durum noktasi ------------------------------------------------
Nokta HUKMU tasiyor. Renk tek basina yetmedigi icin ayni bilgi rozet
ve "One cikan" sutunuyla birlikte uc kanaldan veriliyor. */
.durum-noktasi {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
margin-right: .45rem;
background: #b8c1cb;
}
.durum-noktasi.iyi { background: var(--basari-kenar); }
.durum-noktasi.dikkat { background: var(--uyari-kenar); }
.durum-noktasi.kotu { background: var(--hata); }
.durum-noktasi.olu { background: #b8c1cb; }
/* --- Sekmeler ----------------------------------------------------------
Duz baglantilar: durum URL'de tutuluyor, boylece link paylasilabiliyor
ve tarayici geri tusu calisiyor. */
.sekmeler {
display: flex;
flex-wrap: wrap;
gap: .1rem;
margin: var(--bolum-araligi) 0 0;
border-bottom: 1px solid var(--kenar);
}
.sekme {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .8rem;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--soluk);
text-decoration: none;
font-size: .95rem;
}
.sekme:hover { color: var(--metin); }
.sekme.secili {
color: var(--metin);
font-weight: 600;
border-bottom-color: var(--vurgu);
}
.sekme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; border-radius: 3px; }
/* Sifir GOSTERILMIYOR: her sekmede duran bir "0", gercekten bir sey
oldugunda gozden kacmasina yol acardi. */
.centik {
font-size: .72rem;
font-weight: 600;
padding: .05rem .35rem;
border: 1px solid var(--uyari-kenar);
border-radius: 999px;
background: var(--uyari-zemin);
color: #8a6d00;
}
.sekme-paneli > h2:first-child { margin-top: var(--bolum-araligi); }
/* --- Durum degerlendirmesi ---------------------------------------------
Eksenler tablo DEGIL kart: dort satirlik bir tabloda "Olcum" sutunu
dar kalip "3,4 ms/bekleme" gibi degerleri kirpiyordu. Kart duzeni
olcumu ve aciklamayi alt alta koyuyor. */
.degerlendirme-eksenleri {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .75rem;
margin: 1rem 0;
}
.eksen {
border: 1px solid var(--kenar);
border-left: 4px solid var(--kenar);
border-radius: 4px;
padding: .6rem .8rem;
}
.eksen.sorun { border-left-color: var(--hata); }
.eksen.dikkat { border-left-color: var(--uyari-kenar); }
.eksen.iyi { border-left-color: var(--basari-kenar); }
.eksen .eksen-basligi {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
font-weight: 600;
}
.eksen .olcum { display: block; font-size: 1.1rem; margin: .25rem 0; }
.sebep { display: block; color: var(--soluk); font-size: .8rem; }
/* HUCREYE uygulandiginda blok OLMAMALI.
`.sebep` bir icin tasarlandi ve `display: block` onun isi:
aciklama, ustundeki metnin ALTINA gecsin diye. Ayni sinif bir | 'ye
verildiginde ise hucre tablo duzeninden CIKIYOR — alt kenarligini ve
sutun hizasini kaybediyor.
OLCULDU: Sunucularim listesinde satir ayiraci "One cikan" sutununun
altinda kopuyordu; cizgi Durum'da bitip Son sinyal'de yeniden
basliyordu. Ayni hata SunucuDetay ve IngestDetayi tablolarinda da
vardi ve fark edilmemisti — orada hucre dar oldugu icin kopukluk goze
carpmiyordu.
Cozum burada, isaretlemede degil: bes ayri yerde |
yazimini degistirmek yerine sinifin hucre uzerindeki davranisi
duzeltiliyor. */
td.sebep { display: table-cell; }
/* --- Seritler ve kartlar ------------------------------------------------ */
/* ui-kararlari.md: SuperAdmin ekraninda sapma ONDE — serit tablodan once. */
.serit {
padding: .6rem .8rem;
margin: 1rem 0;
border-left: 4px solid var(--kenar);
background: #f5f7f9;
}
.serit.uyari { border-left-color: var(--uyari-kenar); background: var(--uyari-zemin); }
.serit.basari-serit { border-left-color: var(--basari-kenar); background: var(--basari-zemin); }
.kart-sirasi { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.kart {
border: 1px solid var(--kenar);
border-radius: 6px;
padding: .75rem 1rem;
min-width: 150px;
}
.kart .sayi { display: block; font-size: 1.6rem; font-weight: 700; }
.kisayollar { padding-left: 1.1rem; }
.kisayollar li { margin: .3rem 0; }
/* --- Bos durum ---------------------------------------------------------- */
/* Bos liste ekrani bos birakmaz: "calismiyor mu" dedirtmesin. */
.bos-durum {
border: 1px dashed var(--kenar);
border-radius: 6px;
padding: 1.5rem;
margin: 1rem 0;
text-align: center;
background: #fbfcfd;
}
.bos-baslik { font-weight: 700; margin: 0 0 .4rem; }
.bos-aciklama { color: var(--soluk); margin: 0 auto 1rem; max-width: 46rem; }
/* --- Kayit kodu --------------------------------------------------------- */
.basari {
border: 1px solid var(--basari-kenar);
background: var(--basari-zemin);
border-radius: 6px;
padding: 1rem 1.25rem;
}
/* Kod BIR KEZ gosterilir; secilebilir ve okunakli olmali. */
.kayit-kodu {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 1.15rem;
letter-spacing: .04em;
background: #fff;
border: 1px solid var(--kenar);
border-radius: 4px;
padding: .7rem .9rem;
user-select: all;
word-break: break-all;
}
.uyari-metin { color: var(--soluk); font-size: .9rem; }
@media (max-width: 720px) {
.duzen { flex-direction: column; }
.yan-menu { width: auto; flex: none; border-right: none; border-bottom: 1px solid var(--kenar); }
.menu { display: flex; flex-wrap: wrap; }
}
/* --- Agent karti: host merkezli liste ------------------------------- */
/* Bir makine altinda N instance var; duz tabloda makine adi her satirda
tekrar ederdi ve "hangi instance hangi makinede" gozle takip edilemezdi. */
.host-karti {
border: 1px solid var(--kenar);
border-radius: 6px;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.host-karti h2 { font-size: 1.05rem; margin: 0; }
.host-karti h2 .sebep { margin-left: .5rem; font-weight: 400; }
.buton.sessiz {
background: transparent;
color: var(--soluk);
border: 1px solid var(--kenar);
}
/* --- Geri alinamaz islemler ----------------------------------------- */
/* Kapali baslar: silme, ekrani ilk acan kisinin karsisina cikan bir sey
olmamali. */
details.tehlikeli {
margin-top: 2rem;
border: 1px solid var(--uyari-kenar);
border-radius: 6px;
padding: .75rem 1rem;
}
details.tehlikeli > summary { cursor: pointer; font-weight: 600; }
details.tehlikeli label { display: block; margin: .75rem 0; }
details.tehlikeli input, details.tehlikeli select {
display: block;
margin-top: .25rem;
/* min(): 375 px'te govde padding'i dusunce 311 px kaliyor ve sabit
20rem tasiyordu. Genis ekranda davranis aynen duruyor. */
min-width: min(20rem, 100%);
padding: .4rem;
}
details.tehlikeli .buton[disabled] { opacity: .5; cursor: not-allowed; }
/* Parmak izi: 64 karakter, tabloyu tasirdi — kisaltilip title'a tam hali
konuyor. Deger opak bir tanimlayici; kiraci verisi degil. */
code.parmak-izi {
font-size: .8rem;
background: #f2f4f7;
padding: .1rem .3rem;
border-radius: 3px;
}
/* --- Yeniden isleme formu -------------------------------------------- */
/* Tarih araligi + filtre tek satirda: karar ucu de bir arada gorunsun,
kullanici asagi kaydirmadan "ne kadarini, hangisini" secebilsin. */
.form-satiri {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-end;
margin: 1rem 0;
}
.form-satiri label { display: block; }
.form-satiri input[type="date"] {
display: block;
margin-top: .25rem;
padding: .4rem;
}
/* ONAY SATIRI HER YERDE CALISIR.
Once yalnizca `.form-satiri` icinde tanimliydi; disinda kullanilinca
duzen hic uygulanmiyor, etiket alta dusuyordu. Kural artik kapsamsiz.
Grid: kutu kendi genisliginde, metin kalan alani aliyor ve ikinci
satira sarkan aciklama kutunun ALTINA degil, metnin hizasina
geliyor. */
.onay-satiri {
display: grid;
grid-template-columns: auto 1fr;
gap: .55rem;
align-items: start;
/* label taban kurali kalin yaziyor; onay satirinda metin normal. */
font-weight: 400;
}
.onay-satiri > input { margin: .25rem 0 0; }
/* Aciklama etiketin ALTINA, ama kutunun degil METNIN hizasinda. */
.onay-satiri .sebep { margin-top: .15rem; }
.form-satiri .onay-satiri { align-items: center; }
.form-satiri .onay-satiri > input { margin: 0; }
/* ==== C.1 PANOLAR ===================================================== */
/* KPI kartlari: auto-fit ile DAR EKRANDA KENDILIGINDEN tek sutuna duser.
Sabit sutun sayisi verilseydi mobilde yatay kaydirma cikardi
(ui-kararlari.md: kiraci panosu mobilde oldugu gibi calisir). */
.kpi-sirasi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin: var(--bolum-araligi) 0;
}
/* Uyari seridindeki kiraci listesi: serit bir UYARI, tablo degil. */
.uyari-listesi {
margin: .5rem 0;
padding-left: 1.25rem;
}
.uyari-listesi li { margin: .15rem 0; }
/* --- Sunucu kartlari ------------------------------------------------- */
.sunucu-kartlari {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.sunucu-karti {
border: 1px solid var(--kenar);
border-radius: 6px;
padding: 1rem 1.25rem;
/* Uzun SQL surumu ve makine adi tasmasin: kart buyusun, sayfa
yatay kaymasin. */
min-width: 0;
overflow-wrap: anywhere;
}
.sunucu-karti h3 { font-size: 1rem; margin: 0; }
/* Etiket/deger: dar ekranda alt alta, genis ekranda iki sutun. */
.sunucu-ozellikleri {
display: grid;
grid-template-columns: auto 1fr;
gap: .25rem .75rem;
margin: .75rem 0 0;
font-size: .9rem;
}
.sunucu-ozellikleri dt { color: var(--soluk); }
.sunucu-ozellikleri dd { margin: 0; }
/* --- Baseline gostergesi --------------------------------------------- */
/* Bos ekran musteriye "calismiyor mu" dedirtir; cubuk ilerlemeyi
gorunur kiliyor (ui-kararlari.md). */
.baseline { margin-top: .9rem; }
.baseline-ust { margin-bottom: .35rem; }
.baseline-cubuk {
height: 8px;
border-radius: 4px;
background: #e8ebef;
overflow: hidden;
}
.baseline-cubuk > span {
display: block;
height: 100%;
background: var(--basari-kenar, #2e7d32);
}
/* --- Mobil ----------------------------------------------------------- */
@media (max-width: 640px) {
/* Tek sutun: kartlar alt alta. minmax zaten dusuruyor ama 300px
tavani 320px'lik ekranda yatay kaydirma birakabiliyordu. */
.kpi-sirasi,
.sunucu-kartlari {
grid-template-columns: 1fr;
}
.sunucu-karti { padding: .85rem 1rem; }
/* Etiket/deger dar ekranda alt alta: iki sutun sikisinca deger
kirpiliyordu. */
.sunucu-ozellikleri { grid-template-columns: 1fr; }
.sunucu-ozellikleri dt { margin-top: .4rem; }
}
/* --- Ingest inceleme -------------------------------------------------- */
/* Tam hata metni ve ham zarf: uzun ve satir sonlari anlamli. Kaydirma
KENDI kutusunda kaliyor — sayfa yatay kaymasin. */
.hata-metni,
.ham-zarf {
margin: .5rem 0 0;
padding: .6rem .8rem;
background: #f2f4f7;
border-radius: 4px;
font-size: .82rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ham-zarf {
max-height: 26rem;
overflow: auto;
}
/* --- Zaman araligi secimi --------------------------------------------- */
/* Kutuphanede zoom yok (kategori ekseni, ChartZoomSettings yok): kullaniciya
yakinlastirma yerine hazir pencereler veriliyor. */
/* Parmak izi seviye dususunun SEBEBI: seviyenin hemen altinda, girintili.
Ayri bir serit/rozet DEGIL — bu bir alarm degil, seviyeyi aciklayan bir
not; serit yapilsaydi her seviye 2 kurulumu ekranda kirmizi bir uyari
gibi durur ve gercek uyarilarin degerini dusururdu. */
.dusus-sebebi {
margin-top: .35rem;
padding-left: .6rem;
border-left: 2px solid var(--kenar);
}
.dusus-sebebi p { margin: .15rem 0 0; }
/* ==== D.3 BULGU SATIRI ================================================ */
/* Kart DEGIL: sol kenarlikli satir (ui-kararlari.md). Sol kenar rengi
onemi tasiyor ve renk TEK BASINA anlam tasimasin diye satirda onem adi
da metin olarak yaziyor. */
.bulgu-satiri {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
position: relative;
padding: .7rem 2rem .7rem .9rem;
border: 1px solid var(--kenar);
border-left: 4px solid var(--soluk);
/* Tek tarafli kenarlikta yuvarlatma anlamsiz. */
border-radius: 0;
text-decoration: none;
color: inherit;
background: #fff;
}
.bulgu-satiri + .bulgu-satiri { border-top: none; }
.bulgu-satiri:hover { background: #f7f9fb; }
/* Klavye odagi GORUNUR: satirda metin var ama odak halkasi olmazsa
klavyeyle gezen kullanici nerede oldugunu bilemez. */
.bulgu-satiri:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.bulgu-govde { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bulgu-baslik { font-weight: 600; overflow-wrap: anywhere; }
.bulgu-satiri.onem-kritik { border-left-color: var(--hata); }
.bulgu-satiri.onem-yuksek { border-left-color: var(--uyari-kenar); }
.bulgu-satiri.onem-orta { border-left-color: var(--vurgu); }
.bulgu-satiri.onem-dusuk { border-left-color: var(--kenar); }
.bulgu-listesi { margin: var(--bolum-araligi) 0; }
/* Script kutusu: kopyalanabilir, KAYIT KODU deseniyle ayni. */
.script-kutusu {
position: relative;
margin: .5rem 0;
}
.script-alani {
display: block;
width: 100%;
padding: .75rem;
background: #f5f7fa;
border: 1px solid var(--kenar);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .85rem;
resize: vertical;
/* Dar ekranda kutu govdeyi tasirmasin: kendi icinde kaysin. */
max-width: 100%;
box-sizing: border-box;
}
.kanit-tablosu { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.kanit-tablosu th, .kanit-tablosu td {
border-bottom: 1px solid var(--kenar);
padding: .4rem .6rem;
text-align: left;
vertical-align: top;
}
.kanit-tablosu th { color: var(--soluk); font-weight: 600; font-size: .85rem; }
/* Yururlukteki deger ile ayarlanmis deger farkli: sp_configure'da
degisiklik yapilmis ama RECONFIGURE calistirilmamis demektir ve ayar
HENUZ ETKIN DEGILDIR. Vurgulanmazsa ekran "degistirdim" diyeni
yaniltir. */
.uyari-hucre { background: #fff8e1; }
/* ==== C.4 KART LISTELERI ============================================== */
/* Kutuphane karti (.ok-kart) cizer; TIKLANABILIRLIK tuketicinin karari
cunku hedef ekrana gore degisiyor.
Desen: kartta TEK bir gercek var, ::after ile kartin tamamini
kapliyor. Boylece satirin her yeri tiklanabilir ama erisilebilirlik
agacinda TEK baglanti duruyor — kartin icine ayri ayri 'lar koymak
ekran okuyucuda ayni satiri defalarca okuturdu.
Kart oldugu icin konumlandirma cengeli buradan veriliyor;
kutuphanenin API'sine dokunulmuyor. */
.ok-kart:has(.kart-link) { position: relative; }
.kart-link { text-decoration: none; color: inherit; font-weight: 600; }
.kart-link::after { content: ""; position: absolute; inset: 0; }
/* Klavye odagi KARTIN tamamini isaretlesin: gorunmez bir ::after'a
odaklanildiginda halka ekranda hicbir yerde gorunmezdi. */
.ok-kart:has(.kart-link:focus-visible) {
outline: 2px solid var(--vurgu);
outline-offset: 2px;
}
.ok-kart:has(.kart-link:hover) { background: #f7f9fb; }
/* Chevron: satirin devami oldugunu soyluyor. aria-hidden — anlami
baglantinin metninde. */
.kart-chevron {
position: absolute;
right: .75rem;
top: 50%;
transform: translateY(-50%);
color: var(--soluk);
line-height: 0;
}
/* Kart govdesindeki alan/deger satirlari. */
.kart-alanlar { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; }
.kart-alanlar dt { color: var(--soluk); font-size: .85rem; }
.kart-alanlar dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
/* Satir ici IKON eylemi: metin dugmesi kolonu sisiriyordu. Erisilebilir
ad dugmenin aria-label'inda; burada yalnizca gorunum var. */
.ikon-buton {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .25rem;
border: 1px solid transparent;
border-radius: 4px;
background: none;
color: var(--vurgu);
cursor: pointer;
line-height: 0;
}
.ikon-buton:hover { border-color: var(--kenar); background: #f2f6fb; }
/* Klavye odagi GORUNUR kalmali: ikon dugmede metin yok, odak halkasi
kaybolursa klavyeyle gezen kullanici nerede oldugunu bilemez. */
.ikon-buton:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
/* --- Kiraci goruntuleme bandi ---------------------------------------- */
/* Sayfanin en ustunde, tam genislikte ve DIKKAT CEKICI. Yumusak bir not
olsaydi uc musteri arasinda gezerken gozden kacar ve yanlis kiracida
islem yapilirdi. */
.goruntuleme-bandi {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .6rem 1rem;
background: var(--uyari-zemin);
border-bottom: 3px solid var(--uyari-kenar);
font-size: .9rem;
}
.goruntuleme-bandi form { margin: 0; }
/* Govde padding'i ASILMIYOR: kenardan kenara bir bant icin body'nin
padding'ini sifirlamak gerekirdi ve o, her sayfanin duzenini
degistirirdi. Gorunurluk zaten renk, kalinlik ve konumdan geliyor. */
.goruntuleme-bandi { margin-bottom: 1rem; border-radius: 4px; }
/* --- C.3 zaman serisi grafikleri ------------------------------------- */
/* Grafikler UST USTE bitisikti: Ortak.Blazor.Charts kartin kendisini
(kenarlik, ic bosluk) veriyor ama DISINDAKI bosluga hic dokunmuyor —
bilerek, cunku aralik sayfanin ritmine ait bir karar.
Aralik grid GAP'i: margin olsaydi kartlar arasinda daralma
(margin collapsing) yasanir ve ilk/son kartin disina da sizardi.
Gap yalnizca KARTLAR ARASINA dusuyor.
Tek sutun oldugu icin mobilde ayri bir kural GEREKMIYOR: dikey aralik
ayni gap'ten geliyor, medya sorgusuyla tekrar tanimlanan bir deger yok
ve boylece dar ekranda sessizce sifira dusemez. */
.grafik-listesi {
display: grid;
gap: var(--bolum-araligi);
margin: var(--bolum-araligi) 0;
}
.aralik-secimi {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: 1rem 0;
}
@media (max-width: 640px) {
/* Grafikler kendi genisliklerini %100 aliyor; tablolar tasabiliyor. */
.liste { display: block; overflow-x: auto; }
}
/* Kapsam disi birakma: sebep alani satir icinde aciliyor. */
.haric-tut { margin-top: .4rem; }
.haric-tut label { display: block; font-size: .85rem; }
.haric-tut input {
display: block;
margin: .2rem 0 .4rem;
min-width: 16rem;
padding: .3rem;
}
/* --- Davet kutusu ----------------------------------------------------- */
.davet-kutusu { margin: 1rem 0 1.5rem; }
.davet-kutusu select,
.davet-kutusu input {
display: block;
margin-top: .25rem;
padding: .4rem;
min-width: 14rem;
}
/* Link TEK SATIR ve secilebilir: kopyalanmasi gereken tek sey bu. */
input.davet-link {
width: 100%;
margin: .5rem 0;
padding: .5rem;
font-family: ui-monospace, monospace;
font-size: .85rem;
background: #fff;
}
/* DEVRE DISI DUGME ETKIN GORUNMEMELI.
Projede hicbir :disabled kurali yoktu: silme penceresindeki dugme,
ad yazilmadan basilamadigi halde tamamen etkin duruyordu. Kullanici
basiyor, hicbir sey olmuyor ve SEBEBI de gorunmuyor — sessiz
basarisizligin kucuk hali.
Yalnizca `opacity` degil `cursor` da: imlecin degismemesi, dugmenin
calistigi izlenimini surduruyordu. */
.buton:disabled,
button:disabled {
opacity: .45;
cursor: not-allowed;
}
/* --- Silme onay penceresi ----------------------------------------------
Once sayfanin DIBINDE bir paneldi: satirdaki dugmeye basiliyor, sonuc
ekranin disinda kaliyor ve asagi inmek gerekiyordu.
NATIVE |