:root { --arka: #0f1419; --kart: #171d24; --kenar: #273039; --metin: #e6edf3; --soluk: #8b98a5; --vurgu: #25d366; --vurgu-koyu: #1da851; --uyari: #f0b429; --tehlike: #e5484d; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--arka); color: var(--metin); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { margin: 0 0 10px; font-weight: 600; }
h2 { font-size: 16px; } h3 { font-size: 14px; color: var(--soluk); }
a { color: var(--vurgu); }
.kart { background: var(--kart); border: 1px solid var(--kenar); border-radius: 10px; padding: 14px; }
label { display: block; margin: 8px 0; color: var(--soluk); font-size: 13px; }
label.satir-ici { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kenar); background: #0b0f14; color: var(--metin); font-size: 14px; }
input:focus { outline: 2px solid var(--vurgu); outline-offset: 0; border-color: transparent; }
button { cursor: pointer; border-radius: 8px; padding: 8px 12px; font-size: 13px; border: 1px solid var(--kenar); background: #20282f; color: var(--metin); }
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .5; cursor: default; }
button.birincil { background: var(--vurgu); border-color: var(--vurgu-koyu); color: #04140a; font-weight: 600; }
button.tehlike { background: transparent; border-color: var(--tehlike); color: var(--tehlike); }
.ust { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--kenar); background: var(--kart); position: sticky; top: 0; z-index: 2; }
.bosluk { flex: 1; }
.yerlesim { display: grid; grid-template-columns: 300px 1fr; gap: 14px; padding: 14px; max-width: 1500px; margin: 0 auto; }
.sol { display: flex; flex-direction: column; gap: 14px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.liste li:hover, .liste li.secili { background: #20282f; }
.liste .ad { font-weight: 600; }
.liste .alt { color: var(--soluk); font-size: 12px; }
.liste .alt.uyari-metin { color: var(--uyari); }
.liste li.grup-baslik { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--soluk); background: transparent; padding: 10px 4px 4px; cursor: pointer; border-bottom: 1px solid var(--kenar); border-radius: 0; }
.liste li.grup-baslik:hover { color: var(--metin); background: transparent; }
.rozet { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #20282f; color: var(--soluk); border: 1px solid var(--kenar); white-space: nowrap; }
.rozet.iyi { color: var(--vurgu); border-color: var(--vurgu-koyu); }
.rozet.uyari { color: var(--uyari); border-color: #7a5a10; }
.rozet.kotu { color: var(--tehlike); border-color: #7a2a2c; }
.baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.baslik h2 { margin: 0; }
.detay-yerlesim { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 14px; align-items: start; }
.ekran-cerceve { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 2; display: flex; align-items: center; justify-content: center; }
.ekran-cerceve img { width: 100%; height: 100%; object-fit: contain; cursor: crosshair; user-select: none; -webkit-user-drag: none; touch-action: none; }
.tus-satiri { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.tus-satiri input { margin: 0; flex: 1; }
.tus-satiri.sarmal { flex-wrap: wrap; }
.akis { display: flex; flex-direction: column; gap: 12px; }
.olaylar { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; font-size: 12px; }
.olaylar li { padding: 3px 0; border-bottom: 1px dashed var(--kenar); color: var(--soluk); }
.olaylar li b { color: var(--metin); font-weight: 500; margin-right: 6px; }
.cikti { background: #0b0f14; border: 1px solid var(--kenar); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 10px 0 0; }
.soluk { color: var(--soluk); } .kucuk { font-size: 12px; margin: 8px 0 0; }
.hata { color: var(--tehlike); }
.uyari-kutu { background: #2a2110; border: 1px solid #7a5a10; color: #f3d9a4; border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.45; margin: 10px 0; }
.uyari-kutu b { color: var(--uyari); }
.ayrac { border: 0; border-top: 1px solid var(--kenar); margin: 12px 0; }
.eylem-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eylem-liste li { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; }
.eylem-liste button { width: 100%; }
.eylem-liste span { color: var(--soluk); font-size: 12px; line-height: 1.35; }
.eylem-liste b { color: var(--metin); font-weight: 600; }
@media (max-width: 560px) { .eylem-liste li { grid-template-columns: 1fr; gap: 2px; } }
/* Etiket gibi giriş alanı olan satırlar 190px'lik düğme sütununa sığmıyor — tüm genişliği kullansın */
.eylem-liste li.genis { grid-template-columns: 1fr; gap: 4px; }
.eylem-liste li.genis button { width: auto; white-space: nowrap; }
.eylem-liste li.genis input { flex: 1; min-width: 0; }
select { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--kenar); background: #0b0f14; color: var(--metin); font-size: 14px; }
.anahtar { display: block; word-break: break-all; padding: 8px; background: #0b0f14; border-radius: 8px; margin: 6px 0; letter-spacing: 1px; }
dialog { border: 1px solid var(--kenar); color: var(--metin); width: min(460px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog form, dialog #totpKutu { margin-bottom: 14px; }
.bildirim { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #20282f; border: 1px solid var(--kenar); padding: 10px 16px; border-radius: 10px; z-index: 5; max-width: 90vw; }
.bildirim.hata { border-color: var(--tehlike); }
body.giris { display: grid; place-items: center; min-height: 100vh; }
.giris-kartı { width: min(360px, 92vw); }
.giris-kartı button { width: 100%; margin-top: 10px; }
@media (max-width: 900px) { .yerlesim { grid-template-columns: 1fr; } .detay-yerlesim { grid-template-columns: 1fr; } }