/* Tedavilerimiz — Framer Arc Focus carousel */

.hk-arc {
  --hk-ink: #0f1f2e;
  --hk-muted: #8b9aab;
  --hk-blue: #307bc4;
  --hk-navy: #274760;
  --hk-sans: "Figtree", "Poppins", system-ui, sans-serif;
  --hk-ui: "Poppins", system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  color: var(--hk-ink);
  background:
    radial-gradient(900px 480px at 50% -5%, rgba(210, 234, 239, 0.55), transparent 58%),
    radial-gradient(700px 360px at 50% 100%, rgba(48, 123, 196, 0.05), transparent 55%),
    #fff;
}

.hk-arc__head {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 0.15rem;
  text-align: center;
}

.hk-arc__kicker {
  margin: 0;
  font-family: var(--hk-sans);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--hk-ink);
}

.hk-arc__body {
  position: relative;
  z-index: 1;
}

.hk-arc__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(640px, 68vw, 820px);
  margin: 0 auto;
  overflow: hidden;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.hk-arc__stage.is-dragging {
  cursor: grabbing;
}

.hk-arc__track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hk-arc__card {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity, left, top;
  backface-visibility: hidden;
}

.hk-arc__frame {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(145deg, #d8e8f0 0%, #eef4f8 42%, #c5d5e2 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 12px 28px rgba(15, 31, 46, 0.14),
    0 2px 6px rgba(15, 31, 46, 0.08);
  transform: translateZ(0);
  isolation: isolate;
}

.hk-arc__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 0 0 2px rgba(39, 71, 96, 0.12);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      transparent 42%
    );
}

.hk-arc__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(15, 31, 46, 0.42), transparent 55%),
    linear-gradient(
      to top,
      rgba(15, 31, 46, 0.38) 0%,
      rgba(39, 71, 96, 0.14) 28%,
      transparent 58%
    ),
    linear-gradient(
      115deg,
      rgba(210, 234, 239, 0.12) 0%,
      transparent 40%,
      transparent 70%,
      rgba(48, 123, 196, 0.08) 100%
    );
}

.hk-arc__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: scale(1.04);
  transform-origin: center;
  filter: none;
  transition: filter 0.35s ease;
}

/* Light glass veil — no heavy blur so photos stay sharp */
.hk-arc__glass {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(210, 234, 239, 0.08) 22%,
      rgba(255, 255, 255, 0.02) 48%,
      rgba(39, 71, 96, 0.06) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.hk-arc__glass::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 30%;
  top: 0;
  height: 36%;
  border-radius: 0 0 60% 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 100%
  );
  opacity: 0.7;
  pointer-events: none;
}

.hk-arc__card.is-active .hk-arc__frame {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 0 0 1px rgba(48, 123, 196, 0.35),
    0 18px 44px rgba(15, 31, 46, 0.22),
    0 6px 14px rgba(48, 123, 196, 0.12);
}

.hk-arc__card.is-active .hk-arc__frame::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 0 0 2px rgba(48, 123, 196, 0.22);
}

.hk-arc__card.is-active .hk-arc__frame::after {
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(15, 31, 46, 0.2), transparent 58%),
    linear-gradient(
      to top,
      rgba(15, 31, 46, 0.16) 0%,
      rgba(39, 71, 96, 0.05) 32%,
      transparent 62%
    ),
    linear-gradient(
      115deg,
      rgba(210, 234, 239, 0.1) 0%,
      transparent 42%,
      transparent 68%,
      rgba(48, 123, 196, 0.08) 100%
    );
}

.hk-arc__card.is-active .hk-arc__photo {
  filter: none;
}

.hk-arc__card.is-active .hk-arc__glass {
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(210, 234, 239, 0.04) 28%,
      transparent 52%,
      rgba(39, 71, 96, 0.03) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.hk-arc__card.is-active .hk-arc__glass::before {
  opacity: 0.55;
  height: 28%;
}

.hk-arc__card:not(.is-active) .hk-arc__glass {
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(210, 234, 239, 0.1) 24%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(15, 31, 46, 0.1) 100%
    );
}

.hk-arc__card:not(.is-active) .hk-arc__photo {
  filter: saturate(0.92) brightness(0.94);
}

.hk-arc__card:not(.is-active) .hk-arc__frame::after {
  background:
    radial-gradient(120% 85% at 50% 115%, rgba(15, 31, 46, 0.42), transparent 52%),
    linear-gradient(
      to top,
      rgba(15, 31, 46, 0.36) 0%,
      rgba(39, 71, 96, 0.14) 30%,
      transparent 60%
    );
}

.hk-arc__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 6vw, 3rem);
  text-align: center;
  pointer-events: none;
}

.hk-arc__navline,
.hk-arc__cta {
  pointer-events: auto;
}

.hk-arc__navline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.hk-arc__nav {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hk-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.hk-arc__nav:hover {
  color: var(--hk-blue);
}

.hk-arc__nav:focus-visible {
  outline: 2px solid var(--hk-blue);
  outline-offset: 3px;
}

.hk-arc__title {
  margin: 0;
  min-width: 8ch;
  max-width: min(24rem, 78vw);
  font-family: var(--hk-sans);
  font-size: clamp(1.2rem, 2.1vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--hk-ink);
}

.hk-arc__lede {
  margin: 0;
  max-width: 34rem;
  font-family: var(--hk-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--hk-muted);
  text-wrap: pretty;
}

.hk-arc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #0f1f2e;
  color: #fff !important;
  font-family: var(--hk-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  border-bottom: 0;
  transform: translateZ(0);
  transition: background 0.18s ease, transform 0.18s ease;
}

.hk-arc__cta:hover {
  background: var(--hk-blue);
  color: #fff !important;
}

.hk-arc__cta:active {
  transform: scale(0.98);
}

.hk-arc__dots {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.7;
}

.hk-arc__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  transition: width 0.18s ease, background 0.18s ease;
}

.hk-arc__dot.is-on {
  width: 18px;
  background: rgba(0, 0, 0, 0.55);
}

.hk-arc__copy.is-swap .hk-arc__title,
.hk-arc__copy.is-swap .hk-arc__lede {
  opacity: 0;
  transform: translateY(8px);
}

.hk-arc__title,
.hk-arc__lede {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (max-width: 768px) {
  .hk-arc {
    padding: 1.15rem 0 0.35rem;
  }

  .hk-arc__kicker {
    font-size: clamp(1.35rem, 5.5vw, 1.65rem);
    margin-bottom: 0.15rem;
  }

  .hk-arc__stage {
    height: 280px;
    max-height: 42svh;
    min-height: 250px;
    touch-action: pan-y;
  }

  .hk-arc__frame {
    border-radius: 16px;
  }

  /* Copy + dots leave the absolute stage and sit in normal flow */
  .hk-arc__copy {
    position: relative;
    top: auto !important;
    left: auto;
    right: auto;
    z-index: 2;
    gap: 0.55rem;
    max-width: none;
    margin: 0.85rem auto 0;
    padding: 0 1.25rem 0.15rem;
  }

  .hk-arc__navline {
    gap: 0.35rem;
  }

  .hk-arc__nav {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .hk-arc__title {
    font-size: 1.12rem;
    max-width: min(17rem, 68vw);
  }

  .hk-arc__lede {
    font-size: 0.84rem;
    line-height: 1.45;
    max-width: 22rem;
  }

  .hk-arc__cta {
    min-height: 2.85rem;
    padding: 0.8rem 1.35rem;
    font-size: 0.9rem;
    width: min(100%, 17.5rem);
  }

  .hk-arc__dots {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 2;
    margin: 0.85rem auto 0.4rem;
    opacity: 0.75;
  }

  /* Softer glass on small screens */
  .hk-arc__glass {
    background:
      linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(210, 234, 239, 0.04) 30%,
        transparent 55%,
        rgba(39, 71, 96, 0.04) 100%
      );
  }

  .hk-arc__card.is-active .hk-arc__glass {
    background:
      linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 45%,
        rgba(39, 71, 96, 0.02) 100%
      );
  }

  .hk-arc__card.is-active .hk-arc__glass::before {
    height: 22%;
    opacity: 0.4;
  }
}

@media (max-width: 480px) {
  .hk-arc__stage {
    height: 260px;
    max-height: 40svh;
    min-height: 236px;
  }

  .hk-arc__title {
    font-size: 1.05rem;
  }

  .hk-arc__lede {
    font-size: 0.8125rem;
    max-width: 19.5rem;
  }

  .hk-arc__copy {
    margin-top: 0.7rem;
    gap: 0.45rem;
  }
}

/* Extra-short phones: keep arc + copy above sticky bar */
@media (max-width: 480px) and (max-height: 720px) {
  .hk-arc__stage {
    height: 248px;
    min-height: 230px;
  }

  .hk-arc__lede {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hk-arc__title,
  .hk-arc__lede,
  .hk-arc__dot,
  .hk-arc__cta,
  .hk-arc__nav,
  .hk-arc__photo {
    transition: none;
  }
}