/* ==========================================================================
   Hizmet teknik çizimleri (Components/Site/ServiceDrawing, 400×300 pafta). Hizmetler listesi ve
   hizmet detayı ortak kullanır. Kap `.svd-host`; JS (js/pages/service-drawing.js) kapa
   `data-svd-armed` (--w: 0, yalnız hayalet), çizerken satır içi `--w` ve tellere `--o`, çizim
   bitince `data-svd-live` (canlı ayrıntılar bir kez oynar) yazar. JS yokken ya da azaltılmış
   harekette --w: 1 → çizim son hâliyle tam görünür, animasyon yok.
   `.svd-sm`: küçük boy (liste satırı): pafta ve etiketler gizli, teller kalın.
   ========================================================================== */

.tn .svd-host { --w: 1; --svd-bg: var(--tn-ink); position: relative; display: block; }
.tn .svd-host[data-svd-armed] { --w: 0; }

.tn .svd { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: visible; }
.tn .svd path { stroke-linecap: round; stroke-linejoin: round; }
.tn .svd-ln, .tn .svd-acc {
    fill: none; stroke-width: 1.4;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - clamp(0, (var(--w) - var(--o, 0)) / (1 - var(--o, 0)), 1));
}
.tn .svd-ln { stroke: rgba(236, 235, 230, .82); }
.tn .svd-acc { stroke: var(--tn-amber); stroke-width: 1.7; }
.tn .svd-so { fill: var(--svd-bg); }

/* Pafta: kesim işaretleri, artı ızgarası, antet. */
.tn .svd-sheet { opacity: clamp(0, calc(var(--w) * 4), 1); }
.tn .svd-grid { fill: none; stroke: rgba(236, 235, 230, .16); stroke-width: 1; }
.tn .svd-mark { fill: none; stroke: rgba(236, 235, 230, .34); stroke-width: 1; }

.tn .svd text { font-family: var(--tn-mono); font-size: 11px; letter-spacing: .04em; text-transform: none; opacity: clamp(0, calc((var(--w) - .45) * 3), 1); }
.tn .svd-lbl { fill: var(--tn-amber); }
.tn .svd-tx { fill: var(--tn-bone); }
.tn .svd-mu { fill: var(--tn-mute); }

.tn .svd-sf { fill: var(--tn-amber); opacity: calc(clamp(0, (var(--w) - .8) * 5, 1) * .14); }
.tn .svd-fill > * { opacity: clamp(0, calc((var(--w) - .5) * 3), 1); }
.tn .svd-dot { fill: rgba(236, 235, 230, .82); }
.tn .svd-am { fill: var(--tn-amber); }
.tn .svd-guide { fill: none; stroke: rgba(236, 235, 230, .42); stroke-width: 1; stroke-dasharray: 3 4; }
.tn .svd-dash { fill: none; stroke: var(--tn-amber); stroke-width: 1.2; stroke-dasharray: 3 4; }
.tn .svd-faint { fill: none; stroke: rgba(236, 235, 230, .09); stroke-width: 1; }
.tn .svd-faint-ln { fill: none; stroke: rgba(236, 235, 230, .3); stroke-width: 1; }

/* Canlı ayrıntılar: çizim bitmeye yakın belirir. Varsayılan (animasyonsuz) hâl = son durum;
   geçici parçalar (paket, halka, akış) varsayılan görünmez. */
.tn .svd-live { opacity: clamp(0, calc((var(--w) - .9) * 10), 1); }
.tn .svd-a > * { transform-box: fill-box; transform-origin: center; }
.tn .svd-pk { fill: var(--tn-amber); opacity: 0; }
.tn .svd-ring { fill: none; stroke: var(--tn-amber); stroke-width: 1.4; opacity: 0; }
.tn .svd-flow { fill: none; stroke: var(--tn-amber); stroke-width: 2.6; stroke-dasharray: .08 .92; opacity: 0; }
.tn .svd-hl { fill: rgba(255, 125, 34, .14); stroke: var(--tn-amber); stroke-width: 1; }
.tn .svd-led, .tn .svd-node { fill: var(--tn-amber); }

/* ----------------------------- Küçük boy ----------------------------- */
.tn .svd-host:not(.svd-sm) .svd-ph, .tn .svd-sm .svd-sheet, .tn .svd-sm .svd-text { display: none; }
.tn .svd-sm .svd-ln { stroke-width: 2.6; }
.tn .svd-sm .svd-acc { stroke-width: 3.2; }
.tn .svd-sm .svd-guide, .tn .svd-sm .svd-dash { stroke-width: 2; stroke-dasharray: 5 6; }
.tn .svd-sm .svd-faint-ln { stroke-width: 1.8; }
.tn .svd-sm .svd-faint { stroke-width: 1.6; }
.tn .svd-sm .svd-flow { stroke-width: 4.4; }

/* ----------------------------- Canlı ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .tn [data-svd-live] .svd-a-drop > * { animation: svd-drop .7s cubic-bezier(.5, 0, .75, .4) both; }
    .tn [data-svd-live] .svd-a-led > * { animation: svd-blink 1s steps(2, jump-none) .1s 3; }
    .tn [data-svd-live] .svd-a-flow > * { animation: svd-flow 1.3s ease-in-out 2; }
    .tn [data-svd-live] .svd-a-flow > :nth-child(2n) { animation-delay: .25s; }
    .tn [data-svd-live] .svd-a-flow > :nth-child(3n) { animation-delay: .5s; }
    .tn [data-svd-live] .svd-flow-in { animation-direction: reverse !important; }
    .tn [data-svd-live] .svd-a-fire > * { animation: svd-pop .6s var(--tn-ease) both; }
    .tn [data-svd-live] .svd-a-fire > :nth-child(2) { animation-delay: .3s; }
    .tn [data-svd-live] .svd-a-fire > :nth-child(3) { animation-delay: .6s; }
    .tn [data-svd-live] .svd-a-blink > * { animation: svd-blink 1s steps(2, jump-none) 2; }
    .tn [data-svd-live] .svd-a-ripple > * { animation: svd-ring 1.1s ease-out 2; }
    .tn [data-svd-live] .svd-a-ripple > :nth-child(2) { animation-delay: .35s; }
    .tn [data-svd-live] .svd-a-frames > * { animation: svd-frames 1.4s steps(5, jump-none) 2; }
    .tn [data-svd-live] .svd-a-req > * { --dx: 114px; animation: svd-go .6s ease-in-out both; }
    .tn [data-svd-live] .svd-a-query > * { --dx: 108px; animation: svd-go .5s ease-in-out .55s both; }
    .tn [data-svd-live] .svd-a-res > * { --dx: -114px; animation: svd-go .6s ease-in-out 1s both; }
    .tn [data-svd-live] .svd-a-steps > * { animation: svd-ring .8s ease-out both; }
    .tn [data-svd-live] .svd-a-steps > :nth-child(2) { animation-delay: .25s; }
    .tn [data-svd-live] .svd-a-steps > :nth-child(3) { animation-delay: .5s; }
    .tn [data-svd-live] .svd-a-steps > :nth-child(4) { animation-delay: .75s; }
    .tn [data-svd-live] .svd-a-move > * { animation: svd-move .9s var(--tn-ease) both; }
    .tn [data-svd-live] .svd-a-spawn > * { animation: svd-pop .7s var(--tn-ease) .1s both; }
    .tn [data-svd-live] .svd-a-ping > * { animation: svd-ring 1.1s ease-out .5s 2; }
    .tn [data-svd-live] .svd-a-ping > :nth-child(2) { animation-delay: .2s; }
    .tn [data-svd-live] .svd-a-ping > :nth-child(3) { animation-delay: .8s; }
    .tn [data-svd-live] .svd-a-trace > * { animation: svd-trace 1.4s var(--tn-ease) both; }
}
@keyframes svd-drop { from { transform: translateY(-34px); opacity: 0; } 25% { opacity: 1; } }
@keyframes svd-blink { 50% { opacity: .15; } }
@keyframes svd-flow { 0% { opacity: 0; stroke-dashoffset: 1; } 12%, 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: .08; } }
@keyframes svd-pop { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.45); } 100% { transform: none; } }
@keyframes svd-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.8); } }
@keyframes svd-frames { from { transform: translateX(-88px); } to { transform: translateX(88px); } }
@keyframes svd-go { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } }
@keyframes svd-move { from { transform: translate(-32px, -82px) rotate(7deg); opacity: .4; } }
@keyframes svd-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }