/* Geri Bildirim ve Destek (destek talepleri) modülü */
.destek-istatistikler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.destek-kod { padding: 4px 8px; border-radius: 7px; background: #f1f2f5; color: #2b323d; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.destek-konu { white-space: normal; min-width: 220px; }
.destek-konu strong { display: block; font-size: 12px; line-height: 1.4; }
.destek-tablo td { vertical-align: middle; }
.destek-durum--open { color: #3f568c; background: #e6edff; }
.destek-durum--answered { color: #086b49; background: #dbf5ea; }
.destek-durum--waiting { color: #815600; background: #fff2cc; }
.destek-durum--closed { color: #515966; background: #e3e6ea; }
.destek-oncelik { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; }
.destek-oncelik::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.destek-oncelik--dusuk { color: #646b76; }
.destek-oncelik--orta { color: #a56b00; }
.destek-oncelik--yuksek { color: var(--kirmizi); }
.destek-satir--waiting td:first-child { box-shadow: inset 3px 0 0 #f2aa00; }
.destek-satir--open td:first-child { box-shadow: inset 3px 0 0 #3f568c; }

/* talep oluşturma paneli (<details>) */
.destek-yeni { margin-bottom: 20px; }
.destek-yeni summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 21px 23px 17px; cursor: pointer; list-style: none; }
.destek-yeni summary::-webkit-details-marker { display: none; }
.destek-yeni summary h2 { margin: 0; font-size: 17px; }
.destek-yeni summary small { display: block; margin-top: 5px; color: var(--soluk); font-size: 11px; }
.destek-yeni-ok { display: grid; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--cizgi); border-radius: 50%; color: var(--kirmizi); font-size: 14px; place-items: center; transition: transform .2s ease; }
.destek-yeni[open] .destek-yeni-ok { transform: rotate(180deg); }
.destek-formu { padding-top: 6px; }
.destek-formu select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; font-weight: 500; }
.destek-formu select:focus { border-color: var(--kirmizi); outline: 3px solid rgba(201, 15, 29, .08); }

/* detay */
.destek-detay-baslik { align-items: center; }
.destek-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.destek-rozetler .durum { padding: 8px 13px; }
.destek-detay-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.destek-akis { display: grid; gap: 14px; margin-bottom: 20px; padding: 22px 23px; }
.destek-balon { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; max-width: 86%; }
.destek-balon.benim { grid-template-columns: minmax(0, 1fr) 38px; justify-self: end; }
.destek-balon.benim .avatar { order: 2; }
.destek-balon--yonetim .avatar { background: var(--lacivert); }
.destek-balon-icerik { min-width: 0; padding: 12px 15px; border: 1px solid var(--cizgi); border-radius: 14px 14px 14px 4px; background: #fafbfc; }
.destek-balon--yonetim .destek-balon-icerik { border-color: #d6def2; background: #f3f6fd; }
.destek-balon.benim .destek-balon-icerik { border-radius: 14px 14px 4px 14px; }
.destek-balon--sahip.benim .destek-balon-icerik { border-color: #f4c2c6; background: #fff5f5; }
.destek-balon--icnot .destek-balon-icerik { border-style: dashed; border-color: #e3c86a; background: #fffae6; }
.destek-balon-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 6px; }
.destek-balon-ust strong { font-size: 12px; }
.destek-balon-ust .rol { padding: 2px 7px; border-radius: 99px; background: #eceef1; color: #515966; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.destek-balon--yonetim .destek-balon-ust .rol { background: #dfe6f7; color: #3f568c; }
.destek-icnot-etiket { padding: 2px 7px; border-radius: 99px; background: #f7e7a6; color: #6b4d00; font-size: 9px; font-weight: 800; }
.destek-balon-ust small { margin-left: auto; color: var(--soluk); font-size: 10px; white-space: nowrap; }
.destek-balon p { margin: 0; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.destek-ekler { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.destek-ekler a { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px 6px 6px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--metin); font-size: 11px; font-weight: 700; }
.destek-ekler a:hover { border-color: var(--kirmizi); color: var(--kirmizi); }
.destek-ekler .liste-ikon { width: 26px; height: 26px; font-size: 12px; }
.destek-ek-ad { overflow: hidden; max-width: 220px; text-overflow: ellipsis; white-space: nowrap; }
.destek-ekler small { color: var(--soluk); font-size: 10px; font-weight: 600; }
.destek-yanit .teslim-formu { padding-top: 4px; }
.destek-yanit-formu textarea { min-height: 110px; }
.destek-onay { display: flex !important; align-items: center; gap: 9px; padding: 11px 13px; border: 1px dashed #e3c86a; border-radius: 10px; background: #fffae6; color: #6b4d00 !important; }
.destek-onay input { width: 17px; height: 17px; accent-color: var(--kirmizi); }
.destek-yan { display: grid; gap: 20px; }
.destek-bilgi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 0 23px 22px; font-size: 12px; }
.destek-bilgi dt { color: var(--soluk); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.destek-bilgi dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.destek-bilgi dd small { display: block; margin-top: 2px; color: var(--soluk); font-size: 10px; font-weight: 500; }
.destek-islemler { display: grid; gap: 10px; padding: 0 23px 22px; }
.destek-islemler form { display: flex; }
.destek-islemler form .buton { flex: 1; justify-content: center; }
.destek-oncelik-formu { flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid #eef0f3; }
.destek-oncelik-formu label { display: grid; flex: 1; gap: 6px; color: var(--metin); font-size: 11px; font-weight: 750; }
.destek-oncelik-formu select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.destek-oncelik-formu .buton { flex: 0 0 auto; }
.destek-islem-notu { margin: 0; color: var(--soluk); font-size: 11px; line-height: 1.5; }

/* yönetim filtreleri */
.destek-filtreler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin: 0 23px 18px; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fafbfc; }
.destek-filtreler label { display: grid; gap: 6px; color: var(--metin); font-size: 11px; font-weight: 750; }
.destek-filtreler select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.destek-filtreler .buton { min-height: 40px; }

@media (max-width: 980px) {
  .destek-detay-grid { grid-template-columns: 1fr; }
  .destek-balon { max-width: 100%; }
  .destek-filtreler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destek-filtreler .buton { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .destek-istatistikler { grid-template-columns: 1fr; }
  .destek-detay-baslik { align-items: flex-start; flex-direction: column; gap: 12px; }
  .destek-filtreler { grid-template-columns: 1fr; }
}

/* öncelik: acil */
.destek-oncelik--acil { color: #7a0b14; }
.destek-oncelik--acil::before { box-shadow: 0 0 0 3px rgba(201, 15, 29, .18); }

/* SLA (ilk yanıt süresi) */
.destek-sla--gecikmis { color: #8d1018; background: #fdebed; }
.destek-sla-kalan { color: var(--soluk); font-size: 10px; font-weight: 700; white-space: nowrap; }
.destek-sla-tamam { color: #086b49; font-weight: 800; }
.destek-satir--gecikmis td:first-child { box-shadow: inset 3px 0 0 var(--kirmizi); }
.destek-sla-uyari { font-weight: 700; }
.destek-yonetim-istatistikler { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.destek-istatistik--gecikmis { border-color: #f4c2c6; }
.destek-istatistik--gecikmis strong, .destek-istatistik--gecikmis .ikon { color: var(--kirmizi); }

/* sekmeler (öğretmen: taleplerim / bana atanan) */
.destek-sekmeler { margin-bottom: 18px; }

/* atama formu */
.destek-atama-formu { border-top: 0; padding-top: 0; }

/* hazır yanıt şablonları */
.destek-sablonlar { margin-bottom: 20px; }
.destek-sablonlar summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 21px 23px 17px; cursor: pointer; list-style: none; }
.destek-sablonlar summary::-webkit-details-marker { display: none; }
.destek-sablonlar summary h2 { margin: 0; font-size: 17px; }
.destek-sablonlar summary small { display: block; margin-top: 5px; color: var(--soluk); font-size: 11px; }
.destek-sablonlar[open] .destek-yeni-ok { transform: rotate(180deg); }
.destek-sablon-formu { padding-top: 4px; }
.destek-sablon-formu select, .destek-sablon-formu textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.destek-sablon-formu select { min-height: 42px; padding: 0 11px; }
.destek-sablon-formu .odev-form-islemleri { display: flex; gap: 10px; }
.destek-sablon-listesi { max-height: 360px; }
.destek-sablon-listesi strong .durum { margin-left: 6px; padding: 2px 7px; font-size: 9px; vertical-align: middle; }
.destek-sablon-listesi small { white-space: normal; line-height: 1.5; }
.destek-sablon-secici { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px 14px; border: 1px dashed #d6def2; border-radius: 10px; background: #f6f8fd; }
.destek-sablon-secici > label { display: grid; gap: 6px; color: var(--metin); font-size: 11px; font-weight: 750; }
.destek-sablon-secici select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }
.destek-sablon-metinleri summary { color: var(--soluk); font-size: 11px; font-weight: 700; cursor: pointer; }
.destek-sablon-metinleri article { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; }
.destek-sablon-metinleri strong { display: block; font-size: 11px; }
.destek-sablon-metinleri pre { margin: 4px 0 0; font: inherit; font-size: 12px; line-height: 1.55; white-space: pre-wrap; user-select: all; }

/* memnuniyet puanı */
.destek-puan { margin-top: 20px; }
.destek-puan-formu { padding-top: 4px; }
.destek-yildizlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.destek-yildiz { display: grid !important; gap: 4px; padding: 10px 8px; border: 1px solid var(--cizgi); border-radius: 10px; text-align: center; cursor: pointer; }
.destek-yildiz input { position: absolute; opacity: 0; pointer-events: none; }
.destek-yildiz span { color: #d3a100; font-size: 15px; letter-spacing: .04em; }
.destek-yildiz small { color: var(--soluk); font-size: 10px; font-weight: 600; }
.destek-yildiz:has(input:checked) { border-color: var(--kirmizi); background: #fff5f5; }
.destek-yildiz-metni { color: #d3a100; letter-spacing: .04em; }
.destek-puan-sonuc { margin: 0; padding: 0 23px 22px; font-size: 13px; font-weight: 700; }

/* yönetim arama */
.destek-filtreler { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(200px, 1.4fr) auto; }
.destek-filtreler input[type="search"] { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--cizgi); border-radius: 9px; color: var(--metin); background: #fff; font: inherit; }

@media (max-width: 1240px) {
  .destek-yonetim-istatistikler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .destek-filtreler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destek-filtreler .destek-arama { grid-column: 1 / -1; }
  .destek-yildizlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .destek-yonetim-istatistikler { grid-template-columns: 1fr; }
  .destek-filtreler { grid-template-columns: 1fr; }
}