/* KARTAP CMS 2.7 ziyaretçi ekranları ve etkileşim düzeltmeleri */
html,
body,
#root {
  min-height: 100%;
}

body {
  background: #f8f6f0;
}

/* Karşılaştırma kartında yalnızca tutamak sürüklemeyi yakalar; Keşfet bağlantısı tıklanabilir kalır. */
.kartap-compare-range {
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.kartap-compare-range::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.kartap-compare-range::-webkit-slider-thumb {
  width: 58px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.kartap-compare-range::-moz-range-track {
  height: 100%;
  border: 0;
  background: transparent;
}

.kartap-compare-range::-moz-range-thumb {
  width: 58px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
}

.kartap-compare-link {
  z-index: 30;
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* Görselsiz, ekranı tam dolduran ve alt boşluk oluşturmayan 404 ekranı. */
.kartap-404 {
  min-height: 100dvh !important;
  padding-top: 86px !important;
  background:
    radial-gradient(circle at 50% 42%, rgb(12 145 169 / 11%), transparent 31%),
    linear-gradient(135deg, #fbfaf6, #f2eee4) !important;
}

.kartap-404-grid {
  opacity: .42;
  background-image:
    linear-gradient(rgb(23 53 68 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 53 68 / 7%) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 28%, transparent 73%);
  mask-image: radial-gradient(circle at center, #000 0 28%, transparent 73%);
  animation: kartapGridDrift 18s linear infinite;
}

.kartap-404-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vmin, 650px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgb(179 134 67 / 18%);
  border-radius: 50%;
  animation: kartapOrbit 24s linear infinite;
}

.kartap-404-orbit::before,
.kartap-404-orbit::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px dashed rgb(12 129 150 / 16%);
  transform: rotate(45deg);
}

.kartap-404-orbit::after {
  inset: 33%;
  border-style: solid;
  border-color: rgb(23 53 68 / 10%);
}

.kartap-404-orbit--two {
  width: min(48vmin, 430px);
  animation-duration: 17s;
  animation-direction: reverse;
}

.kartap-404-beacon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #0c8196;
  box-shadow: 0 0 0 0 rgb(12 129 150 / 28%);
  animation: kartapBeacon 2.2s ease-out infinite;
}

.kartap-404-code {
  font-size: clamp(6rem, 17vw, 12rem);
  line-height: .72;
  letter-spacing: -.075em;
  text-shadow: none !important;
  background: linear-gradient(115deg, #8b6430, #d3af6c 50%, #8b6430);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: kartapShimmer 5s ease-in-out infinite;
}

/* Bakım ekranı hareketleri düşük yoğunluklu ve içerikten bağımsızdır. */
.maintenance-backdrop {
  transform: scale(1.035);
  animation: maintenanceBackdrop 20s ease-in-out infinite alternate;
}

.maintenance-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(circle, #d3af6c 0 1px, transparent 1.5px),
    radial-gradient(circle, #0c91a9 0 1px, transparent 1.5px);
  background-position: 0 0, 37px 61px;
  background-size: 94px 94px, 128px 128px;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 78%);
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
  animation: maintenanceParticles 28s linear infinite;
}

.prose-kartap video,
.rich-editor video {
  width: 100%;
  max-height: min(72vh, 760px);
  background: #071f2d;
}

@keyframes kartapGridDrift {
  to { background-position: 52px 52px, 52px 52px; }
}

@keyframes kartapOrbit {
  to { transform: rotate(360deg); }
}

@keyframes kartapBeacon {
  0% { box-shadow: 0 0 0 0 rgb(12 129 150 / 34%); }
  75%, 100% { box-shadow: 0 0 0 38px rgb(12 129 150 / 0%); }
}

@keyframes kartapShimmer {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes maintenanceBackdrop {
  from { transform: scale(1.035) translate3d(-.4%, -.4%, 0); }
  to { transform: scale(1.09) translate3d(.5%, .5%, 0); }
}

@keyframes maintenanceParticles {
  to { background-position: 94px 94px, -91px 189px; }
}

@media (max-width: 640px) {
  .kartap-404 {
    min-height: 100dvh !important;
    padding-top: 72px !important;
  }

  .kartap-404-orbit {
    width: min(92vw, 500px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kartap-404-grid,
  .kartap-404-orbit,
  .kartap-404-beacon,
  .kartap-404-code,
  .maintenance-backdrop,
  .maintenance-particles {
    animation: none !important;
  }
}