/* ============================================================
KARALİSTE KOMUTA PANELİ — operasyon merkezi karanlık konsolu
Elle yazılmış tek dosya; framework yok.
============================================================ */
/* ---------- fontlar (yerel woff2 — dış ağ bağımlılığı yok) ---------- */
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/admin/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- tema değişkenleri ---------- */
:root {
--zemin: #101418;
--panel: #171c22;
--panel-koyu: #12161b;
--cizgi: #232b33;
--metin: #e6eaf0;
--soluk: #8b98a9;
--vurgu: #f5a524;
--vurgu-koyu: #7a5210;
--kirmizi: #e5484d;
--yesil: #46a758;
--gri: #6c7a8a;
--ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
--mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
--yaricap: 6px;
}
/* Açık tema — aynı token seti, ters palet. Seçim localStorage'da tutulur ve
sayfa boyanmadan önce içindeki küçük script data-tema'yı basar
(bkz. base.html) — aksi hâlde her gezinmede koyu tema bir an parlar. */
:root[data-tema="acik"] {
--zemin: #eef1f4;
--panel: #ffffff;
--panel-koyu: #e7ebf0;
--cizgi: #d3dae1;
--metin: #1f2933;
--soluk: #5b6770;
/* Beyaz zeminde #f5a524 metin olarak okunmaz (1,9:1) — vurgu koyulaşır,
amber zeminli öğeler (birincil buton) aşağıda ayrıca sabitlenir. */
--vurgu: #b45309;
--vurgu-koyu: #e0a33c;
--kirmizi: #c62828;
--yesil: #2e7d32;
--gri: #6c7a8a;
}
/* Birincil buton her iki temada da amber kalır: koyu --vurgu ile boyansa
üzerindeki #14100a metin okunmaz olurdu. */
:root[data-tema="acik"] .btn-birincil {
background: #f5a524;
border-color: #f5a524;
}
/* ---------- tema düğmesi ---------- */
.tema-dugmesi {
background: transparent;
color: var(--soluk);
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
padding: 5px 10px;
font-family: var(--ui);
font-size: 0.74rem;
cursor: pointer;
}
.tema-dugmesi:hover { border-color: var(--vurgu); color: var(--vurgu); }
.tema-dugmesi::after { content: "☀ Açık Tema"; }
:root[data-tema="acik"] .tema-dugmesi::after { content: "● Koyu Tema"; }
/* Login sayfalarında sağ üst köşeye sabitlenir */
.tema-dugmesi-kose { position: fixed; top: 14px; right: 14px; }
/* ---------- taban ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
background: var(--zemin);
color: var(--metin);
font-family: var(--ui);
line-height: 1.5;
min-height: 100vh;
}
a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.soluk { color: var(--soluk); }
.sag { text-align: right; }
/* ---------- yerleşim ---------- */
.yerlesim { display: flex; min-height: 100vh; }
.yan-nav {
width: 232px;
flex: 0 0 232px;
background: var(--panel-koyu);
border-right: 1px solid var(--cizgi);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
}
.govde { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.icerik-alani { padding: 22px 28px 48px; max-width: 1280px; width: 100%; }
/* ---------- marka ---------- */
.marka {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 18px;
border-bottom: 1px solid var(--cizgi);
}
.marka-ad {
font-weight: 600;
letter-spacing: 0.14em;
font-size: 0.95rem;
}
.marka-alt {
color: var(--soluk);
font-size: 0.62rem;
letter-spacing: 0.3em;
}
.marka-isik {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--vurgu);
box-shadow: 0 0 8px var(--vurgu);
animation: nabiz 2.4s ease-in-out infinite;
flex: 0 0 auto;
}
.marka-isik.buyuk { width: 14px; height: 14px; }
@keyframes nabiz {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ---------- yan menü ---------- */
.nav-listesi { display: flex; flex-direction: column; padding: 14px 0; gap: 2px; flex: 1; }
.nav-listesi a {
display: block;
padding: 9px 18px 9px 15px;
text-decoration: none;
color: var(--soluk);
font-size: 0.9rem;
border-left: 3px solid transparent;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-listesi a:hover { color: var(--metin); background: rgba(245, 165, 36, 0.05); }
.nav-listesi a.aktif {
color: var(--metin);
border-left-color: var(--vurgu);
background: linear-gradient(90deg, rgba(245, 165, 36, 0.1), transparent 70%);
}
/* okunmamış blok bildirimi sayacı */
.nav-listesi a { display: flex; align-items: center; gap: 8px; }
.nav-sayac {
margin-left: auto;
background: var(--kirmizi);
color: #14100a;
font-size: 0.68rem;
font-weight: 600;
line-height: 1;
padding: 3px 6px;
border-radius: 9px;
min-width: 18px;
text-align: center;
}
.nav-alt { padding: 16px 18px; border-top: 1px solid var(--cizgi); }
.cikis-baglantisi {
color: var(--soluk);
font-size: 0.82rem;
text-decoration: none;
}
.cikis-baglantisi:hover { color: var(--kirmizi); }
/* ---------- üst şerit ---------- */
.ust-serit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 28px;
border-bottom: 1px solid var(--cizgi);
background: var(--panel-koyu);
}
.serit-kaynaklar { display: flex; flex-wrap: wrap; gap: 18px; }
.serit-kaynak { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; }
.serit-etiket { color: var(--vurgu-koyu); font-size: 0.68rem; letter-spacing: 0.28em; }
/* durum ışıkları */
.isik {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
background: var(--gri);
}
.isik-ok { background: var(--yesil); box-shadow: 0 0 6px rgba(70, 167, 88, 0.7); }
.isik-stale, .isik-error { background: var(--kirmizi); box-shadow: 0 0 6px rgba(229, 72, 77, 0.7); }
.isik-never { background: var(--gri); }
/* ---------- kartlar ---------- */
.kart {
background: var(--panel);
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
padding: 18px 20px;
margin-bottom: 18px;
animation: belir 0.45s ease-out both;
animation-delay: calc(var(--sira, 0) * 70ms);
}
@keyframes belir {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.kart { animation: none; }
.marka-isik { animation: none; }
}
.kart-baslik {
color: var(--soluk);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
}
/* Katlanır bölümler (firma detayı): summary, kart başlığının tıklanır hâli.
Ok işareti içerik gizliyken sağa, açıkken aşağı bakar. */
details.kart > summary.kart-baslik {
cursor: pointer;
list-style: none;
user-select: none;
}
details.kart > summary.kart-baslik::-webkit-details-marker { display: none; }
details.kart > summary.kart-baslik::before {
content: "▸";
display: inline-block;
margin-right: 8px;
color: var(--vurgu-koyu);
transition: transform 0.15s ease;
}
details.kart[open] > summary.kart-baslik::before { transform: rotate(90deg); }
details.kart:not([open]) > summary.kart-baslik { margin-bottom: 0; }
details.kart > summary.kart-baslik:hover { color: var(--metin); }
.sayfa-baslik { font-size: 1.25rem; font-weight: 600; margin: 4px 0 18px; letter-spacing: 0.02em; }
.sayfa-baslik-satir {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.sayfa-baslik-satir .sayfa-baslik { margin: 0; }
/* ---------- stat kartları ---------- */
.stat-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.stat-kart { margin-bottom: 0; }
.stat-etiket {
color: var(--soluk);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.stat-deger { font-size: 1.9rem; margin: 6px 0 2px; color: var(--metin); }
.stat-alt { color: var(--soluk); font-size: 0.75rem; }
/* ---------- kaynak şeridi / kartları ---------- */
.kaynak-serit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
.kaynak-hucre {
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
padding: 12px 14px;
background: var(--panel-koyu);
}
.kaynak-hucre-ust { display: flex; align-items: center; gap: 8px; }
.kaynak-kod { font-size: 0.82rem; letter-spacing: 0.06em; }
.kaynak-hucre-sayi { font-size: 1.35rem; margin: 6px 0 2px; }
.kaynak-hucre-alt { color: var(--soluk); font-size: 0.72rem; }
.kaynak-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.kaynak-kart { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.kaynak-kart-ust { display: flex; align-items: center; gap: 9px; }
.kaynak-kart-ust .rozet { margin-left: auto; }
.kaynak-kart-ad { color: var(--soluk); font-size: 0.82rem; min-height: 2.4em; }
.kaynak-kart-sayi { font-size: 1.7rem; }
.kaynak-kart-alt { color: var(--soluk); font-size: 0.74rem; display: grid; gap: 2px; margin-bottom: 6px; }
/* ---------- tablolar ---------- */
.tablo { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tablo th {
text-align: left;
color: var(--soluk);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 10px;
border-bottom: 1px solid var(--cizgi);
white-space: nowrap;
}
.tablo th.sag { text-align: right; }
.tablo td {
padding: 9px 10px;
border-bottom: 1px solid var(--cizgi);
vertical-align: middle;
/* Hücre içeriğinin BÜYÜK KISMI kullanıcıdan gelir (aranan ad, ünvan, not) ve
boşluksuz olabilir. Böyle bir metin hiçbir yerden kırılamayınca tablonun
min-content genişliği metnin tamamı kadar olur, tablo kapsayıcısını taşırır
ve TÜM sayfa yatay kayar (ölçüldü: 300 karakterlik ad → 3382 px sayfa,
562 px görünüm).
`anywhere` bilinçli, `break-word` DEĞİL: ikisi de görünümde kırar ama
yalnız `anywhere` min-content genişliğini de küçültür — tablonun
daralabilmesi tam olarak buna bağlı. */
overflow-wrap: anywhere;
}
/* Ad/ünvan sütunu iki taraftan da sınırlanır:
- max-width: tek bir uzun kayıt diğer sütunları birkaç piksele ezmesin.
- min-width: `anywhere` min-content'i TEK KARAKTERE indirdiği için tablo
bu sütunu 49 px'e kadar sıkıştırıp adı "ABA / BAB" diye alt alta
dizebiliyordu (ölçüldü). Alt sınır bunu engeller.
Normal adlar (en uzun resmî ünvanlar ~120 karakter) bu aralıkta rahat sığar. */
.tablo td.ad-hucre { min-width: 200px; max-width: 420px; }
/* Sarmalama düzeni kurtardı ama 300 karakterlik bir ad satırı 10 satıra
çıkarıyordu. 4 satırda kırpılır, tamamı title'da kalır — en uzun resmî
ünvanlar (~120 karakter) bu sınıra rahat sığdığı için gerçek veri kırpılmaz.
Kırpma | 'ye uygulanamaz (display:-webkit-box tablo hücresini bozar),
bu yüzden içeride bir var. */
.ad-metin {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
}
.tablo tbody tr { transition: background 0.12s; }
.tablo tbody tr:hover { background: rgba(245, 165, 36, 0.045); }
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo-baglanti { color: var(--metin); text-decoration: none; border-bottom: 1px dotted var(--soluk); }
.tablo-baglanti:hover { color: var(--vurgu); border-bottom-color: var(--vurgu); }
.tiklanir { cursor: pointer; }
.kisalt { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Resmî liste adları uzundur; satırın sarmasını engelleyip yer ayırırız */
.liste-adi { white-space: nowrap; }
/* Kart içi küçük açıklama notu (ör. sabit dakikalık limit bilgisi) */
.limit-notu { font-size: 0.78rem; margin-top: 12px; }
/* detay satırı (kara liste) */
.detay-satir td {
background: var(--panel-koyu);
border-left: 3px solid var(--vurgu);
padding: 14px 16px;
}
.detay-satir:hover { background: transparent !important; }
.detay-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px 22px;
font-size: 0.84rem;
/* Açılır detayda ham/normalize ad gösterilir — tablo hücreleriyle aynı
gerekçeyle kırılabilir olmalı, yoksa ızgara sütunu taşırır. */
overflow-wrap: anywhere;
}
.detay-etiket {
display: block;
color: var(--soluk);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 1px;
}
.detay-ekstra { margin-top: 14px; border-top: 1px dashed var(--cizgi); padding-top: 12px; }
.ekstra-listesi {
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 18px;
font-size: 0.8rem;
margin-top: 8px;
}
.ekstra-listesi dt { color: var(--soluk); }
.ekstra-listesi dd { margin: 0; overflow-wrap: anywhere; }
/* ---------- rozetler (dolgu değil: nokta + metin) ---------- */
.rozet {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
white-space: nowrap;
}
.rozet::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--gri);
flex: 0 0 auto;
}
.rozet-hit { color: var(--kirmizi); }
.rozet-hit::before { background: var(--kirmizi); box-shadow: 0 0 5px rgba(229, 72, 77, 0.7); }
.rozet-clear { color: var(--yesil); }
.rozet-clear::before { background: var(--yesil); }
.rozet-ok { color: var(--yesil); }
.rozet-ok::before { background: var(--yesil); }
.rozet-pasif { color: var(--soluk); }
.rozet-pasif::before { background: var(--gri); }
.rozet-bloke { color: var(--kirmizi); }
.rozet-bloke::before {
background: var(--kirmizi);
box-shadow: 0 0 5px rgba(229, 72, 77, 0.7);
animation: nabiz 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.rozet-bloke::before { animation: none; }
}
.rozet-ucretli { color: var(--vurgu); }
.rozet-ucretli::before { background: var(--vurgu); }
.rozet-tekrar { color: var(--soluk); }
.rozet-tekrar::before { background: var(--gri); }
/* kontör paketi: süresi dolmuş kalan (yanmış kontör) */
.rozet-suresi-doldu { color: var(--kirmizi); }
.rozet-suresi-doldu::before { background: var(--kirmizi); }
/* kara liste değişiklik günlüğü */
.rozet-eklendi { color: var(--yesil); }
.rozet-eklendi::before { background: var(--yesil); }
.rozet-silindi { color: var(--kirmizi); }
.rozet-silindi::before { background: var(--kirmizi); }
.rozet-guncellendi { color: var(--vurgu); }
.rozet-guncellendi::before { background: var(--vurgu); }
/* geçmişin başladığı gün — bir değişiklik değil, sınır işareti */
.rozet-baslangic { color: var(--soluk); }
.rozet-baslangic::before { background: var(--gri); }
/* değişiklik detayındaki önceki/yeni karşılaştırma tablosu */
.tablo-ic { margin: 2px 0 6px; font-size: 0.82rem; }
.tablo-ic th { font-size: 0.64rem; }
.tablo-ic td { vertical-align: top; }
.detay-etiket-hucre { color: var(--soluk); white-space: nowrap; }
/* Eski değer üstü çizili DEĞİL: kaynak metinleri uzun ve okunmaz hâle gelir;
ayrım renkle yapılır. */
.detay-eski { color: var(--soluk); }
.detay-yeni { color: var(--metin); }
/* Detayın başındaki "hangi kayıt" satırı — aynı adı taşıyan birden çok kaydı
(ör. bir kuruma kesilen ayrı ayrı cezalar) birbirinden ayırır. */
.detay-ayirtec {
color: var(--metin);
font-size: 0.82rem;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--cizgi);
white-space: pre-line;
}
.rozet-durum-success, .rozet-durum-ok { color: var(--yesil); }
.rozet-durum-success::before, .rozet-durum-ok::before { background: var(--yesil); }
.rozet-durum-failed, .rozet-durum-rejected, .rozet-durum-stale, .rozet-durum-error { color: var(--kirmizi); }
.rozet-durum-failed::before, .rozet-durum-rejected::before,
.rozet-durum-stale::before, .rozet-durum-error::before { background: var(--kirmizi); }
/* "YOK": liste katalogda tanımlı ama kaynağı henüz hiç çekilmemiş */
.rozet-durum-skipped, .rozet-durum-never, .rozet-durum-yok { color: var(--soluk); }
.rozet-durum-skipped::before, .rozet-durum-never::before,
.rozet-durum-yok::before { background: var(--gri); }
.rozet-durum-running { color: var(--vurgu); }
.rozet-durum-running::before {
background: var(--vurgu);
box-shadow: 0 0 5px rgba(245, 165, 36, 0.8);
animation: nabiz 1.2s ease-in-out infinite;
}
/* ---------- butonlar ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: transparent;
color: var(--metin);
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
padding: 7px 14px;
font-family: var(--ui);
font-size: 0.84rem;
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--vurgu); color: var(--vurgu); }
.btn-birincil {
background: var(--vurgu);
border-color: var(--vurgu);
color: #14100a;
font-weight: 600;
}
.btn-birincil:hover { background: #ffb63e; color: #14100a; }
.btn-tehlike:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.btn-onay:hover { border-color: var(--yesil); color: var(--yesil); }
.btn-kucuk { padding: 4px 10px; font-size: 0.76rem; }
.btn-genis { width: 100%; }
.btn.pasif { opacity: 0.35; pointer-events: none; }
/* ---------- formlar ---------- */
input, select {
background: var(--panel-koyu);
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
color: var(--metin);
font-family: var(--ui);
font-size: 0.86rem;
padding: 7px 10px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
border-color: var(--vurgu);
box-shadow: 0 0 0 2px rgba(245, 165, 36, 0.18);
}
input::placeholder { color: var(--soluk); opacity: 0.7; }
input[type="date"] { color-scheme: dark; }
select { cursor: pointer; }
.satir-form {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
.satir-form label { display: flex; flex-direction: column; gap: 4px; }
.satir-form label > span {
color: var(--soluk);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.satir-form label.genis { flex: 1; min-width: 220px; }
.satir-form label.genis input { width: 100%; }
.icform { display: inline-flex; gap: 6px; align-items: center; }
.islem-hucre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mini-girdi { width: 76px; padding: 4px 8px; font-size: 0.78rem; font-family: var(--mono); }
/* Onay kutusu etiketi: ".satir-form label" sütun yönü verir; kutu ile metin
yan yana kalsın diye burada yönü geri çeviriyoruz (taban çizgisine oturur). */
.satir-form .onay-alani {
flex-direction: row;
align-items: center;
gap: 6px;
padding-bottom: 8px;
}
/* ---------- yönetim ikonu (firmalar tablosu) ----------
Tabloda satır içi form YOK: tek giriş noktası bu ikon. Satırın tamamı
tıklanabilir değildir — yanlışlıkla tıklama riski olmasın. */
.yonet-baglanti {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
color: var(--soluk);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.yonet-baglanti svg { width: 17px; height: 17px; display: block; }
.yonet-baglanti:hover,
.yonet-baglanti:focus-visible {
color: var(--vurgu);
border-color: var(--vurgu);
background: rgba(245, 165, 36, 0.09);
}
.tablo tbody tr:hover .yonet-baglanti { color: var(--metin); }
.tablo tbody tr:hover .yonet-baglanti:hover { color: var(--vurgu); }
/* ekran okuyucuya görünür, göze görünmez */
.gorsel-gizli {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- flash mesajları ---------- */
.flash {
border: 1px solid var(--cizgi);
border-left-width: 3px;
border-radius: var(--yaricap);
padding: 10px 14px;
margin-bottom: 14px;
font-size: 0.86rem;
background: var(--panel);
animation: belir 0.3s ease-out both;
}
.flash-bilgi { border-left-color: var(--vurgu); }
.flash-basari { border-left-color: var(--yesil); }
.flash-hata { border-left-color: var(--kirmizi); color: #f1b2b4; }
/* okunmamış blok bildirimi bandı — tüm sayfaların en üstünde */
.uyari-bandi {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
background: linear-gradient(90deg, rgba(229, 72, 77, 0.12), transparent 60%), var(--panel);
}
/* ---------- engeller ---------- */
.bekleyen-kart { border-left: 3px solid var(--kirmizi); }
.bekleyen-listesi { display: flex; flex-direction: column; gap: 10px; }
.bekleyen-satir {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px;
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
background: var(--panel-koyu);
}
.bekleyen-govde { flex: 1; min-width: 0; }
.bekleyen-firma { font-size: 0.9rem; }
.bekleyen-alt { font-size: 0.76rem; margin-top: 2px; }
.kalan-sure { font-size: 0.74rem; margin-left: 6px; }
/* Hücrenin KENDİSİ flex OLAMAZ: display:flex verilen bir | anonim tablo
hücresine sarılır, satır yüksekliğine uzamaz ve rozet komşu hücrelerin
dikey ortasından yukarı kayar. Rozetler zaten inline-flex; satır içi
akışta yan yana dururlar. */
.durum-hucre { white-space: nowrap; }
.durum-hucre .rozet + .rozet { margin-left: 8px; }
.kontor-bitti { color: var(--kirmizi); font-weight: 600; }
.onay-kutusu {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--soluk);
font-size: 0.74rem;
white-space: nowrap;
}
.onay-kutusu input { width: 13px; height: 13px; padding: 0; accent-color: var(--vurgu); }
/* ---------- grafik ---------- */
.grafik { width: 100%; height: auto; display: block; }
.grafik-taban { stroke: var(--cizgi); stroke-width: 1; }
.grafik-cubuk { fill: var(--vurgu); opacity: 0.9; }
.grafik-cubuk:hover { opacity: 1; }
.grafik-cubuk-bos { fill: var(--cizgi); opacity: 1; }
.grafik-deger {
fill: var(--metin);
font-family: var(--mono);
font-size: 11px;
}
.grafik-etiket {
fill: var(--soluk);
font-family: var(--mono);
font-size: 10px;
}
/* ---------- boş durumlar ---------- */
.bos-durum {
text-align: center;
color: var(--soluk);
padding: 34px 16px;
font-size: 0.88rem;
}
.bos-ikon {
font-size: 1.5rem;
color: var(--vurgu-koyu);
letter-spacing: 0.2em;
margin-bottom: 8px;
}
/* ---------- sayfalama ---------- */
.sayfalama {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding-top: 16px;
}
.sayfalama-durum { color: var(--soluk); font-size: 0.78rem; }
/* ---------- özet ızgara (firma detayı) ---------- */
.ozet-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px 22px;
}
.ozet-deger { font-size: 1.05rem; margin-top: 3px; }
/* ---------- firma yönetim merkezi ---------- */
.bilgi-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 22px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px dashed var(--cizgi);
}
.bilgi-form { align-items: flex-end; }
.kucuk-not { font-size: 0.74rem; margin-top: 6px; }
.ikili-izgara {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.alt-kutu {
border: 1px solid var(--cizgi);
border-radius: var(--yaricap);
background: var(--panel-koyu);
padding: 14px 16px 16px;
}
.alt-baslik {
color: var(--soluk);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 12px;
}
.kontor-uyari { margin: 16px 0 0; }
.skt-notu { font-size: 0.7rem; margin-top: 1px; }
/* süresi dolmuş ama kalanı olan paket: soluk + kırmızı işaret */
.paket-dolmus td { opacity: 0.6; }
.artis { color: var(--yesil); }
.azalis { color: var(--kirmizi); }
/* ---------- login ---------- */
.login-zemin {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 50% -10%, rgba(245, 165, 36, 0.07), transparent 55%),
var(--zemin);
}
.login-sahne { width: min(400px, 92vw); }
.login-kart { padding: 34px 34px 30px; animation-delay: 0s; }
.login-marka { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.login-baslik {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.3;
}
.login-baslik span { color: var(--vurgu); font-size: 0.8rem; letter-spacing: 0.34em; }
.login-aciklama { color: var(--soluk); font-size: 0.8rem; margin: 10px 0 20px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 5px; }
.login-form label span {
color: var(--soluk);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.login-form input { padding: 10px 12px; }
.login-dipnot {
text-align: center;
color: var(--vurgu-koyu);
font-size: 0.68rem;
letter-spacing: 0.22em;
margin-top: 18px;
}
/* ---------- ufak ekranlar ---------- */
@media (max-width: 860px) {
.yerlesim { flex-direction: column; }
.yan-nav { width: 100%; flex: none; height: auto; position: static; }
.nav-listesi { flex-direction: row; flex-wrap: wrap; }
.nav-listesi a { border-left: none; border-bottom: 2px solid transparent; }
.nav-listesi a.aktif { border-bottom-color: var(--vurgu); }
.icerik-alani { padding: 16px; }
.islem-hucre { flex-direction: column; align-items: flex-start; }
}
|