/* ==========================================================================
   SSS. Sade <details> akordeonu; JS yok. Marker gizli, yerine artı/eksi çizimi.
   ========================================================================== */

.tn .fq-main { padding-bottom: clamp(32px, 6vh, 72px); }

/* Çıpalar: üst bar sabit (~74px); hash'e atlayınca başlık/soru barın altında kalmasın. */
.tn .fq-toc, .tn .fq-group, .tn .fq-q { scroll-margin-top: 96px; }

/* Kategori bağlantıları (iki ya da daha fazla adlı kategori varsa). Sarar; 320px'te taşmaz. */
.tn .fq-toc { margin-bottom: clamp(32px, 6vh, 64px); }
.tn .fq-toc-h { margin: 0 0 14px; color: var(--tn-mute); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.tn .fq-toc-l { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tn .fq-toc-l li { min-width: 0; max-width: 100%; }
.tn .fq-toc-l a {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 8px 18px;
    border: 1px solid var(--tn-line); border-radius: 999px; color: var(--tn-bone); line-height: 1.25;
    transition: border-color .2s, color .2s;
}
.tn .fq-toc-t { min-width: 0; overflow-wrap: anywhere; }
.tn .fq-toc-c { flex: none; color: var(--tn-mute); font-size: 12px; }
.tn .fq-toc-l a:focus-visible, .tn .fq-back:focus-visible { outline: 2px solid var(--tn-amber); outline-offset: 3px; }
@media (hover: hover) { .tn .fq-toc-l a:hover { border-color: var(--tn-amber); color: var(--tn-amber); } .tn .fq-back:hover { color: var(--tn-amber); } }
.tn .fq-back { display: inline-block; margin-top: 14px; min-height: 44px; padding: 12px 0; color: var(--tn-mute); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tn .fq-group + .fq-group { margin-top: clamp(40px, 8vh, 96px); }
.tn .fq-ghead { margin-bottom: clamp(20px, 3.4vh, 40px); }
.tn .fq-ghead .tn-h2 { overflow-wrap: anywhere; }

.tn .fq-list { border-bottom: 1px solid var(--tn-line); }
.tn .fq-q { border-top: 1px solid var(--tn-line); }
.tn .fq-q summary {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 0 16px;
    min-height: 44px; padding: 22px 0; cursor: pointer; list-style: none;
}
.tn .fq-q summary::-webkit-details-marker { display: none; }
.tn .fq-q summary::marker { content: ""; }
.tn .fq-q summary:focus-visible { outline: 2px solid var(--tn-amber); outline-offset: 4px; border-radius: 6px; }
.tn .fq-n { color: var(--tn-mute); font-variant-numeric: tabular-nums; }
.tn .fq-t { font-size: clamp(18px, 1.8vw, 28px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.tn .fq-x { position: relative; width: 14px; height: 14px; justify-self: end; }
.tn .fq-x::before, .tn .fq-x::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--tn-amber); transition: transform .3s var(--tn-ease); }
.tn .fq-x::after { transform: rotate(90deg); }
.tn .fq-q[open] .fq-x::after { transform: rotate(0); }
@media (hover: hover) { .tn .fq-q summary:hover .fq-t { color: var(--tn-amber); } }

/* Cevap: admin HTML'i (temizlenmiş) ya da düz metin paragrafları. */
.tn .fq-a { padding: 0 36px 26px 64px; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--tn-mute); overflow-wrap: anywhere; }
.tn .fq-a > * + * { margin-top: .8em; }
.tn .fq-a a { color: var(--tn-bone); text-decoration: underline; text-decoration-color: var(--tn-amber); text-underline-offset: 3px; }
.tn .fq-a h2, .tn .fq-a h3, .tn .fq-a h4 { color: var(--tn-bone); font-size: 18px; font-weight: 400; line-height: 1.3; }
.tn .fq-a ul, .tn .fq-a ol { padding-left: 1.3em; }
.tn .fq-a ul { list-style: disc; }
.tn .fq-a ol { list-style: decimal; }
.tn .fq-a img { max-width: 100%; height: auto; }
.tn .fq-a pre, .tn .fq-a code { font-family: var(--tn-mono); font-size: 14px; }
.tn .fq-a pre { overflow-x: auto; max-width: 100%; }
.tn .fq-a table { display: block; max-width: 100%; overflow-x: auto; }
.tn .fq-a blockquote { padding-left: 1em; border-left: 2px solid var(--tn-line); }

.tn .fq-empty { padding: clamp(32px, 6vh, 72px) 0; border-top: 1px solid var(--tn-line); font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; color: var(--tn-mute); max-width: 32em; }

.tn .fq-close { padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(64px, 12vh, 140px); }

@media (max-width: 640px) {
    .tn .fq-q summary { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 0 10px; }
    .tn .fq-a { padding: 0 0 22px 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .tn .fq-x::before, .tn .fq-x::after, .tn .fq-toc-l a { transition: none; }
}