/* ARTİEKRAN Portal 3.3 — yayın sırası tablosu (her ekran bir sütun) */

.q-tablo{display:grid;gap:7px}

/* Başlık satırı: ekran adları. Tek ekran varken hiç çizilmez. */
.q-baslik{display:grid;align-items:end;gap:10px;padding:0 10px 2px;
  font-size:12px;font-weight:700;color:#64748b}
.q-baslik em{font-style:normal;font-weight:800;font-size:10px;letter-spacing:.5px;
  padding:2px 7px;margin-right:5px;border-radius:99px;background:#0d3441;color:#fff;
  vertical-align:middle}
.q-baslik > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-baslik .q-sag{text-align:right}

/* İçerik satırı */
.q-satir{display:grid;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid #dbe8e9;border-radius:12px;background:#f8fbfb;cursor:grab}
.q-satir.dragging{opacity:.45}
.q-satir.duvar{border-color:#bcdcf0;background:#f2f9fe}

.q-no{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#64748b}
.q-no .handle{font-style:normal;font-size:18px;color:#94a3b8}

/* Bir ekranın hücresi: küçük önizleme + medya kutusu */
.q-hucre{display:flex;align-items:center;gap:8px;min-width:0}
.q-hucre img,.q-hucre video{width:44px;height:32px;flex:0 0 auto;
  object-fit:cover;border-radius:7px;background:#e8eff1}
.q-hucre .q-yok{display:block;width:44px;height:32px;flex:0 0 auto;
  border-radius:7px;background:#e8eff1}
.q-hucre select{flex:1 1 auto;min-width:0;padding:7px 8px;font-size:13px;
  border:1px solid #cddde1;border-radius:9px;background:#fff;color:#1f3d47}
/* Ekran etiketi yalnızca sütunlar alt alta indiğinde görünür. */
.q-hucre .q-etiket{display:none}

/* Duvar satırı: bütün ekranların birleştiği tek hücre */
.q-duvar{display:flex;align-items:center;gap:10px;min-width:0;
  padding:5px 10px;border:1px dashed #9fcbe8;border-radius:10px;background:#fff}
.q-duvar img,.q-duvar video{width:44px;height:32px;flex:0 0 auto;
  object-fit:cover;border-radius:7px;background:#e8eff1}
.q-duvar b{font-size:13px;color:#11507f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-duvar small{color:#5b7f96;font-size:12px}

/* Süre sütunu */
.q-sure{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:13px;font-weight:700;color:#3d5a63}
.q-sure input{width:56px;padding:7px;text-align:right;
  border:1px solid #dbe4e8;border-radius:8px}
.q-sure i{font-style:normal;font-weight:600;color:#8aa0a8}

@media(max-width:760px){
  /* Dar ekranda sütunlar alt alta iner; her hücrenin başında ekran adı olur. */
  .q-baslik{display:none}
  .q-satir{grid-template-columns:1fr !important;gap:7px}
  .q-hucre img,.q-hucre video,.q-hucre .q-yok{width:38px;height:28px}
  .q-hucre .q-etiket{display:block;flex:0 0 auto;font-style:normal;font-weight:800;
    font-size:10px;letter-spacing:.5px;padding:3px 8px;border-radius:99px;
    background:#0d3441;color:#fff}
  .q-duvar{grid-column:auto !important}
  .q-sure{justify-content:flex-start}
}