/* ==========================================================================
   FBKAD — homepage sections
   ========================================================================== */

/* -------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(6.5rem, 13vh, 9rem) clamp(5rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Video slot: drop a file at assets/video/hero.mp4 and the poster fades out.
   Nothing to change in the markup beyond the <source>. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--navy-950);
}

.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: opacity 1.4s var(--ease-out);
}

/* Once a real film is playing the still steps aside. */
.hero__media.has-video .hero__still { opacity: 0; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  will-change: opacity;
}

/* The footage is bright gold particles; it sits well under half strength so
   the headline keeps its contrast. */
.hero__video--intro.is-playing { opacity: 0.55; }
.hero__video--loop.is-playing  { opacity: 0.48; }

/* The intro leaves the stack once the loop has taken over, so it cannot
   flash a stale last frame. */
.hero__video--intro.is-done { opacity: 0; visibility: hidden; }


.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(36, 64, 122, 0.42), transparent 70%),
    linear-gradient(180deg, rgba(5, 11, 26, 0.35) 0%, rgba(5, 11, 26, 0.72) 55%, var(--navy-950) 100%);
}

.hero__orb-1 { width: 46vw; height: 46vw; top: -12vh; left: -8vw; }
.hero__orb-2 { width: 38vw; height: 38vw; bottom: -14vh; right: -6vw; }
.hero__orb-3 { width: 24vw; height: 24vw; top: 32vh; right: 22vw; }

.hero__title[data-depth],
.hero__lead[data-depth] { will-change: transform; }

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
}

/* The wrapper carries the pointer and scroll transform; the image keeps its
   idle float, so the two never fight over the same property. */
.hero__badge-wrap {
  display: block;
  will-change: transform;
}

.hero__badge {
  /* Height-aware as well as width-aware: sizing on vw alone let it push the
     hero CTA below the fold on a short laptop screen. */
  width: clamp(128px, min(16.5vw, 20vh), 220px);
  aspect-ratio: 1;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
  animation: badge-float 7s var(--ease-in-out) infinite;
  will-change: transform;
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

.hero__lead {
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-dim);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 3rem);
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

.hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--yellow), transparent);
  position: relative;
  overflow: hidden;
}

.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  animation: cue 2.4s var(--ease-in-out) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* The cue is decorative and sits at the very bottom of the hero, needing about
   118px of clear space under the buttons. With the enlarged badge that only
   exists once the viewport passes ~1050px, so below that it hides rather than
   colliding with the CTA. The yellow marquee directly beneath the hero already
   signals that the page continues. */
@media (max-height: 1050px) {
  .hero__cue { display: none; }
}

/* Shorter still (laptops once browser chrome is subtracted, phones in
   landscape) could not fit badge + three display lines + lead + buttons, so
   the CTA fell below the fold. Everything shrinks together here rather than
   letting the buttons get pushed off. */
@media (max-height: 780px) {
  .hero { padding-block: clamp(5.5rem, 11vh, 7rem) clamp(2.5rem, 5vh, 4rem); }
  .hero__inner { gap: clamp(0.8rem, 1.6vw, 1.3rem); }
  .hero__badge { width: clamp(88px, min(11vw, 16vh), 140px); }
  .hero__title { font-size: clamp(2.2rem, 1rem + 4.4vw, 3.7rem); }
  .hero__lead { font-size: 1rem; }
}

/* -------------------------------------------------------- manifesto --
   Scroll-linked word highlight: each word brightens as it passes centre. */

.manifesto { position: relative; }

.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 3.1vw, 3.4rem);
  line-height: 1.28;
  letter-spacing: -0.028em;
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}

.manifesto__text .w {
  color: rgba(255, 255, 255, 0.14);
  transition: color 0.45s var(--ease-out);
}

.manifesto__text .w.on { color: var(--text-strong); }
.manifesto__text .w.hl.on { color: var(--yellow); }

/* --------------------------------------------------------------- stats -- */

.stats { border-block: 1px solid var(--line); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 780px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

.stat {
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
  text-align: center;
}

.stat:last-child { border-right: 0; }

@media (max-width: 780px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--yellow);
  display: block;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

/* ------------------------------------------------- sticky showcase -- */

.showcase__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) { .showcase__layout { grid-template-columns: 1fr; } }

.showcase__sticky {
  position: sticky;
  top: clamp(6rem, 18vh, 10rem);
}

@media (max-width: 900px) { .showcase__sticky { position: static; } }

.showcase__counter {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--yellow);
  letter-spacing: 0.08em;
  margin-top: 2rem;
  font-variant-numeric: tabular-nums;
}

.showcase__panels { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy-900);
  transition: border-color 0.5s var(--ease-out);
}

.panel:hover { border-color: var(--line-strong); }

.panel__media { position: relative; }

.panel__media .ph { border: 0; border-radius: 0; }

.panel__body {
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 0.6rem;
}

.panel__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.panel__tag {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.panel__date {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

.panel__date::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.7rem;
}

/* ------------------------------------------- başkanımızdan mesaj -- */

.message__layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 860px) {
  .message__layout { grid-template-columns: 1fr; }
  .message__portrait { max-width: 320px; }
}

.message__portrait { position: relative; }

.message__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2rem);
  line-height: 1.34;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--text-strong);
  margin: 0 0 1.6rem;
  text-wrap: pretty;
}

.message__body { color: var(--text-dim); max-width: 60ch; }

.message__sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.message__sign-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.2;
}

.message__sign-role {
  font-size: var(--fs-small);
  color: var(--yellow);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ timeline -- */

.timeline { position: relative; padding-left: clamp(1.6rem, 4vw, 3rem); }

.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--line);
}

/* Yellow fill drawn by JS as the section scrolls */
.timeline__progress {
  position: absolute;
  left: 0; top: 6px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--yellow), var(--green));
  box-shadow: 0 0 14px rgba(249, 226, 61, 0.45);
  transition: height 0.15s linear;
}

.tl-item { position: relative; padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.6rem, 4vw, 3rem) - 6px);
  top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--navy-950);
  border: 2px solid var(--line-strong);
  transition: border-color 0.5s, background 0.5s, transform 0.5s var(--ease-out);
}

.tl-item.is-in::before {
  border-color: var(--yellow);
  background: var(--yellow);
  transform: scale(1.15);
}

.tl-item__year {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--yellow);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tl-item__title { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.tl-item p { color: var(--text-dim); max-width: 58ch; }

/* ----------------------------------------------------------- gallery -- */

.gallery { overflow: hidden; }

.gallery__track {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  width: max-content;
  animation: marquee 60s linear infinite;
}

.gallery:hover .gallery__track { animation-play-state: paused; }

.gallery__group {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  padding-right: clamp(0.8rem, 1.6vw, 1.4rem);
  flex-shrink: 0;
}

.gallery__item {
  width: clamp(220px, 26vw, 380px);
  flex-shrink: 0;
  transition: transform 0.6s var(--ease-out);
}

.gallery__item:hover { transform: translateY(-8px) scale(1.015); }

/* -------------------------------------------------------------- quote -- */

.quote { text-align: center; }

.quote__mark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.6;
  color: var(--yellow);
  opacity: 0.35;
  display: block;
  margin-bottom: 1rem;
}

.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.9rem + 2.4vw, 2.7rem);
  line-height: 1.32;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "SOFT" 18, "WONK" 1;
  color: var(--text-strong);
  max-width: 24ch;
  margin: 0 auto 2rem;
  text-wrap: balance;
}

.quote__by {
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

/* ----------------------------------------------------------- join CTA -- */

.join {
  position: relative;
  background: var(--yellow);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.join::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/logo/fbkad-badge-600.png") right -8% center / auto 150% no-repeat;
  opacity: 0.10;
  mix-blend-mode: multiply;
}

.join__inner {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  justify-items: start;
  max-width: 64ch;
}

.join > .wrap { position: relative; z-index: 2; }

.join h2 {
  color: var(--ink);
  font-size: var(--fs-h1);
  letter-spacing: -0.035em;
  margin: 0;
}

.join p { color: rgba(7, 8, 8, 0.72); font-size: var(--fs-lead); }

.join .btn {
  --btn-bg: var(--navy-600);
  --btn-fg: #fff;
}

.join .btn::before { background: var(--ink); }
.join .btn:hover { color: var(--yellow); box-shadow: 0 14px 34px -14px rgba(7, 8, 8, 0.5); }

.join .eyebrow { color: rgba(7, 8, 8, 0.65); }

/* --------------------------------------------------------- page hero --
   Shorter hero used by the interior pages.                              */

.phero {
  position: relative;
  padding-block: clamp(9rem, 20vh, 14rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.phero__orb-1 { width: 40vw; height: 40vw; top: -18vh; right: -6vw; }
.phero__orb-2 { width: 28vw; height: 28vw; bottom: -20vh; left: -4vw; }

.phero__inner { position: relative; z-index: 2; max-width: 52ch; }

/* A one-word title cannot wrap, so the 52ch text column clips it and the
   reveal mask's overflow:hidden turns that into a hard cut rather than an
   overflow. This variant drops the column limit and sizes the word against
   the viewport instead. The lead below keeps its own max-width via .lead. */
.phero__inner--wide { max-width: none; }
.display--single { font-size: clamp(2rem, 11vw, 6rem); }

.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.phero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below ~0.4 the yellow muddies to olive against the near-black navy. */
  opacity: 0.45;
}

.phero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--navy-950) 22%, rgba(5, 11, 26, 0.72) 58%, rgba(5, 11, 26, 0.58)),
    linear-gradient(180deg, rgba(5, 11, 26, 0.45), transparent 40%, rgba(5, 11, 26, 0.55));
}
.phero > .wrap { position: relative; z-index: 2; }

.crumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 1.6rem;
}

.crumb a { color: var(--text-dim); transition: color 0.3s; }
.crumb a:hover { color: var(--yellow); }

/* ------------------------------------------------------ contact page -- */

.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 900px) { .contact__layout { grid-template-columns: 1fr; } }

.info-list { display: grid; gap: 1.8rem; }

.info-item { display: grid; gap: 0.35rem; }

.info-item__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 600;
}

.info-item__value { font-size: 1.05rem; color: var(--text-strong); }
.info-item a.info-item__value { transition: color 0.3s; }
.info-item a.info-item__value:hover { color: var(--yellow); }

.form { display: grid; gap: 1.2rem; }

.field { display: grid; gap: 0.55rem; }

.field label {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.95rem 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-strong);
  font: inherit;
  /* Must not drop below 16px: iOS Safari zooms the whole page when a focused
     input is smaller than that, and the visitor has to pinch back out. */
  font-size: 1rem;
  transition: border-color 0.3s, background 0.3s;
}

.field textarea { resize: vertical; min-height: 150px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.055);
}

.form__note {
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* -------------------------------------------------------- about page -- */

.values { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.value {
  background: var(--navy-950);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid;
  gap: 0.6rem;
  transition: background 0.5s var(--ease-out);
}

.value:hover { background: var(--navy-900); }

.value__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(249, 226, 61, 0.12);
  color: var(--yellow);
  margin-bottom: 0.6rem;
}

@media (min-width: 700px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .values { grid-template-columns: repeat(3, 1fr); } }

.board { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (min-width: 640px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .board { grid-template-columns: repeat(4, 1fr); } }

.member__photo { margin-bottom: 1.1rem; }
.member__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text-strong); }
.member__role { font-size: var(--fs-small); color: var(--yellow); letter-spacing: 0.05em; }

/* ====================================================== buluşmalarımız --
   One block per event: a heading with its date, then a photo grid. The first
   tile of each event spans two columns so the grid has some rhythm rather
   than reading as a contact sheet.                                        */

.event { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.event:last-child { margin-bottom: 0; }

.event__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}

.event__title { font-size: var(--fs-h2); margin: 0; }

.event__date {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 600;
  white-space: nowrap;
}

.event__count { font-size: var(--fs-small); color: var(--text-dim); }

.photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

@media (max-width: 900px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .photos { grid-template-columns: minmax(0, 1fr); } }

/* Deliberately uniform. A first tile spanning two columns doubles its height
   at 3:2 and leaves a hole beside it, and spanning two rows instead would
   crop a third of the width off a group photo. Every frame here is the same
   shape, so an even grid is both tidier and safer. */

.photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy-900);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
  isolation: isolate;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out);
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 11, 26, 0.35));
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}

.photo:hover img,
.photo:focus-visible img { transform: scale(1.045); }
.photo:hover::after { opacity: 1; }
.photo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ----------------------------------------------------------- lightbox -- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 7, 17, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
}

.lightbox__bar {
  position: absolute;
  left: 50%;
  bottom: clamp(0.8rem, 2.5vw, 1.8rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-strong);
}

.lightbox__btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-strong);
  transition: background 0.3s, color 0.3s;
}

.lightbox__btn:hover { background: var(--yellow); color: var(--ink); }

.lightbox__count {
  font-size: var(--fs-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  padding-inline: 0.6rem;
  min-width: 5.5ch;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.8rem, 2.5vw, 1.6rem);
  right: clamp(0.8rem, 2.5vw, 1.6rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  transition: background 0.3s, color 0.3s;
}

.lightbox__close:hover { background: var(--yellow); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .photo img { transition: none; }
}