/* ==========================================================================
   Hakkımızda. Statik sayfa: JS ve animasyon yok. Heykel (Sculpture) ve süreç
   çizimleri (Blueprint) tam görünür; --w/--f değerleri sabit son durum.
   Kartlar site.css'teki .tn-pgrid / .tn-pcard.
   ========================================================================== */

.tn.ab > section { overflow-wrap: anywhere; }
.tn .ab-manifesto, .tn .ab-principles, .tn .ab-process, .tn .ab-products, .tn .ab-city { padding-top: clamp(40px, 8vh, 96px); }

/* ----------------------------- 01 Manifesto ----------------------------- */
.tn .ab-manifesto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.tn .ab-manifesto-text { min-width: 0; }
.tn .ab-manifesto-text .tn-sec-head { margin-bottom: clamp(24px, 4vh, 44px); }
.tn .ab-manifesto-body { display: grid; gap: 1.1em; max-width: 36em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--tn-mute); }
.tn .ab-manifesto-body p:first-child { color: var(--tn-bone); }

.tn .ab-facts { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); margin-top: clamp(28px, 5vh, 56px); padding-top: 22px; border-top: 1px solid var(--tn-line); }
.tn .ab-facts dt { color: var(--tn-mute); }
.tn .ab-facts dd { margin: 6px 0 0; font-size: clamp(44px, 5.4vw, 88px); font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tn-amber); }

.tn .ab-sculpture { --w: 1; --f: 0; justify-self: center; width: min(100%, 460px); }
.tn .ab-sculpture svg { display: block; width: 100%; height: auto; }

/* ----------------------------- 02 İlkeler ----------------------------- */
.tn .ab-plist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tn-line); }
.tn .ab-prin { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(22px, 4vh, 40px) 0; border-top: 1px solid var(--tn-line); }
.tn .ab-prin-n { color: var(--tn-amber); font-variant-numeric: tabular-nums; }
.tn .ab-prin-t { font-size: clamp(24px, 2.6vw, 42px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
.tn .ab-prin-d { max-width: 34em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: var(--tn-mute); }

/* ----------------------------- 03 Süreç ----------------------------- */
.tn .ab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); align-items: end; }
.tn .ab-step { min-width: 0; }
/* Blueprint ölçü çizgileri kutunun dışına taşar: sol/üst boşluk onlara ayrılır. */
.tn .ab-stage { --w: 1; --f: 0; padding: 40px 16px 20px 40px; }
.tn .ab-bp { position: relative; width: 100%; }
.tn .ab-stage[data-kind="code"] .ab-bp { aspect-ratio: 460 / 300; }
.tn .ab-stage[data-kind="ui"] .ab-bp { aspect-ratio: 420 / 280; }
.tn .ab-stage[data-kind="phone"] .ab-bp { aspect-ratio: 130 / 262; width: 46%; }
.tn .ab-bp .tn-bp { width: 100%; height: 100%; }
.tn .ab-bp .tn-bp path { stroke-width: 1.4; }
.tn .ab-step-n { margin-top: 18px; color: var(--tn-amber); }
.tn .ab-step-t { margin-top: 8px; font-size: clamp(22px, 2vw, 32px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
.tn .ab-step-d { margin-top: 10px; max-width: 26em; font-size: 16px; line-height: 1.55; color: var(--tn-mute); }

/* ----------------------------- 04 Ürünler ----------------------------- */
.tn .ab-grid { perspective: none; }

/* ----------------------------- 05 İstanbul ----------------------------- */
.tn .ab-city-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.tn .ab-city-grid:not(:has(.ab-map)), .tn .ab-city-grid:not(:has(.ab-city-info)) { grid-template-columns: minmax(0, 1fr); }
.tn .ab-city-info { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tn-line); }
.tn .ab-city-info li { padding: 18px 0; border-top: 1px solid var(--tn-line); }
.tn .ab-city-info .tn-mono { color: var(--tn-mute); }
.tn .ab-city-info p { margin-top: 8px; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; }
.tn .ab-map { overflow: hidden; border: 1px solid var(--tn-line); border-radius: 14px; aspect-ratio: 16 / 10; min-height: 240px; }
.tn .ab-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.85) invert(.9) contrast(.9); }

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

@media (max-width: 960px) {
    .tn .ab-manifesto { grid-template-columns: minmax(0, 1fr); }
    .tn .ab-sculpture { order: -1; width: min(70%, 320px); justify-self: start; }
    .tn .ab-prin { grid-template-columns: 40px minmax(0, 1fr); }
    .tn .ab-prin-d { grid-column: 2; margin-top: 12px; }
    .tn .ab-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .tn .ab-stage { width: min(100%, 420px); }
    .tn .ab-city-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .tn .ab-bp .tn-bp path { stroke-width: 2; }
}