/* ==========================================================================
   FIBERKO — HAKKIMIZDA KATMANI
   Temel stil dosyasındaki .abv / .abs iskeletine dokunmadan üstüne biner.
   Yalnızca Hakkımızda sayfasında yüklenir (about/index.blade.php).
   ========================================================================== */

/* ---------- Hero ---------- */
.abv.abv--fk{
  min-height:clamp(500px,66vh,720px);
  align-items:center;
  padding-block:clamp(56px,7vw,96px) clamp(34px,4.6vw,64px);
  background-color:var(--c-ink);
}
/* Kaynak fotoğraf yalnız 1067px genişliğinde: tam genişlikte keskin ve
   büyütülmüş görünmesin diye hafif bulanık ve soluk, bir "atmosfer" katmanı.
   scale, bulanıklığın kenarlarda açık hale bırakmasını da örtüyor. */
.abv--fk .abv__media{
  object-position:center 62%;
  filter:blur(2.5px) saturate(.8) brightness(.92);
  transform:scale(1.06);
}

/* Perde: Obsidian (--c-ink) soldan koyu, sağa doğru açılır; alttan da
   karartma, künye şeridi fotoğrafın açık zemininde kaybolmasın. */
.abv--fk .abv__scrim{
  --fk-k:var(--c-ink);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--fk-k) 95%, transparent) 0%,
      color-mix(in srgb, var(--fk-k) 86%, transparent) 30%,
      color-mix(in srgb, var(--fk-k) 58%, transparent) 58%,
      color-mix(in srgb, var(--fk-k) 30%, transparent) 84%,
      color-mix(in srgb, var(--fk-k) 22%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--fk-k) 78%, transparent) 0%,
      color-mix(in srgb, var(--fk-k) 20%, transparent) 42%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--fk-k) 40%, transparent) 0%,
      transparent 26%);
}

.abv--fk .eyebrow--light{ color:color-mix(in srgb, var(--c-primary) 55%, #fff); }
.abv--fk .eyebrow--light::before{ background:var(--c-primary); }

.abv--fk .abv__t{
  max-width:17em;
  font-size:clamp(2.05rem,4.5vw,3.7rem);
  line-height:1.06;
  text-shadow:0 2px 30px color-mix(in srgb, var(--c-ink) 45%, transparent);
  text-wrap:balance;
}
.abv--fk .abv__d{
  max-width:58ch;
  color:rgba(255,255,255,.88);
}

/* Künye şeridi: ince üst çizgi, sayılar arasında dikey ayraç, her sayının
   altında kısa vurgu çizgisi. */
.abv--fk .abv__stats{
  gap:18px 0;
  border-top-color:rgba(255,255,255,.2);
}
.abv--fk .abv__stats > div{
  padding-inline:0 clamp(20px,3.6vw,56px);
}
.abv--fk .abv__stats > div + div{
  padding-inline-start:clamp(20px,3.6vw,56px);
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.abv--fk .abv__stats b{
  position:relative; padding-bottom:11px;
  font-size:clamp(1.6rem,2.7vw,2.25rem);
}
.abv--fk .abv__stats b::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--c-primary), transparent);
}
[dir="rtl"] .abv--fk .abv__stats b::after{ background:linear-gradient(270deg, var(--c-primary), transparent); }
.abv--fk .abv__stats span{
  margin-top:9px; font-weight:500; color:rgba(255,255,255,.72);
}

/* Çok yavaş yakınlaşma — yalnız hareket tercihi olmayanlarda */
@media (prefers-reduced-motion: no-preference){
  .abv--fk .abv__media{
    animation:fkAbvZoom 26s ease-in-out infinite alternate;
    transform-origin:60% 50%;
    will-change:transform;
  }
}
@keyframes fkAbvZoom{ from{ transform:scale(1.06); } to{ transform:scale(1.13); } }

/* Temel stil hareket azaltmada görseli gizliyordu; burada duran bir
   fotoğraf var, gizlenirse zemin boş kalır. Animasyon zaten yok. */
@media (prefers-reduced-motion: reduce){
  .abv--fk .abv__media{ display:block; animation:none; }
}

/* ---------- Hikâye blokları ---------- */
.abs--fk .abs__frame{
  border:1px solid var(--c-line);
  border-radius:var(--r-xl, 34px);
  box-shadow:0 34px 70px -34px color-mix(in srgb, var(--c-ink) 45%, transparent);
}
.abs--fk .abs__frame img{ transition:transform .8s var(--ease); }
.abs--fk .abs__row:hover .abs__frame img{ transform:scale(1.04); }

/* İlk blok: kurumsal tanıtım — görsel kartı biraz daha büyük */
.abs--fk .abs__row:first-child{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
.abs--fk .abs__row:first-child .abs__frame{ aspect-ratio:5/4; }
.abs--fk .abs__row:first-child .abs__t{ font-size:clamp(1.6rem,2.9vw,2.45rem); }

/* Sıra numarası: marka renginde kontur + koyu hale; açık zeminde de
   fotoğrafın üstünde de kenarı seçilsin. */
.abs--fk .abs__no{
  -webkit-text-stroke:2px color-mix(in srgb, var(--c-primary) 85%, transparent);
  filter:drop-shadow(0 0 2px color-mix(in srgb, var(--c-ink) 50%, transparent)) drop-shadow(0 1px 4px color-mix(in srgb, var(--c-ink) 30%, transparent));
}

@media (max-width: 900px){
  .abs--fk .abs__row:first-child{ grid-template-columns:1fr; }
  .abs--fk .abs__row:first-child .abs__frame{ aspect-ratio:16/10; }
}

@media (max-width: 575px){
  .abv.abv--fk{ min-height:0; padding-block:56px 34px; }
  .abv--fk .abv__stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
  .abv--fk .abv__stats > div{ padding-inline:0 14px; }
  .abv--fk .abv__stats > div + div{ padding-inline-start:0; border-inline-start:0; }
  .abv--fk .abv__stats > div:nth-child(even){
    padding-inline-start:18px;
    border-inline-start:1px solid rgba(255,255,255,.18);
  }
}

@media (prefers-reduced-motion: reduce){
  .abs--fk .abs__frame img{ transition:none; }
  .abs--fk .abs__row:hover .abs__frame img{ transform:none; }
}