/* === Wide Screen Gri & Siyah Tema (Responsive v4.5 minimal) === */
:root{--bg:#f5f6f8;--card:#ffffff;--border:#e5e6e9;--fg:#111111;--muted:#6b6b6b;--danger:#dc2626;--radius:14px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 6px 20px rgba(0,0,0,0.07);--shadow-lg:0 14px 42px rgba(0,0,0,0.09)}
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Inter","Roboto","Segoe UI",Arial,sans-serif}
html,body{margin:0;padding:0}
body.bg{background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5}
.ustbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.logo{font-weight:700;font-size:15px;letter-spacing:.3px}
.menu{display:flex;align-items:center;gap:6px;position:relative}
.menu a{display:inline-block;margin:0 6px;padding:5px 9px;border-radius:10px;text-decoration:none;color:var(--muted);border:1px solid transparent;font-size:12px;transition:all .2s ease}
.menu a:hover{background:#f3f4f6;color:var(--fg)}
.menu a.aktif{background:#111;color:#fff;border-color:#111;box-shadow:var(--shadow-sm)}
.kullanici{display:flex;align-items:center;gap:8px}
.kullanici .ad{font-size:12px;color:var(--fg)}
.buton,.btn{display:inline-block;border:none;cursor:pointer;text-decoration:none;padding:8px 12px;border-radius:12px;font-size:13px;background:var(--fg);color:#fff;box-shadow:var(--shadow-sm);transition:all .2s ease}
.buton:hover,.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.buton.ikincil{background:#fff;color:var(--fg);border:1px solid var(--border)}
.buton.kucuk{padding:5px 9px;font-size:12px}
.buton.cikis{background:var(--danger);color:#fff;border:1px solid #ef9a9a33}
.buton.cikis:hover{background:#b91c1c}
.icerik{width:100%;max-width:none;margin:24px auto;padding:0 32px;overflow-x:hidden}
.kart{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:20px;box-shadow:var(--shadow-md)}
.kart-baslik{margin:0 0 10px;font-size:15px;font-weight:600}
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kpi{text-align:center}.kpi-baslik{color:var(--muted);font-size:12px}.kpi-deger{font-size:22px;font-weight:700;margin-top:4px}
.grid.iki{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-size:11px;color:var(--muted);margin-top:8px}
.form input,.form select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:13px}
/* tablo: css-only responsive */
.tablo{width:100%;border-collapse:collapse;min-width:640px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablo th,.tablo td{border-bottom:1px solid var(--border);padding:9px;text-align:left;font-size:13px;vertical-align:top;white-space:nowrap}
.tablo thead th{color:var(--muted);font-weight:600}
.tablo td *, .tablo th *{white-space:normal}
.altbar{text-align:center;color:var(--muted);padding:14px;font-size:12px}
.sunucu-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px}
@media (max-width:900px){ .sunucu-grid{grid-template-columns:1fr} }
.hamburger{display:none;align-items:center;justify-content:center;width:38px;height:32px;background:#fff;border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:0;box-shadow:var(--shadow-sm);line-height:1;-webkit-appearance:none;appearance:none}
.hamburger:focus{outline:none;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.hamburger .ham-ikon{display:block}
@media (max-width:900px){
  .hamburger{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);padding:8px 12px;z-index:21}
  .menu.acik{display:block}
  .menu a{display:block;margin:4px 0;padding:10px 12px;font-size:13px;border:1px solid transparent;border-radius:10px}
  .menu a.aktif{background:#111;color:#fff;border-color:#111}
  .ustbar{position:sticky;z-index:22}
  .kullanici{gap:8px}
  .icerik{padding:0 16px}
  .grid.iki{grid-template-columns:1fr}
  .tablo{min-width:560px}
}
@media (max-width:480px){
  .kart{padding:16px}
  .tablo{min-width:520px}
}