/* ==========================================================================
   Hata sayfaları (404 / 500 / 503). Metin solda, 404'te sağda kopmuş devre çizimi; dar ekranda çizim metnin altına iner.
   JS yok; çizim süs (aria-hidden).
   ========================================================================== */

.tn.er .er-hero { padding-bottom: clamp(64px, 12vh, 140px); }
.tn.er .er-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vh, 72px) clamp(24px, 4vw, 64px); align-items: center; }
.tn.er .er-copy { min-width: 0; }
.tn.er .er-h { overflow-wrap: anywhere; }
.tn.er .er-links { margin-top: clamp(28px, 4.5vh, 48px); animation: none; }
.tn.er .er-links a { min-width: 0; width: min(100%, 340px); }
.tn.er .er-hint { margin-top: 18px; color: var(--tn-amber); }

/* Çizim kutusu: Blueprint mutlak konumlu; oran kutuda tutulur, svg kutuyu doldurur. Ölçü çizgileri için kutu dışına pay bırak. */
.tn.er .er-fig { position: relative; width: 100%; max-width: 420px; aspect-ratio: 400 / 260; margin: 34px 0 0 34px; justify-self: start; }
.tn.er .er-fig .tn-bp { width: 100%; height: 100%; }
.tn.er .er-fig .tn-bp path { stroke-width: 1.4; }
.tn.er .er-fig { --w: 1; --f: 0; }

@media (min-width: 1000px) {
    .tn.er .er-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .tn.er .er-fig { justify-self: end; margin-right: 34px; }
}
@media (max-width: 820px) {
    .tn.er .er-fig { max-width: calc(100% - 34px); }
    .tn.er .er-fig .tn-bp path { stroke-width: 2; }
}