/* Hakkımızda (giriş + HUD) ve Uzmanlık — ana sayfada, Projeler ile tablet bölümü arasında (eski hakkimizda.html'den aynen taşındı).
   Ölçüler orijinal lusion.co/about'tan (@1920×1080): kenar 5vw / 50px, başlıklar 4vw, satır 1.15.
   Eski sayfadaki gövde sınıfı (.ab-body: siyah zemin, beyaz yazı) bölüm kapsamına alındı: zemin tuvalin kendi siyahı (aşağıda), yazılar bölümlerde beyaz. */
.ab-loading { background: #000; color: #fff; }
/* tuval ekranda sabit; JS clip-path ile yalnız bölümün ekrandaki kısmında görünür. Siyah zemin = eski sayfanın gövde zemini */
.ab-canvas { will-change: transform, opacity; position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; background: #000; visibility: hidden; }
.gx-canvas { visibility: hidden; }
.ab-page { position: relative; z-index: 1; }
/* Hero ve Projeler yer tutucuları (Faz 3–4) */
.site-ph { position: relative; height: 100vh; background: #000; color: rgba(240, 241, 250, .35); display: grid; place-items: center; font-size: max(11px, .8vw); letter-spacing: .08em; }

/* başlık — tüm sitede tek tip (orijinal ölçüler @1920: kap 5vw / 50px, yükseklik 54; logo 144×29; düğme yazısı 16.8px/500; ses düğmesi 54px daire; aralık ~20px) */
.gx-header.ab-header { padding: 4.63vh 5vw 0; align-items: flex-start; }
/* logo: amblem (yükseklik 29px, orijinal başlık logosu ölçüsü) + "eskiz" kelime işareti */
.ab-header .gx-logo { margin-top: 11px; height: 29px; gap: 10px; font-size: 36px; line-height: 29px; }
.ab-header .gx-logo .eskiz-mark { height: 29px; width: auto; }
.ab-header .gx-logo .eskiz-word { position: relative; top: -2px; }
.ab-header .gx-header__right { gap: 1.05vw; align-items: center; }
.ab-header .gx-pill { height: 54px; padding: 0 1.45vw; font-size: max(12px, .875vw); letter-spacing: 0; }
.ab-header .gx-pill--dark { background: #000; }   /* 17.10: lacivert yok */
.ab-header .gx-pill--light { background: #fff; color: #000; }
.ab-sound { width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #fff; position: relative; pointer-events: auto; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ab-sound::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #000; }
.ab-sound:hover { transform: scale(1.04); }

/* giriş: 650vw kaydırma payı + 1 ekran (orijinal 950vw; Ekip alt bölümü kaldırıldı, bölüm HUD'dan sonra u = 6.5'te biter) */
.ab-who { position: relative; display: block; overflow: clip; width: 100vw; padding-bottom: 325vw; font-size: clamp(0.875rem, 1vw, 1.75rem); color: #fff; }
.ab-sub { position: relative; width: 350vw; height: 100vh; will-change: transform; }
.ab-crosses { position: absolute; left: calc(5vw + 0.5em); width: calc(100vw - 10vw - 1em); height: 10px; top: 50%; margin-top: -1px; pointer-events: none; }
.ab-crosses i { position: absolute; left: 0; width: 2px; height: 2px; }
.ab-crosses i::before, .ab-crosses i::after { content: ''; position: absolute; width: 1em; height: 2px; margin-left: -0.5em; margin-top: -1px; background: rgb(153, 153, 153); }
.ab-crosses i::after { transform: rotate(90deg); }
.ab-crosses i:nth-child(2) { left: 25%; } .ab-crosses i:nth-child(3) { left: 50%; } .ab-crosses i:nth-child(4) { left: 75%; } .ab-crosses i:nth-child(5) { left: 100%; }

.ab-section { float: left; position: relative; width: 100vw; height: 100%; box-sizing: border-box; padding: 4.63vh 5vw; }
.ab-weare, .ab-details { margin-right: 25vw; }

.ab-main { position: absolute; left: 5vw; width: calc(100% - 10vw); bottom: 4.63vh; }
.ab-logo-big { position: relative; font-weight: 400; line-height: 0.74; letter-spacing: -0.055em; white-space: nowrap; color: #fff; }
.ab-logo-big .ab-lg { display: inline-block; will-change: transform; }
/* açılış başlığı (dev logo yerine): 3 satır, sol alt, kelimeler satır kaplarında yükselir */
.ab-headline { position: absolute; left: -.05em; bottom: calc(1.75em * .2 + 4.63vh * 0); margin: 0; font-size: 7.2vw; line-height: 1; font-weight: 400; letter-spacing: -.035em; color: #fff; white-space: nowrap; }
.ab-headline .ab-hl { display: block; }
.ab-hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ab-hw > span { display: inline-block; transform: translate3d(0, 110%, 0); will-change: transform; }
@media (max-width: 812px) { .ab-headline { font-size: 11vw; white-space: normal; } }
.ab-scroll { position: absolute; right: -0.1em; top: 100%; font-size: 1.75em; line-height: calc(4.63vh - .2em); white-space: nowrap; }

.ab-left { position: absolute; left: 5vw; bottom: 4.63vh; font-size: 4vw; line-height: 1.15; }
.ab-l { will-change: transform, opacity; }
.ab-l2 { display: block; height: 1.15em; }
.ab-logo-small { display: inline-block; margin-left: 0.075em; font-weight: 400; font-size: 0.97em; line-height: 1.15; letter-spacing: -0.055em; visibility: hidden; }
.ab-l4 { font-style: italic; }
.ab-l4 .ab-l { display: inline-block; }
.ab-right { position: absolute; right: 5vw; bottom: 4.63vh; text-align: right; font-size: 4vw; line-height: 1.15; font-style: italic; }
.ab-r { will-change: transform, opacity; }

.ab-details { font-size: 4vw; line-height: 1.15; }
.ab-details p { margin: 0; }
.ab-details .is-italic { font-style: italic; }
.ab-desc-top { margin-top: calc(clamp(1rem, 1vw, 2rem) * 2 + 4.63vh) !important; width: 80%; }
.ab-desc-top span span, .ab-desc-bottom span span { display: inline-block; margin-right: 1ex; will-change: transform, opacity; }
.ab-desc-bottom { position: absolute; right: 5vw; bottom: 4.63vh; text-align: right; width: 57.3vw; }
.ab-desc-bottom span span { margin-right: 0; margin-left: 1ex; }


/* Uzmanlık (orijinal #about-capability @1920×1080): 12 sütun, aralık 2vw, kenar max(5vw,40px) / clamp(30px,4vw,50px);
   başlık 12vw satır 1 (üst 411), 2. satır 2em sağda; alt başlık sağda 20em (.875em, üst 449); kartlar 403×562 (sütun 3 + 2 aralık, 314/438),
   kart yazısı 1.3vw; kart kabı alt boşluğu 300vh (kartlar kaydırmada ortada tutulur) */
.ab-cap { will-change: transform, opacity; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-content: flex-start; padding: clamp(30px, 4vw, 50px) max(5vw, 40px); font-size: clamp(.875rem, 1vw, 1.75rem); line-height: 1.15; color: #0a0a0b; }   /* 16.10: beyaz zemin → siyah yazı */
.ab-cap-title { grid-column: 1 / span 12; font-size: 12vw; line-height: 1em; font-weight: 400; margin-top: calc(2em - 2 * clamp(30px, 4vw, 50px)); display: flex; flex-direction: column; will-change: transform; }
.ab-cap-tl { position: relative; overflow: hidden; }
.ab-cap-l1, .ab-cap-l2 { position: relative; display: inline-block; white-space: nowrap; }
.ab-cap-l2 { left: 2em; }
.ab-cap-w { display: inline-block; transform: translate3d(0, 100%, 0); }
.ab-cap-sub { position: absolute; right: max(5vw, 40px); top: clamp(30px, 4vw, 50px); font-size: .875em; width: 20em; text-transform: uppercase; line-height: 1.2; margin-top: calc(26vw - 2 * clamp(30px, 4vw, 50px)); }
.ab-cap-sub-text { will-change: transform; }
.ab-cap-sub-line { position: relative; overflow: hidden; }
.ab-cap-sub-line > span { display: block; transform: translate3d(0, 110%, 0); }
.ab-cap-sub-cards { display: flex; gap: .5rem; width: fit-content; margin-top: 2em; overflow: hidden; position: relative; will-change: transform; }
.ab-cap-sub-card { display: flex; justify-content: center; align-items: center; border-radius: .361rem; border: .0625em solid currentColor; width: 2.25em; height: 3.125em; box-sizing: border-box; transform: translate3d(0, 110%, 0); }
.ab-cap-sub-card .ab-cap-glyph { width: .5em; height: .66em; }
.ab-cap-glyph { display: block; flex: none; }
.ab-cap-glyph svg { display: block; width: 100%; height: 100%; }
.ab-cap-cards-wrapper { position: relative; grid-column: 1 / span 12; width: 100%; margin: 4em auto 300vh auto; }
.ab-cap-cards { position: relative; perspective: 100vh; width: 100%; perspective-origin: center center; }
.ab-cap-card { position: absolute; top: 0; left: 0; display: inline-block; width: calc((100% - 22vw) / 4 + 4vw); color: #000; aspect-ratio: 314 / 438; transform-style: preserve-3d; font-size: 1.3vw; line-height: 1.15; }
.ab-cap-card-back { position: absolute; height: 100%; width: 100%; backface-visibility: hidden; background: url("veri/kart-arka-metal.png?v=1") center / contain no-repeat; border-radius: .8em; transform: rotateY(180deg); }   /* 16.10: mat siyah metal sırt (kaynak kart-arka-metal.svg; eski mavi kart-arka.svg) */
.ab-cap-card-front { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 1.25em 1.875em; position: absolute; height: 100%; width: 100%; backface-visibility: hidden; border-radius: .8em;
  /* 16.10 (kullanıcı): metal kart — mat siyah yüzey, gümüş yazı ve çizgiler, metalik kenar; beyaz zeminde gölge */
  color: #e4e7ec; background: radial-gradient(120% 90% at 30% 20%, #1b1c20 0%, #101114 55%, #08090a 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 219, 226, .28), inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 40px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .18); }
.ab-cap-card-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* fırçalanmış metal yansıması (sabit) */
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .04) 70%, rgba(255, 255, 255, 0) 80%); }
.ab-cap-card .ab-cap-glyph svg { fill: currentColor; }
.ab-cap-card-title { background: linear-gradient(100deg, #8e939b 0%, #f4f6f8 35%, #9aa0a8 60%, #e3e6ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-cap-card-header { display: flex; align-items: center; justify-content: space-between; height: 3.45em; }
.ab-cap-card-header:last-child { transform: rotate(180deg); }
.ab-cap-card-title { font-size: 1.5em; text-transform: uppercase; margin: 0; font-weight: 400; white-space: nowrap; }
.ab-cap-card .ab-cap-glyph { width: 1.36em; height: 1.8em; margin-right: -.3em; }
.ab-cap-list { margin: 0; list-style: none; padding: 0; }
.ab-cap-list li { position: relative; font-size: .85em; }
.ab-cap-list li:not(:first-child) { margin-top: 2em; }
.ab-cap-list li:not(:last-child)::before { content: ".............................."; position: absolute; top: .6em; font-size: 1.5em; letter-spacing: .125em; color: #c9cdd3; opacity: .28; white-space: nowrap; overflow: hidden; max-width: 100%; }
@media (min-aspect-ratio: 21 / 9) { .ab-cap-title { font-size: 8vw; } .ab-cap-sub { font-size: 1em; margin-top: calc(17vw - 2 * clamp(30px, 4vw, 50px)); } .ab-cap-cards-wrapper { width: 75%; } .ab-cap-card { font-size: .87vw; } }

/* büyük logo harfleri (JS ile konumlanan katman) */
.ab-logo-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.ab-logo-layer span { position: absolute; left: 0; top: 0; font-weight: 400; color: #fff; white-space: pre; transform-origin: 0 0; will-change: transform; line-height: 1; }

@media (max-width: 812px) {
  .ab-cap { font-size: clamp(1rem, 1vw, 1.75rem); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ab-cap-title { grid-column: 1 / span 6; font-size: 18vw; }
  .ab-cap-l2 { left: 0; }
  .ab-cap-sub { position: relative; grid-column: 1 / span 6; margin-top: 0; right: auto; top: 0; width: 100%; }
  .ab-cap-sub-text { margin-top: 2em; font-size: 1.1em; }
  .ab-cap-cards-wrapper { grid-column: 1 / span 6; margin-bottom: 0; }
  .ab-cap-cards { perspective: 300vw; height: auto !important; }
  .ab-cap-cards::after { content: ''; display: block; clear: both; }
  .ab-cap-card { position: relative; width: calc(50% - 2vw); font-size: 2.4vw; }
  .ab-cap-card:nth-child(n+3) { margin-top: 3em; }
  .ab-cap-card:nth-child(2n+1) { float: right; }
  .ab-left, .ab-right { font-size: 8vw; }
  .ab-details { font-size: 8vw; }
}