/* ==========================================================================
   Hizmetler sayfası. Üç grup, her grupta dev numaralı satırlar; yanda grubun
   büyük teknik çizimi, her hizmet satırında kendi küçük çizimi (ServiceDrawing,
   ortak stiller service-drawing.css'te). JS (js/pages/practices.js) .sv-row'da
   `data-active`, çizim kaplarında tlSvd özniteliklerini yazar. JS yokken (ya da
   azaltılmış harekette) çizimler tam görünür.
   ========================================================================== */

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

.tn .sv-group { padding: clamp(36px, 6vh, 72px) 0 clamp(28px, 5vh, 64px); border-top: 1px solid var(--tn-line); }
.tn .sv-group:first-child { border-top: 0; padding-top: 0; }

.tn .sv-ghead { max-width: 52em; margin-bottom: clamp(24px, 4vh, 48px); }
.tn .sv-ghead .tn-eyebrow { margin-bottom: clamp(14px, 2.4vh, 24px); }
.tn .sv-gtitle { font-size: clamp(36px, 5.2vw, 88px); font-weight: 300; letter-spacing: -0.045em; line-height: .98; overflow-wrap: anywhere; }
.tn .sv-gsum { margin-top: clamp(14px, 2.4vh, 24px); max-width: 34em; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: var(--tn-mute); }

.tn .sv-gbody { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }

/* ----------------------------- Satırlar ----------------------------- */
.tn .sv-list { min-width: 0; border-bottom: 1px solid var(--tn-line); }
.tn .sv-row { border-top: 1px solid var(--tn-line); }
.tn .sv-link {
    position: relative; display: grid; grid-template-columns: clamp(64px, 8.5vw, 150px) minmax(0, 1fr) auto;
    align-items: center; gap: 0 clamp(8px, 1.6vw, 24px); min-height: 44px; padding: clamp(18px, 2.6vh, 28px) 0;
    color: var(--tn-bone);
}
.tn .sv-num {
    font-size: clamp(44px, 6.4vw, 112px); font-weight: 200; letter-spacing: -0.06em; line-height: .9;
    color: rgba(236, 235, 230, .24); font-variant-numeric: tabular-nums; transition: color .35s ease;
}
.tn .sv-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: transform .5s var(--tn-ease); }
.tn .sv-t { font-size: clamp(20px, 2.2vw, 36px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; overflow-wrap: anywhere; }
.tn .sv-s {
    max-width: 38em; font-size: 15px; line-height: 1.5; color: var(--tn-mute); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tn .sv-go { color: var(--tn-amber); font-size: 18px; transition: transform .4s var(--tn-ease); }
/* Satır çizimi: metinle ok arasında; etkin satırda soluk → tam. */
.tn .sv-link-pic { grid-template-columns: clamp(64px, 8.5vw, 150px) minmax(0, 1fr) clamp(120px, 12vw, 184px) auto; }
.tn .sv-pic { width: 100%; opacity: .62; transition: opacity .35s ease; }
.tn .sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* data-active: JS (hover/odak/kaydırma) yazar; dokunmatikte kalıcı :hover takılmasın diye :hover yalnızca hover:hover'da. */
.tn .sv-row[data-active="1"] .sv-num,
.tn .sv-link:focus-visible .sv-num { color: var(--tn-amber); }
.tn .sv-row[data-active="1"] .sv-pic,
.tn .sv-link:focus-visible .sv-pic { opacity: 1; }
.tn .sv-row[data-active="1"] .sv-text,
.tn .sv-link:focus-visible .sv-text { transform: translateX(10px); }
.tn .sv-link:focus-visible .sv-go { transform: translateX(6px); }
.tn .sv-link:focus-visible { outline: 2px solid var(--tn-amber); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
    .tn .sv-link:hover .sv-num { color: var(--tn-amber); }
    .tn .sv-link:hover .sv-text { transform: translateX(10px); }
    .tn .sv-link:hover .sv-go { transform: translateX(6px); }
    .tn .sv-link:hover .sv-pic { opacity: 1; }
}

/* ----------------------------- Çizim sahnesi ----------------------------- */
.tn .sv-stage { position: sticky; top: 96px; padding-top: 8px; }

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

/* ----------------------------- Duyarlı ----------------------------- */
@media (max-width: 900px) {
    .tn .sv-gbody { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    /* Çizim satırların üstünde, sabit değil; ekrana girince çizilir. */
    .tn .sv-stage { position: relative; top: auto; order: -1; width: min(100%, 440px); padding-top: 0; }
}
@media (max-width: 640px) {
    .tn .sv-link, .tn .sv-link-pic { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .tn .sv-num { font-size: 40px; }
    /* Dar ekranda çizim metnin altına iner. */
    .tn .sv-pic { grid-column: 2; grid-row: 2; width: 132px; margin-top: 12px; }
    .tn .sv-link-pic .sv-num { align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .tn.sv *, .tn.sv *::before, .tn.sv *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}