:root { --iyi:#16a34a; --kotu:#dc2626; --cizgi:#e5e7eb; --zemin:#f8fafc; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
       background:var(--zemin); color:#0f172a; }
header { display:flex; align-items:center; gap:16px; padding:16px 24px;
         background:#fff; border-bottom:1px solid var(--cizgi); }
header h1 { font-size:18px; margin:0; flex:1; }
main { padding:24px; max-width:1200px; margin:0 auto; }
h2 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }

.kutular { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.kutu { background:#fff; border:1px solid var(--cizgi); border-radius:10px;
        padding:12px 20px; min-width:120px; }
.kutu span { display:block; font-size:12px; color:#64748b; }
.kutu strong { font-size:22px; }
.kutu.kotu { border-color:var(--kotu); color:var(--kotu); }

.kartlar { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
           gap:12px; margin-bottom:24px; }
.kart { background:#fff; border:1px solid var(--cizgi); border-left-width:4px;
        border-radius:10px; padding:14px; }
.kart.iyi { border-left-color:var(--iyi); }
.kart.kotu { border-left-color:var(--kotu); background:#fef2f2; }
.kart h3 { margin:0 0 4px; font-size:15px; }
.kart p { margin:0 0 10px; font-size:13px; color:#64748b; }
.butonlar { display:flex; gap:6px; flex-wrap:wrap; }
button { border:1px solid var(--cizgi); background:#fff; border-radius:7px;
         padding:6px 10px; font-size:13px; cursor:pointer; }
button:hover { background:#f1f5f9; }

.olay { display:grid; grid-template-columns:180px 1fr 90px; gap:12px;
        padding:8px 12px; background:#fff; border-bottom:1px solid var(--cizgi);
        font-size:13px; }
.olay.acik { border-left:3px solid var(--kotu); }
.olay.kapali { color:#64748b; }

.giris-kutu { max-width:320px; margin:15vh auto; background:#fff; padding:28px;
              border:1px solid var(--cizgi); border-radius:12px; }
.giris-kutu input { width:100%; padding:10px; margin-bottom:10px;
                    border:1px solid var(--cizgi); border-radius:7px; font-size:15px; }
.giris-kutu button { width:100%; padding:11px; background:#0f172a; color:#fff; border:0; }
.hata { color:var(--kotu); font-size:13px; min-height:18px; }

dialog { border:0; border-radius:12px; max-width:90vw; width:900px; padding:20px; }
dialog pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:8px;
             max-height:60vh; overflow:auto; font-size:12px; }
#ayar-pencere { width:460px; }
#ayar-pencere h4 { margin:18px 0 8px; font-size:13px; text-transform:uppercase;
                   letter-spacing:.05em; color:#64748b; }
#ayar-pencere label { display:block; margin-bottom:8px; font-size:13px; }
#ayar-pencere input { width:100%; padding:8px; margin-top:3px;
                      border:1px solid var(--cizgi); border-radius:7px; font-size:14px; }
.ipucu { font-size:12px; color:#64748b; }
/* .ipucu sonradan geldigi icin renk cakismasin diye iki sinifli secici */
.ipucu.hata { color:var(--kotu); }
.ayirac { border:0; border-top:1px solid var(--cizgi); margin:22px 0 4px; }
#ayar-pencere .butonlar { margin-top:10px; }

@media (max-width:600px) {
  main { padding:14px; }
  .olay { grid-template-columns:1fr; gap:2px; }
}