/* Kartvizit: İletişim bölümünün başında, assets/js/card.js çizer.
   Kart tıklayınca / Enter-Boşluk ile döner; azaltılmış harekette yalnızca solar. */

.biz-card-mount {
  margin: 44px 0 72px;
}

.biz-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px 56px;
}

/* --- Sahne: kartın boyutu ve kilit çerçevesi --- */
.biz-card__stage {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  flex: 0 0 auto;
  width: min(420px, 100%);
  aspect-ratio: 85 / 55;
  perspective: 1400px;
}

/* Kartın tamamı tek bir düğme; bağlantılar onun üstünde durur */
.biz-card__flip {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.biz-card__flip:focus-visible {
  outline: none;
}

.biz-card__tilt,
.biz-card__flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.biz-card__tilt {
  z-index: 1;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.biz-card__flipper {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.25, 1);
}

.biz-card.is-flipped .biz-card__flipper {
  transform: rotateY(180deg);
}

.biz-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 26px 44px -22px rgba(0, 0, 0, 0.75),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

/* Ön yüz sayfayla aynı koyulukta: ince kenar kartı zeminden ayırır */
.biz-card__face--front {
  outline: 1px solid var(--background-dark-70);
  outline-offset: -1px;
}

.biz-card__face--back {
  transform: rotateY(180deg);
}

.biz-card__face svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bağlantılar düğmenin üstünde tıklanır */
.biz-card__link {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.biz-card__link .biz-card__hit {
  pointer-events: all;
  stroke: transparent;
  stroke-width: 0.3;
}

.biz-card__link text {
  transition: fill var(--transition-default);
}

.biz-card__link:hover text,
.biz-card__link:focus-visible text {
  fill: var(--accent);
}

.biz-card__link:focus-visible .biz-card__hit {
  stroke: var(--accent);
}

/* Kilit köşeleri: üzerine gelince ya da klavyeyle odaklanınca kart "kilitlenir" */
.biz-card__lock {
  --s: 22px;
  --w: 2px;
  position: absolute;
  inset: -12px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 0 0 / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 100% 0 / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 100% 0 / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 0 100% / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 0 100% / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 100% 100% / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 100% 100% / var(--w) var(--s);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.biz-card__flip:focus-visible ~ .biz-card__lock {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .biz-card__stage:hover .biz-card__lock {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Yan bilgi --- */
.biz-card__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 300px;
  padding-bottom: 2px;
}

.biz-card__meta p {
  margin: 0;
}

.biz-card__eyebrow {
  font-size: var(--font-size-13);
  font-weight: 500;
  color: var(--accent);
}

.biz-card__sides {
  display: flex;
  gap: 22px;
}

.biz-card__sides button {
  padding: 2px 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-white-60);
  cursor: pointer;
  transition: color var(--transition-default), border-color var(--transition-default);
}

.biz-card__sides button:hover {
  color: var(--color-white-100);
}

.biz-card__sides button[aria-pressed="true"] {
  color: var(--color-white-100);
  border-bottom-color: var(--accent);
}

.biz-card__note {
  font-size: var(--font-size-13);
  line-height: 1.6;
  color: var(--color-white-60);
}




/* --- Telefon: kart tam genişlik, bilgi altta --- */
@media screen and (max-width: 600px) {
  .biz-card-mount {
    margin: 32px 0 56px;
  }

  .biz-card__lock {
    --s: 16px;
    inset: -8px;
  }

  .biz-card__meta {
    max-width: none;
    width: 100%;
  }

}

/* --- Azaltılmış hareket: dönme yok, yüzler yerinde solar --- */
@media (prefers-reduced-motion: reduce) {
  .biz-card__tilt,
  .biz-card__flipper,
  .biz-card.is-flipped .biz-card__flipper {
    transform: none;
    transition: none;
  }

  .biz-card__face {
    transition: opacity 0.2s ease;
  }

  .biz-card__face--back {
    transform: none;
    opacity: 0;
  }

  .biz-card.is-flipped .biz-card__face--front {
    opacity: 0;
  }

  .biz-card.is-flipped .biz-card__face--back {
    opacity: 1;
  }

  .biz-card__lock {
    transition: none;
  }
}