/* =====================================================================
   ŞYS — ORTAK GÖRÜNÜM (tüm ekranlar buradan beslenir) · Sürüm 1
   Renk/buton/tablo/kart/modal + MOBİL UYUM tek yerde.
   ===================================================================== */
:root{
  --bg:#f4f6f9; --card:#fff; --border:#e3e8ef; --text:#1f2733; --text2:#5b6878; --text3:#8a97a8;
  --accent:#2563eb; --accent-bg:#eef4ff; --green:#16a34a; --green-bg:#ecfdf5;
  --red:#dc2626; --red-bg:#fef2f2; --amber:#d97706; --amber-bg:#fff7ed;
  --panel:#0f172a; --panel2:#1e293b; --shadow:0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;}

/* --- Genel yardımcılar --- */
.wrap{max-width:1280px;margin:0 auto;padding:20px;}
.spacer{flex:1;}
.sub{color:var(--text3);}

/* --- Üst bar --- */
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.title{font-size:20px;font-weight:800;}
.canli{display:inline-flex;align-items:center;gap:6px;background:var(--green-bg);color:var(--green);
  font-weight:700;font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid #bbf7d0;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* --- Rol rozeti --- */
.rolpill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;}
.rolpill.yonetim{background:var(--amber-bg);color:var(--amber);}
.rolpill.destek1{background:var(--accent-bg);color:var(--accent);}
.rolpill.destek2{background:#f3e8ff;color:#7e22ce;}
.rolpill.arsiv{background:var(--green-bg);color:var(--green);}

/* --- Seçim kutuları --- */
.selbox{display:flex;flex-direction:column;gap:3px;}
.selbox small{font-size:10px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding-left:2px;}
select,input[type=month],input[type=date]{font-size:13px;padding:8px 12px;border:1px solid var(--border);
  border-radius:10px;background:#fff;font-weight:600;}
select:disabled{background:#f1f5f9;color:var(--text2);cursor:not-allowed;}

/* --- Butonlar --- */
.btn{font-size:13px;font-weight:700;padding:9px 14px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:var(--text);cursor:pointer;}
.btn:hover{background:#f8fafc;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;} .btn-primary:hover{background:#1d4fd8;}
.btn-green{background:var(--green);border-color:var(--green);color:#fff;}
.btn-red{background:var(--red);border-color:var(--red);color:#fff;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

/* --- Tablo kartı --- */
.tablecard{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.tablecard .head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tablecard .head .t{font-weight:700;font-size:15px;} .tablecard .head .c{font-size:12px;color:var(--text3);}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;}
th,td{padding:8px 11px;text-align:right;white-space:nowrap;}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.2px;color:var(--text3);font-weight:700;background:#fafbfc;border-bottom:2px solid var(--border);}
th.l,td.l{text-align:left;}
td{font-size:12.5px;font-family:"SF Mono",ui-monospace,Menlo,monospace;border-bottom:1px solid #f0f2f5;}
td.l{font-family:inherit;}
tfoot td{font-weight:800;background:#f1f5f9;border-top:2px solid var(--border);border-bottom:none;}
tbody tr:hover{background:#fafcff;}
.empty{padding:50px;text-align:center;color:var(--text3);}

/* --- Durum / rozet --- */
.durum{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:9px;}
.d-taslak{background:#f1f5f9;color:var(--text2);} .d-bekliyor{background:var(--amber-bg);color:var(--amber);}
.d-onay{background:var(--green-bg);color:var(--green);} .d-duzeltme{background:var(--red-bg);color:var(--red);}
.badge{display:inline-block;background:var(--green-bg);color:var(--green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid #bbf7d0;}
.badge.soon{background:var(--amber-bg);color:var(--amber);border-color:#fde7c8;}

/* --- Satır içi işlem butonları --- */
.iact{border:none;background:none;cursor:pointer;font-size:14px;padding:2px 5px;border-radius:6px;}
.iact:hover{background:#f1f5f9;}

/* --- Modal --- */
.ovl{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:200;}
.ovl.acik{display:flex;}
.modal{background:#fff;border-radius:18px;max-width:560px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden;}
.modal.gen{max-width:430px;}
.mhead{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;}
.mbody{padding:18px 20px;max-height:64vh;overflow:auto;}
.mfoot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.x{margin-left:auto;cursor:pointer;color:var(--text3);font-size:20px;border:none;background:none;}

/* --- Form alanları --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fld{margin-bottom:4px;} .fld.full{grid-column:1/-1;}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;}
.fld input,.fld select{width:100%;font-size:14px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font-family:inherit;background:#fff;}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.fld input[readonly]{background:#f1f5f9;font-weight:700;}
.fld input.hatali{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg);}
.grupbas{grid-column:1/-1;font-size:11px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-top:6px;}
.otomatik{color:var(--green);font-size:11px;font-weight:700;}
.manuel{color:var(--text3);font-size:11px;font-weight:700;}

/* --- Uyarı şeridi (validasyon) --- */
.uyari{display:none;background:var(--red-bg);color:var(--red);border:1px solid #fecaca;border-radius:9px;
  padding:9px 12px;font-size:13px;font-weight:600;margin-bottom:12px;}
.uyari.goster{display:block;}

.footer{margin-top:14px;text-align:center;color:var(--text3);font-size:12px;}

/* =====================================================================
   MOBİL UYUM (madde 3) — telefon ve tablette rahat kullanım
   ===================================================================== */
@media (max-width:640px){
  .wrap{padding:12px;}
  .title{font-size:17px;}
  .topbar{gap:8px;}
  .topbar .btn,.topbar .selbox{flex:1 1 46%;} /* butonlar/seçimler iki sütun */
  .selbox select,.selbox input{width:100%;}
  .modal,.modal.gen{max-width:100%;border-radius:14px;}
  .mbody{max-height:70vh;}
  .grid2{grid-template-columns:1fr;}      /* form alanları tek sütun */
  .mfoot{justify-content:stretch;}
  .mfoot .btn{flex:1;text-align:center;}
  th,td{padding:7px 9px;}
  .cards{grid-template-columns:1fr !important;}
}