.cmc-ogretici-perde {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cmc-z-katman, 300) + 6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.cmc-ogretici-perde--aktif {
  pointer-events: auto;
  opacity: 1;
}

.cmc-ogretici-perde--tam {
  background: color-mix(in srgb, var(--cmc-yuzey-zemin, #0f172a) 48%, transparent);
  backdrop-filter: blur(7px) saturate(0.88);
  -webkit-backdrop-filter: blur(7px) saturate(0.88);
}

.cmc-ogretici-perde--delik {
  transition:
    opacity 0.28s ease,
    clip-path 0.22s ease,
    -webkit-clip-path 0.22s ease;
}

.cmc-ogretici-cerceve {
  position: fixed;
  z-index: calc(var(--cmc-z-katman, 300) + 10);
  pointer-events: none;
  border-radius: var(--cmc-radius-md);
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    top 0.22s ease,
    left 0.22s ease,
    width 0.22s ease,
    height 0.22s ease;
  box-shadow:
    0 0 0 2px var(--cmc-accent),
    0 0 0 6px color-mix(in srgb, var(--cmc-accent) 22%, transparent),
    0 12px 40px rgb(0 0 0 / 22%);
}

.cmc-ogretici-cerceve--aktif {
  opacity: 1;
  transform: scale(1);
}

.cmc-ogretici-kart {
  position: fixed;
  z-index: calc(var(--cmc-z-katman, 300) + 16);
  max-width: min(380px, calc(100vw - var(--cmc-space-8)));
  padding: var(--cmc-space-4);
  border-radius: var(--cmc-radius-lg);
  background: var(--cmc-yuzey-yuzen);
  border: 1px solid color-mix(in srgb, var(--cmc-kenar) 80%, var(--cmc-accent) 20%);
  box-shadow:
    var(--cmc-golge-md),
    0 20px 48px rgb(0 0 0 / 16%);
  pointer-events: auto;
  animation: cmc-ogretici-kart-giris 0.26s ease;
}

@keyframes cmc-ogretici-kart-giris {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cmc-ogretici-kart__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cmc-space-3);
  margin-bottom: var(--cmc-space-3);
}

.cmc-ogretici-kart__adim {
  font-size: var(--cmc-font-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmc-accent);
}

.cmc-ogretici-kart__ilerleme {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cmc-kenar) 70%, transparent);
  overflow: hidden;
}

.cmc-ogretici-kart__ilerleme-dolgu {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--cmc-accent),
    color-mix(in srgb, var(--cmc-accent) 65%, var(--cmc-basari, #22c55e))
  );
  transition: width 0.25s ease;
}

.cmc-ogretici-kart__baslik {
  margin: 0 0 var(--cmc-space-2);
  font-size: var(--cmc-font-md);
  font-weight: 600;
  color: var(--cmc-metin);
  line-height: 1.35;
}

.cmc-ogretici-kart__metin {
  margin: 0 0 var(--cmc-space-4);
  color: var(--cmc-metin-zayif);
  font-size: var(--cmc-font-sm);
  line-height: 1.55;
}

.cmc-ogretici-kart__alt {
  display: flex;
  gap: var(--cmc-space-2);
  justify-content: flex-end;
  align-items: center;
}

.cmc-ogretici-hedef {
  position: relative;
  z-index: calc(var(--cmc-z-katman, 300) + 11);
}

body.cmc-ogretici-acik {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cmc-ogretici-perde--tam {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(15 23 42 / 58%);
  }

  .cmc-ogretici-cerceve,
  .cmc-ogretici-kart {
    animation: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .cmc-ogretici-kart {
    left: var(--cmc-space-4) !important;
    right: var(--cmc-space-4);
    max-width: none;
    width: auto;
  }
}