.feedback-support-modal {
    --feedback-primary: #146ef5;
    --feedback-primary-dark: #0b56c9;
    --feedback-ink: #16233b;
    --feedback-muted: #6f7c91;
    --feedback-border: #e4e9f1;
    --feedback-surface: #f7f9fc;
}

.feedback-support-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-width: 760px;
}

.feedback-support-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(20, 35, 60, .24);
}

.feedback-support-header {
    align-items: flex-start;
    padding: 1.4rem 1.6rem 1.2rem;
    border-bottom: 1px solid var(--feedback-border);
    background: linear-gradient(135deg, #fff 0%, #f6f9ff 100%);
}

.feedback-support-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.feedback-support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--feedback-primary);
    background: #eaf2ff;
    font-size: 1.05rem;
}

.feedback-support-heading h2 {
    margin: 0;
    color: var(--feedback-ink);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
}

.feedback-support-heading p {
    margin: .2rem 0 0;
    color: var(--feedback-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.feedback-support-close {
    margin: .15rem 0 0 auto !important;
    padding: .55rem !important;
    border-radius: 9px;
    font-size: .72rem;
}

/* Body ve footer <form> içinde sarmalandığı için, modal-dialog-scrollable'ın
   ihtiyaç duyduğu flex zinciri kırılıyor: form'u da dikey flex yapıp yüksekliği
   devralmasını sağlıyoruz; böylece body kayar, footer sabit kalır (kırpılmaz). */
.feedback-support-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.feedback-support-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding: 1.35rem 1.6rem;
    overflow-y: auto;
    background: #fff;
}

.feedback-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.feedback-support-grid-topic {
    grid-template-columns: minmax(210px, .9fr) minmax(280px, 1.35fr);
}

.feedback-support-field {
    min-width: 0;
}

.feedback-support-field label,
.feedback-support-label-row label {
    display: block;
    margin: 0 0 .42rem;
    color: #35425a;
    font-size: .78rem;
    font-weight: 650;
}

.feedback-support-field label span,
.feedback-support-label-row label span {
    color: #df3e4e;
}

.feedback-support-field .form-control,
.feedback-support-field .form-select,
.feedback-support-message-field .form-control {
    min-height: 46px;
    border: 1px solid var(--feedback-border);
    border-radius: 10px;
    color: var(--feedback-ink);
    background-color: #fbfcfe;
    font-size: .86rem;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.feedback-support-field .form-control:focus,
.feedback-support-field .form-select:focus,
.feedback-support-message-field .form-control:focus {
    border-color: #75a9fa;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(20, 110, 245, .11);
}

.feedback-support-field-help {
    margin-top: .35rem;
    color: var(--feedback-muted);
    font-size: .72rem;
    line-height: 1.4;
}

.feedback-support-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.feedback-support-label-row > span {
    color: #94a0b3;
    font-size: .72rem;
}

.feedback-support-label-row > span strong {
    color: #68768d;
    font-weight: 600;
}

.feedback-support-message-field textarea.form-control {
    min-height: 142px;
    resize: vertical;
    line-height: 1.6;
}

.feedback-support-locked-category,
.feedback-support-context {
    border: 1px solid #dbe8fb;
    border-radius: 12px;
    background: #f5f9ff;
}

.feedback-support-locked-category {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
}

.feedback-support-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--feedback-primary);
    background: #e5efff;
}

.feedback-support-locked-category > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feedback-support-locked-category > div span,
.feedback-support-context-row span,
.feedback-support-last-message span {
    color: var(--feedback-muted);
    font-size: .69rem;
}

.feedback-support-locked-category > div strong {
    color: var(--feedback-ink);
    font-size: .84rem;
}

.feedback-support-auto-badge {
    margin-left: auto;
    padding: .28rem .55rem;
    border-radius: 999px;
    color: #2d67a9;
    background: #e4efff;
    font-size: .66rem;
    font-weight: 650;
    white-space: nowrap;
}

.feedback-support-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem;
    padding: .9rem 1rem;
}

.feedback-support-context-row {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.feedback-support-context-row strong {
    overflow: hidden;
    color: var(--feedback-ink);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-support-last-message {
    grid-column: 1 / -1;
    padding-top: .7rem;
    border-top: 1px solid #dbe8fb;
}

.feedback-support-last-message > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.feedback-support-last-message time {
    color: #8794a8;
    font-size: .68rem;
}

.feedback-support-last-message p {
    max-height: 110px;
    margin: .35rem 0 0;
    overflow: auto;
    color: #40506a;
    font-size: .79rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.feedback-support-upload {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 126px;
    padding: 1rem;
    border: 1.5px dashed #b9cbe4;
    border-radius: 12px;
    outline: 0;
    color: var(--feedback-muted);
    background: #f4f8fe;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.feedback-support-upload:hover,
.feedback-support-upload:focus-visible,
.feedback-support-upload.is-dragging {
    border-color: var(--feedback-primary);
    background: #edf5ff;
}

.feedback-support-upload.is-dragging {
    transform: scale(.995);
}

.feedback-support-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: .4rem;
    border-radius: 10px;
    color: var(--feedback-primary);
    background: #e2edff;
}

.feedback-support-upload strong {
    color: #40506a;
    font-size: .8rem;
}

.feedback-support-upload > span:not(.feedback-support-upload-icon) {
    margin-top: .15rem;
    font-size: .72rem;
}

.feedback-support-upload small {
    margin-top: .35rem;
    color: #94a0b3;
    font-size: .66rem;
}

.feedback-support-files {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.feedback-support-file {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid var(--feedback-border);
    border-radius: 10px;
    background: #fff;
}

.feedback-support-file > i {
    flex: 0 0 auto;
    margin-right: .55rem;
    color: #7592bb;
}

.feedback-support-file-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.feedback-support-file-info strong {
    overflow: hidden;
    color: #3d4b62;
    font-size: .72rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-support-file-info span {
    color: #98a3b4;
    font-size: .64rem;
}

.feedback-support-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: .4rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #a7646b;
    background: #fff1f2;
}

.feedback-support-error,
.feedback-support-notice {
    padding: .75rem .9rem;
    border-radius: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.feedback-support-error {
    border: 1px solid #f3c9cf;
    color: #a32939;
    background: #fff3f4;
}

.feedback-support-notice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.feedback-support-notice > div {
    display: flex;
    flex-direction: column;
    /* Uzun içerik kutuyu taşırmasın ve kendi içinde kaydırılabilsin: flex öğesinin
       varsayılan min-width/min-height:auto değeri ikisini de engelliyor. */
    min-width: 0;
    min-height: 0;
}

.feedback-support-notice-warning {
    color: #875c0d;
    background: #fff7e2;
}

.feedback-support-privacy {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: #8b97a9;
    font-size: .67rem;
    line-height: 1.45;
}

.feedback-support-privacy i {
    margin-top: .12rem;
    color: #7c9bc6;
}

.feedback-support-footer {
    gap: .6rem;
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--feedback-border);
    background: var(--feedback-surface);
}

.feedback-support-footer .btn {
    min-width: 100px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 650;
}

.feedback-support-submit {
    border-color: var(--feedback-primary);
    background: var(--feedback-primary);
}

.feedback-support-submit:hover,
.feedback-support-submit:focus {
    border-color: var(--feedback-primary-dark);
    background: var(--feedback-primary-dark);
}

.feedback-support-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767.98px) {
    .feedback-support-dialog {
        width: calc(100vw - 1rem);
        margin: .5rem auto;
        /* iOS Safari: 100vh, ve merkezlemenin türettiği %100, adres çubuğunun
           arkasındaki alanı da sayar; bu yüzden dvh ile görünür alana sabitliyoruz. */
        min-height: calc(100vh - 1rem);
        min-height: calc(100dvh - 1rem);
    }

    .feedback-support-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 14px;
    }

    .feedback-support-header,
    .feedback-support-body,
    .feedback-support-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .feedback-support-grid,
    .feedback-support-grid-topic,
    .feedback-support-files {
        grid-template-columns: 1fr;
    }

    .feedback-support-heading p {
        display: none;
    }

    .feedback-support-auto-badge {
        display: none;
    }

    .feedback-support-footer .btn {
        flex: 1 1 0;
    }
}

/* ============================================================================
   MESAJ GÖNDERİMİ KAPALIYKEN GÖSTERİLEN AÇIKLAMA

   İçerik yöneticinin zengin metin düzenleyicisiyle yazdığı BİÇİMLİ HTML'dir
   (duyuru içeriğiyle aynı kalıp). Kendi tipografisi olmadan uyarı kutusunun
   .78rem yazısını miras alıyordu: paragraf arası yoktu, liste girintisi
   kaybolmuştu, bağlantı düz metinden ayırt edilemiyordu.

   Uzun metin pencereyi şişirmesin diye kendi içinde kaydırılır; kısa metinde
   kaydırma çubuğu çıkmaz (max-height yalnız üst sınır).
   ============================================================================ */
.feedback-support-kapali-metin {
    margin-top: .5rem;
    max-height: 45vh;
    overflow-y: auto;
    overflow-wrap: anywhere; /* kelime sınırı olmayan uzun adresler kutuyu taşırmasın */
    color: #6b4c0a;
    font-size: .84rem;
    line-height: 1.6;
}

.feedback-support-kapali-metin > :first-child { margin-top: 0; }
.feedback-support-kapali-metin > :last-child { margin-bottom: 0; }

.feedback-support-kapali-metin p { margin: 0 0 .6rem; }

.feedback-support-kapali-metin ul,
.feedback-support-kapali-metin ol {
    margin: 0 0 .6rem;
    padding-left: 1.35rem;
}

.feedback-support-kapali-metin li { margin-bottom: .25rem; }

.feedback-support-kapali-metin h1,
.feedback-support-kapali-metin h2,
.feedback-support-kapali-metin h3,
.feedback-support-kapali-metin h4,
.feedback-support-kapali-metin h5,
.feedback-support-kapali-metin h6 {
    margin: .75rem 0 .35rem;
    color: #5d420a;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
}

.feedback-support-kapali-metin strong,
.feedback-support-kapali-metin b { font-weight: 700; color: #5d420a; }

/* Bağlantı düz metinden ayrılsın: uzun açıklama yerine yönlendirme verilebilsin. */
.feedback-support-kapali-metin a {
    color: #8a5a00;
    font-weight: 600;
    text-decoration: underline;
}
.feedback-support-kapali-metin a:hover { color: #6b4400; }

.feedback-support-kapali-metin blockquote {
    margin: 0 0 .6rem;
    padding: .35rem 0 .35rem .7rem;
    border-left: 3px solid #e3c68a;
    color: #7a5a12;
}

/* Yapıştırılan tablo/görsel kutuyu taşırmasın. */
.feedback-support-kapali-metin img { max-width: 100%; height: auto; }
.feedback-support-kapali-metin table { width: 100%; border-collapse: collapse; }
.feedback-support-kapali-metin td,
.feedback-support-kapali-metin th { padding: .3rem .45rem; border: 1px solid #e8d6ab; }