/* Section "kategoriler" (#isler) — four category plaques, each a link into the works archive (isler/?k=<id>).
 * Normal flow, about one viewport tall on desktop, flat --bg at both edges (seamless with the gallery above and durus below).
 * The covers develop from gold-toned to colour behind a gold scan line on hover/focus — the gesture of eserler.css.
 * Driven by js/sections/kategoriler.js; all selectors scoped under .s-kategoriler (the two @property names are prefixed). */

/* develop (0..1) and spread (0..1) of a plaque's cover stack: registered so they can transition on :hover / :focus-visible */
@property --kat-h {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --kat-s {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.s-kategoriler {
  position: relative;
  background: var(--bg);
  overflow: clip;
  isolation: isolate;
}
/* backdrop (client, 2026-10-05): the brand film's fortress-and-map scene (G9), faint; fades into --bg at both edges (seamless with the
   gallery above and "durus" below) */
.s-kategoriler::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../assets/arka/g9-hisar.jpg");
  background-image: image-set(url("../../assets/arka/g9-hisar.avif") type("image/avif"), url("../../assets/arka/g9-hisar.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 62%;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
/* a faint pool of gallery light under the plaques; fully transparent long before both edges */
.s-kategoriler__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 38% at 50% 64%, rgba(201, 162, 74, 0.065), rgba(201, 162, 74, 0) 72%);
}

.s-kategoriler__wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4.4vh, 48px);
  padding-top: calc(var(--nav-h) + clamp(24px, 4.5vh, 52px));
  /* keep the plaques clear of the persistent "Devam" pill (devam.css publishes its box) */
  padding-bottom: calc(var(--devam-bottom, 30px) + var(--devam-h, 46px) + clamp(18px, 3vh, 30px));
}
@media (min-width: 1101px) {
  .s-kategoriler__wrap {
    padding-right: max(var(--gutter), 64px); /* clear of the section rail */
  }
}

/* ------------------------------------------------------------------ header */
.s-kategoriler__head {
  --kat-he: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}
/* the h2 is the section's one word, at the size of the other sections' h2 (base.css .h2); a gold hairline draws in before it,
 * then the word rises in — both a pure function of --kat-he (js) */
.s-kategoriler__title {
  position: relative;
  padding-left: 0.86em;
  color: var(--ink);
}
.s-kategoriler__mark {
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.58em;
  height: 1px;
  background: var(--gold);
  transform: scaleX(clamp(0, calc(var(--kat-he) * 1.8), 1));
  transform-origin: 0 50%;
}
.s-kategoriler__word {
  display: inline-block;
  opacity: clamp(0, calc(var(--kat-he) * 1.7 - 0.7), 1);
  transform: translateY(calc((1 - var(--kat-he)) * 0.22em));
}
.s-kategoriler__all {
  opacity: clamp(0, calc(var(--kat-he) * 2 - 1), 1);
}

.s-kategoriler__all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s;
}
.s-kategoriler__allN {
  padding: 3px 9px 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color 0.25s;
}
.s-kategoriler__allArrow,
.s-kategoriler__goArrow {
  display: inline-flex;
  width: 26px;
  transition: transform 0.35s var(--ease-out);
}
.s-kategoriler__allArrow svg,
.s-kategoriler__goArrow svg {
  width: 100%;
  height: auto;
}
.s-kategoriler__all::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transition: right 0.35s var(--ease-out);
}
.s-kategoriler__all:hover,
.s-kategoriler__all:focus-visible {
  color: var(--gold-bright);
}
.s-kategoriler__all:hover::after,
.s-kategoriler__all:focus-visible::after {
  right: 0;
}
.s-kategoriler__all:hover .s-kategoriler__allN {
  border-color: rgba(231, 200, 120, 0.45);
}
.s-kategoriler__all:hover .s-kategoriler__allArrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ grid of plaques */
.s-kategoriler__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  height: clamp(350px, 49vh, 520px);
  height: clamp(350px, 49svh, 520px);
}
.s-kategoriler__item {
  display: flex;
  min-width: 0;
}

.s-kategoriler__card {
  --kat-e1: 1;
  --kat-e2: 1;
  --kat-e3: 1;
  --kat-e4: 1;
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  border-radius: 8px;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    --kat-h 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    --kat-s 0.6s var(--ease-out),
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
.s-kategoriler__frame {
  /* the plaque's body: surfaces behind the drawn top edge */
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(24, 17, 12, 0.78), rgba(14, 10, 8, 0.5));
  opacity: clamp(0, calc(var(--kat-e1) * 1.5 - 0.25), 1);
  pointer-events: none;
  transition: border-color 0.4s;
}
/* the gold top edge draws in from the left as the plaque enters */
.s-kategoriler__edge {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), rgba(231, 200, 120, 0.35) 55%, rgba(231, 200, 120, 0));
  transform: scaleX(var(--kat-e1));
  transform-origin: 0 50%;
  pointer-events: none;
}
.s-kategoriler__in {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "no" "fan" "text";
  padding: clamp(16px, 1.7vw, 26px);
}

.s-kategoriler__no {
  grid-area: no;
  justify-self: start;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
  opacity: clamp(0, calc(var(--kat-e1) * 2 - 1), 1);
  transform: translateY(calc((1 - var(--kat-e1)) * 8px));
}

/* ------------------------------------------------------------------ the cover stack */
.s-kategoriler__fan {
  --tw: 68; /* thumb width, % of the fan box … */
  --th: 64; /* … but never taller than this % of it */
  grid-area: fan;
  position: relative;
  container-type: size;
  margin: clamp(10px, 2vh, 22px) 0;
  min-height: 0;
}
.s-kategoriler__card[data-kat="logo"] .s-kategoriler__fan {
  --tw: 56;
  --th: 62;
}
/* logos are small squares: they can fan out further */
.s-kategoriler__card[data-kat="logo"] .s-kategoriler__thumb[data-pos="0"] {
  --x1: -40;
}
.s-kategoriler__card[data-kat="logo"] .s-kategoriler__thumb[data-pos="2"] {
  --x1: 40;
}
/* the light table "switches on" under the fanned covers */
.s-kategoriler__fan::before {
  content: "";
  position: absolute;
  inset: -6% -10%;
  background: radial-gradient(ellipse 50% 48% at 50% 54%, rgba(231, 200, 120, 0.16), rgba(231, 200, 120, 0) 70%);
  opacity: var(--kat-h);
  pointer-events: none;
}

.s-kategoriler__thumb {
  /* geometry: rest (…0) ↔ spread (…1); x/y in % of the thumb, a in deg */
  --tin: clamp(0, calc(var(--kat-e3) * 1.7 - var(--ord) * 0.32), 1);
  --t: clamp(0, calc(var(--kat-h) * 1.55 - var(--pos) * 0.27), 1);
  --rr: calc(var(--t) * 114 - 7);
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(var(--tw) * 1cqw), calc(var(--th) * 1cqh * var(--ar)));
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: 3px;
  background: #120d0a;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(231, 200, 120, 0.22),
    0 16px 34px -14px rgba(0, 0, 0, 0.85);
  opacity: clamp(0, calc(var(--tin) * 2.6), 1); /* opaque early: laid down, not cross-faded */
  transform: translate(-50%, -50%)
    translate(
      calc((var(--x0) + (var(--x1) - var(--x0)) * var(--kat-s)) * 1%),
      calc((var(--y0) + (var(--y1) - var(--y0)) * var(--kat-s) - (1 - var(--tin)) * 16) * 1%)
    )
    rotate(calc((var(--a0) + (var(--a1) - var(--a0)) * var(--kat-s)) * 1deg))
    scale(calc(var(--k0) + (var(--k1) - var(--k0)) * var(--kat-s)));
}
.s-kategoriler__thumb[data-pos="0"] {
  --ord: 0;
  --x0: -12;
  --y0: -11;
  --a0: -5.5;
  --k0: 0.9;
  --x1: -26;
  --y1: -17;
  --a1: -9;
  --k1: 0.9;
  z-index: 1;
}
.s-kategoriler__thumb[data-pos="1"] {
  --ord: 2;
  --x0: 0;
  --y0: 7;
  --a0: -1;
  --k0: 1;
  --x1: 0;
  --y1: 11;
  --a1: 0;
  --k1: 1.05;
  z-index: 3;
}
.s-kategoriler__thumb[data-pos="2"] {
  --ord: 1;
  --x0: 12;
  --y0: -6;
  --a0: 4.5;
  --k0: 0.9;
  --x1: 26;
  --y1: -12;
  --a1: 8;
  --k1: 0.9;
  z-index: 2;
}

/* fallback plate: visible while loading and if every source fails — a gold hairline frame and the category's initial */
.s-kategoriler__plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #1d150f, #0f0b08 75%);
}
.s-kategoriler__plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(231, 200, 120, 0.3);
  border-radius: 1px;
}
.s-kategoriler__mono {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1;
  color: var(--gold);
  opacity: 0.75;
}
.s-kategoriler__tone,
.s-kategoriler__col,
.s-kategoriler__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.s-kategoriler__tone,
.s-kategoriler__col {
  object-fit: cover;
  -webkit-user-drag: none;
}
.s-kategoriler__thumb.is-in .s-kategoriler__tone,
.s-kategoriler__thumb.is-in .s-kategoriler__col,
.s-kategoriler__thumb.is-in .s-kategoriler__wash {
  opacity: 1;
}
/* at rest: a gold-toned print */
.s-kategoriler__tone {
  filter: grayscale(1) contrast(1.08) brightness(0.9);
}
.s-kategoriler__wash {
  background: linear-gradient(155deg, #e4c37c, #9b7a33);
  mix-blend-mode: multiply;
}
.s-kategoriler__thumb.is-light {
  background: #ece6d8; /* the archive's light table */
}
.s-kategoriler__thumb.is-light .s-kategoriler__tone {
  filter: grayscale(1) brightness(0.64) contrast(1.2);
}
/* developed: colour revealed behind the scan line (eserler.css: --r) */
.s-kategoriler__col {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--rr) * 1%), transparent calc(var(--rr) * 1% + 6%));
  mask-image: linear-gradient(90deg, #000 calc(var(--rr) * 1%), transparent calc(var(--rr) * 1% + 6%));
}
.s-kategoriler__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rr) * 1%);
  width: 2px;
  margin-left: -1px;
  background: var(--gold-bright);
  box-shadow:
    0 0 10px 2px rgba(231, 200, 120, 0.85),
    0 0 26px 8px rgba(231, 200, 120, 0.4);
  opacity: calc(var(--t) * (1 - var(--t)) * 4);
  pointer-events: none;
}
.s-kategoriler__thumb.is-missing .s-kategoriler__wash,
.s-kategoriler__thumb.is-missing .s-kategoriler__scan {
  display: none;
}
.s-kategoriler__thumb.is-missing.is-light {
  background: #120d0a;
}

/* ------------------------------------------------------------------ text */
.s-kategoriler__text {
  grid-area: text;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.s-kategoriler__label {
  opacity: var(--kat-e2);
  transform: translateY(calc((1 - var(--kat-e2)) * 14px));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.s-kategoriler__rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(231, 200, 120, 0.55), rgba(231, 200, 120, 0.1));
  transform: scaleX(var(--kat-e2));
  transform-origin: 0 50%;
}
.s-kategoriler__foot {
  display: grid;
  gap: 6px;
}
/* the count's wheels roll from 0 (js); the unit and the call settle in with them */
.s-kategoriler__count {
  opacity: clamp(0, calc(var(--kat-e4) * 3), 1);
}
.s-kategoriler__unit,
.s-kategoriler__go {
  opacity: clamp(0, calc(var(--kat-e4) * 1.6 - 0.6), 1);
}
.s-kategoriler__go > :first-child {
  transform: translateX(calc((1 - var(--kat-e4)) * -10px));
}
.s-kategoriler__count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--gold-bright);
}
.s-kategoriler__odoHost {
  display: inline-flex;
  font-size: clamp(38px, 3.6vw, 56px);
  line-height: 1;
}
.s-kategoriler__odo {
  font-weight: 700;
}
.s-kategoriler__unit {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.s-kategoriler__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s;
}

/* ------------------------------------------------------------------ hover / focus: lift, brighten, fan out, develop */
.s-kategoriler__card:focus-visible {
  --kat-h: 1;
  --kat-s: 1;
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 8px;
}
@media (hover: hover) {
  .s-kategoriler__card:hover {
    --kat-h: 1;
    --kat-s: 1;
  }
  .s-kategoriler__card:hover,
  .s-kategoriler__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(231, 200, 120, 0.22);
    transition-duration: 1.35s, 0.75s, 0.5s, 0.5s;
  }
}
.s-kategoriler__card:hover .s-kategoriler__frame,
.s-kategoriler__card:focus-visible .s-kategoriler__frame {
  border-color: rgba(231, 200, 120, 0.46);
}
.s-kategoriler__card:hover .s-kategoriler__go,
.s-kategoriler__card:focus-visible .s-kategoriler__go {
  color: var(--gold-bright);
}
.s-kategoriler__card:hover .s-kategoriler__goArrow,
.s-kategoriler__card:focus-visible .s-kategoriler__goArrow {
  transform: translateX(5px);
}

/* touch: develop/spread come from scroll position (JS), no transitions on them */
.s-kategoriler.is-touch .s-kategoriler__card {
  transition: none;
}

/* reduced motion: final composition — covers fanned and in colour, everything in place, nothing moves */
.s-kategoriler.is-static .s-kategoriler__card {
  --kat-h: 1;
  --kat-s: 1;
  --kat-e1: 1;
  --kat-e2: 1;
  --kat-e3: 1;
  --kat-e4: 1;
  transition: none;
  transform: none;
}
.s-kategoriler.is-static .s-kategoriler__head {
  --kat-he: 1;
}
.s-kategoriler.is-static .s-kategoriler__tone,
.s-kategoriler.is-static .s-kategoriler__col,
.s-kategoriler.is-static .s-kategoriler__wash,
.s-kategoriler.is-static .s-kategoriler__goArrow,
.s-kategoriler.is-static .s-kategoriler__allArrow {
  transition: none;
}
.s-kategoriler.is-static .s-kategoriler__card:hover .s-kategoriler__goArrow,
.s-kategoriler.is-static .s-kategoriler__card:focus-visible .s-kategoriler__goArrow,
.s-kategoriler.is-static .s-kategoriler__all:hover .s-kategoriler__allArrow {
  transform: none;
}

/* ------------------------------------------------------------------ tablet: 2 × 2 */
@media (max-width: 1023px) {
  .s-kategoriler__wrap {
    min-height: 0;
  }
  .s-kategoriler__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    grid-auto-rows: clamp(320px, 46vw, 420px);
  }
  .s-kategoriler__fan {
    --th: 82;
    margin: 12px 0 16px;
  }
  .s-kategoriler__card[data-kat="logo"] .s-kategoriler__fan {
    --th: 82;
  }
}

/* ------------------------------------------------------------------ phones: four drawers, cover stack on the left */
@media (max-width: 640px) {
  .s-kategoriler__wrap {
    gap: 26px;
    padding-top: calc(var(--nav-h) + 26px);
  }
  .s-kategoriler__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .s-kategoriler__title {
    font-size: clamp(38px, 11vw, 46px);
  }
  .s-kategoriler__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
  }
  .s-kategoriler__in {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "fan no" "fan text";
    column-gap: 14px;
    padding: 12px 14px 14px 10px;
    min-height: 136px;
  }
  .s-kategoriler__fan {
    --tw: 66;
    --th: 70;
    margin: 0;
  }
  .s-kategoriler__card[data-kat="logo"] .s-kategoriler__fan {
    --tw: 50;
    --th: 66;
  }
  .s-kategoriler__thumb[data-pos="0"] {
    --x1: -30;
    --a1: -7;
  }
  .s-kategoriler__thumb[data-pos="2"] {
    --x1: 30;
    --a1: 6.5;
  }
  .s-kategoriler__text {
    align-self: end;
    gap: 8px;
  }
  .s-kategoriler__label {
    font-size: 20px;
  }
  .s-kategoriler__odoHost {
    font-size: 32px;
  }
  .s-kategoriler__unit {
    font-size: 10px;
  }
  .s-kategoriler__go {
    font-size: 10px;
    letter-spacing: 0.16em;
    gap: 6px;
  }
  .s-kategoriler__goArrow {
    width: 20px;
  }
  .s-kategoriler__mono {
    font-size: 22px;
  }
}