*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f6f7fb;color:#222}
.container{max-width:1400px;margin:0 auto;padding:12px}
.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1f2937;color:#fff}
.header .title{font-weight:600}
.button{padding:8px 12px;border:none;border-radius:8px;background:#2563eb;color:#fff;cursor:pointer}
.button.secondary{background:#6b7280}
.button.danger{background:#dc2626}
.split{display:flex;gap:12px;align-items:flex-start}
.col{flex:1;min-width:0}
.col .col-title{font-weight:700;margin:6px 0 6px 2px;color:#374151}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:10px}
/* Eski cihazlarda auto-fill/minmax sorun çıkarabiliyor. Daha sağlam: sabit kolon sayıları. */
.small-grid{grid-template-columns:repeat(12,1fr);gap:8px}
.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;border:2px solid #fff;transition:transform .1s ease}
.card.small{padding:8px;min-height:80px;height:80px;position:relative;overflow:hidden}
.card:hover{transform:translateY(-2px)}
.card .name{font-weight:600;margin-bottom:6px;font-size:14px;line-height:1.2;width:100%;text-align:center;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .status{font-size:11px;color:#555}
.card.idle{background:#ffffff;border-color:#e5e7eb}
.card.alert{background:#fee2e2;border-color:#ef4444;animation:pulseBorder 1.1s ease-in-out infinite}
/* Küçük köşe rozetleri (timer vb.) */
.badge{position:absolute;top:6px;right:6px;background:#111827;color:#fff;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px}
.badge.alert{background:#b91c1c}
.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:14px 16px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.2);display:none}
.toast.show{display:block}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center}
.modal-backdrop.show{display:flex}
.modal{background:#fff;border-radius:12px;max-width:420px;width:92%;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);border:3px solid transparent}
.modal .modal-header{font-weight:700;margin-bottom:10px}
.modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.modal .note{font-size:12px;color:#6b7280}
.form{max-width:380px;margin:40px auto;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.form h1{margin:0 0 16px 0;font-size:22px}
.input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;margin-bottom:12px}
.note{font-size:13px;color:#6b7280}
.alert-text{color:#b91c1c;font-weight:600}
.link{color:#2563eb;text-decoration:none}
footer{padding:16px;text-align:center;color:#6b7280}

/* 10 inç tablet ve küçük ekranlar için optimized responsive */
@media (max-width:1400px){.small-grid{grid-template-columns:repeat(10,1fr)}}
@media (max-width:1280px){.small-grid{grid-template-columns:repeat(9,1fr)}}
@media (max-width:1200px){.small-grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:1024px){
  .container{padding:12px}
  .small-grid{grid-template-columns:repeat(7,1fr);gap:10px}
  .card.small{min-height:85px;height:85px;padding:10px}
  .card .name{font-size:13px}
}
@media (max-width:900px){
  .split{flex-direction:column;gap:16px}
  .small-grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:800px){
  .small-grid{grid-template-columns:repeat(5,1fr)}
  .container{padding:10px}
}
@media (max-width:640px){
  .small-grid{grid-template-columns:repeat(4,1fr)}
  .card.small{min-height:75px;height:75px}
}
@media (max-width:480px){
  .small-grid{grid-template-columns:repeat(3,1fr)}
  .card .name{font-size:12px}
}
@media (max-width:360px){
  .small-grid{grid-template-columns:repeat(2,1fr)}
  .card.small{min-height:70px;height:70px}
}

/* CSS Grid desteklemeyen tarayıcılar için flex fallback */
@supports not (display: grid){
  .grid,.small-grid{display:flex;flex-wrap:wrap;gap:8px}
  .grid>.card,.small-grid>.card{flex:0 0 calc(100%/6 - 8px)}
  @media (max-width:1400px){.small-grid>.card{flex-basis:calc(100%/10 - 8px)}}
  @media (max-width:1280px){.small-grid>.card{flex-basis:calc(100%/9 - 8px)}}
  @media (max-width:1200px){.small-grid>.card{flex-basis:calc(100%/8 - 8px)}}
  @media (max-width:1024px){.small-grid>.card{flex-basis:calc(100%/7 - 8px)}}
  @media (max-width:900px){.small-grid>.card{flex-basis:calc(100%/6 - 8px)}}
  @media (max-width:800px){.small-grid>.card{flex-basis:calc(100%/5 - 8px)}}
  @media (max-width:640px){.small-grid>.card{flex-basis:calc(100%/4 - 8px)}}
  @media (max-width:480px){.small-grid>.card{flex-basis:calc(100%/3 - 8px)}}
  @media (max-width:360px){.small-grid>.card{flex-basis:calc(100%/2 - 8px)}}
}

/* Dikkat çeken yanıp sönme ve puls efektleri */
@keyframes pulseBorder{0%{box-shadow:0 0 0 rgba(239,68,68,0.0)}50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}100%{box-shadow:0 0 0 rgba(239,68,68,0.0)}}
@keyframes flashOutline{0%,100%{border-color:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7)}50%{border-color:#ffffff;box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.modal.flash{animation:flashOutline .9s ease-in-out infinite}