/* Ana sayfaya özel bölümler: işlem gücü (RK3576), kameralar ızgarası ve dashcam ailesi */

/* ---------------------------------------------------------------- işlem gücü: NVR'den yükselen çip */

.sahne.guc { height: 340vh; background: var(--siyah); color: var(--koyu-metin); }
.guc .sahne-sabit { display: block; }
.guc-ust {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--ust-y) + clamp(28px, 6vh, 64px));
  text-align: center;
  z-index: 2;
}
.guc-ust .t-bas1 { margin-top: 8px; }
.guc-alan { position: absolute; inset: 0; }
.guc-nvr {
  position: absolute;
  /* plakanın ortası (ışık noktası) görselin ortasından %8,7 solda: cihazı kaydırıp ışığı sayfa ortasına getir */
  left: calc(50% + min(620px, 70vw) * .087);
  bottom: 6vh;
  width: min(620px, 70vw);
  transform: translate(-50%, 0);
  /* render siyah zeminde koyu kalmasın: hafif aydınlatma + kenar ışığı */
  filter: brightness(1.28) contrast(1.06) drop-shadow(0 0 1px rgba(255, 255, 255, .25)) drop-shadow(0 -10px 60px rgba(255, 255, 255, .1));
  will-change: transform, opacity;
}
.guc-cip, .guc-isik {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(170px, 21vw, 300px);
  aspect-ratio: 1;
  will-change: transform, opacity;
}
.guc-isik {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 172, 1, .55) 0%, rgba(254, 172, 1, .18) 38%, rgba(254, 172, 1, 0) 70%);
  filter: blur(18px);
  width: clamp(260px, 34vw, 480px);
}
.guc-cip { perspective: 900px; }
.guc-cip-yuz {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 18px;
  /* kapak: koyu metal yüzey + metalik kenar (çift arka plan ile ince degrade çerçeve) */
  border: 1.5px solid transparent;
  background:
    linear-gradient(150deg, #2f3238 0%, #18191c 38%, #0d0e10 100%) padding-box,
    conic-gradient(from 210deg, #8d9098, #2a2c30, #b9bcc3, #2a2c30, #8d9098) border-box;
  box-shadow:
    0 0 90px rgba(254, 172, 1, .26),
    0 40px 80px rgba(0, 0, 0, .75);
  transform: rotateX(var(--egim, 16deg)) rotateZ(var(--don, 0deg));
  transform-style: preserve-3d;
}
.guc-cip-yuz::before {
  /* taşıyıcı kart (substrate) ve ince temas noktaları */
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 24px;
  background:
    repeating-linear-gradient(90deg, #e2bd6a 0 2px, transparent 2px 7px) top 3px left 12% / 76% 6px no-repeat,
    repeating-linear-gradient(90deg, #e2bd6a 0 2px, transparent 2px 7px) bottom 3px left 12% / 76% 6px no-repeat,
    repeating-linear-gradient(0deg, #e2bd6a 0 2px, transparent 2px 7px) left 3px top 12% / 6px 76% no-repeat,
    repeating-linear-gradient(0deg, #e2bd6a 0 2px, transparent 2px 7px) right 3px top 12% / 6px 76% no-repeat,
    linear-gradient(150deg, #141518, #08090a);
  border: 1px solid rgba(254, 172, 1, .22);
  z-index: -1;
}
.guc-cip-yuz::after {
  /* yüzeyde gezinen ışık yansıması */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 17px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 260% 100%;
  animation: cip-isilti 5s var(--egri) infinite;
}
@keyframes cip-isilti { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
.guc-cip-yuz small {
  font-size: clamp(13px, 1.45vw, 21px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #f5f5f7;
  opacity: .92;
}
.guc-cip-yuz span {
  margin-top: 2px;
  font-size: clamp(34px, 4.3vw, 62px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #d9d9de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(254, 172, 1, .45));
}
.guc-cip-yuz em {
  display: block;
  width: 56%;
  height: 1px;
  margin: clamp(8px, 1vw, 14px) auto;
  background: linear-gradient(90deg, rgba(254, 172, 1, 0), rgba(254, 172, 1, .9), rgba(254, 172, 1, 0));
}
.guc-cip-yuz b {
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sari);
}
/* yüzey: ince devre ağı ve iç kalıp çerçevesi */
.guc-cip-ag {
  position: absolute;
  inset: 13%;
  border-radius: 10px;
  border: 1px solid rgba(254, 172, 1, .2);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px);
  box-shadow: inset 0 0 30px rgba(254, 172, 1, .06);
}
/* kenarda dolaşan sarı ışık */
@property --cip-aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.guc-cip-cerceve {
  position: absolute;
  inset: -1.5px;
  border-radius: 18px;
  padding: 1.5px;
  background: conic-gradient(from var(--cip-aci), transparent 0 70%, rgba(254, 172, 1, .2) 80%, #FFBC33 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cip-cerceve 4s linear infinite;
  pointer-events: none;
}
@keyframes cip-cerceve { to { --cip-aci: 360deg; } }
.guc-cip-yuz small, .guc-cip-yuz span, .guc-cip-yuz em, .guc-cip-yuz b, .guc-cip-not { position: relative; z-index: 1; }
.guc-cip-not {
  margin-top: clamp(4px, .5vw, 8px);
  font-style: normal;
  font-size: clamp(9px, .8vw, 12px);
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(245, 245, 247, .45);
}
.guc-pin1 {
  position: absolute;
  left: 9%; top: 9%;
  width: clamp(6px, .7vw, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}


.guc-bilgi {
  position: absolute;
  left: 55%;
  top: 52%;
  width: min(460px, 42vw);
  opacity: 0;
  transform: translateY(-50%);
}
.guc-tops { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.guc-tops strong {
  font-size: clamp(80px, 9.5vw, 150px);
  font-weight: 700;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffd36b 0%, #feac01 60%, #c98500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guc-tops span { font-size: clamp(28px, 3vw, 44px); font-weight: 700; color: var(--sari); }
.guc-alt { margin-top: 6px; font-size: clamp(19px, 1.8vw, 24px); color: var(--koyu-ikincil); }
.guc-bilgi ul { margin-top: 22px; display: grid; gap: 12px; }
.guc-bilgi li { font-size: 15px; line-height: 1.45; color: var(--koyu-ikincil); padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.guc-bilgi li b { display: block; font-size: 19px; font-weight: 600; color: var(--koyu-metin); margin-bottom: 2px; }

@media (max-width: 834px) {
  .sahne.guc { height: 300vh; }
  .guc-cip, .guc-isik { top: 46%; }
  .guc-bilgi { left: 50%; top: auto; bottom: 5vh; width: min(92vw, 420px); transform: none !important; margin-left: calc(min(92vw, 420px) / -2); text-align: center; }
  .guc-tops { justify-content: center; }
  .guc-bilgi ul { margin-top: 14px; gap: 8px; text-align: left; }
  .guc-bilgi li { font-size: 13px; padding-top: 8px; }
  .guc-bilgi li b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sahne.guc { height: auto; }
  .guc .sahne-sabit { position: relative; height: auto; min-height: 100vh; }
  .guc-bilgi { opacity: 1 !important; }
}


/* yükseliş izi: plakadan çipe ince ışık ipliği + yumuşak hale, süzülen zerreler; plakadaki ışık */
.guc-iplik {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 1000px;
  transform-origin: 0 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}
.guc-iplik::before, .guc-iplik::after { content: ""; position: absolute; top: 0; bottom: 0; }
.guc-iplik::before {
  /* parlak çekirdek */
  left: -1px; width: 2px;
  background: linear-gradient(to top, #fff6dc 0%, rgba(255, 211, 107, .95) 25%, rgba(254, 172, 1, .55) 70%, rgba(254, 172, 1, 0) 100%);
  border-radius: 2px;
}
.guc-iplik::after {
  /* yumuşak hale */
  left: -26px; width: 52px;
  background: linear-gradient(to top, rgba(254, 172, 1, .32) 0%, rgba(254, 172, 1, .12) 55%, rgba(254, 172, 1, 0) 100%);
  filter: blur(14px);
}
.guc-zerre { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.guc-zerre i {
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffe2a3;
  box-shadow: 0 0 6px 1px rgba(254, 172, 1, .85);
  opacity: 0;
  will-change: transform, opacity;
}
.guc-taban {
  position: absolute;
  width: clamp(90px, 10vw, 150px);
  height: clamp(18px, 2vw, 28px);
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff6dc 0%, rgba(254, 172, 1, .85) 22%, rgba(254, 172, 1, .25) 52%, rgba(254, 172, 1, 0) 72%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}
.guc-cip, .guc-isik { z-index: 2; }

/* ---------------------------------------------------------------- kameralar (Gözler) */

.kamera-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kamera-kart {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: #111113;
  overflow: hidden;
  transition: transform .6s var(--egri-yay), background .4s;
}
.kamera-kart:hover { transform: translateY(-6px); background: #19191b; }
.kamera-kart-gorsel {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 62%);
}
.kamera-kart-gorsel img { width: 72%; transition: transform 1.2s var(--egri-yay); }
.kamera-kart:hover .kamera-kart-gorsel img { transform: scale(1.06); }
.kamera-kart-metin { padding: 4px 24px 26px; }
.kamera-kart-metin small { display: block; font-size: 13px; font-weight: 600; color: var(--sari); }
.kamera-kart-metin strong { display: block; margin-top: 4px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--koyu-metin); }
.kamera-kart-metin span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--koyu-ikincil); }
@media (max-width: 1023px) { .kamera-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kamera-izgara { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- dashcam ailesi */

.dashcam-aile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.dashcam-gorsel {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 55%, #ffffff, #f5f5f7 70%);
}
.dashcam-gorsel img { width: 72%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18)); }
.dashcam-liste { display: grid; margin-top: 28px; border-top: 1px solid var(--cizgi); }
.dashcam-liste a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--cizgi);
  transition: padding .4s var(--egri-yay);
}
.dashcam-liste a:hover { padding-left: 10px; }
.dashcam-liste strong { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.dashcam-liste span { grid-column: 1; font-size: 15px; color: var(--ikincil); }
.dashcam-liste em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 14px; color: var(--sari-link); white-space: nowrap; }
@media (max-width: 834px) { .dashcam-aile { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- DMS / ADAS / BSD kartları */

.yetenek { padding-top: clamp(40px, 6vw, 80px); }
.yetenek-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.yetenek-kart {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: #111113;
  overflow: hidden;
}
.yetenek-cizim {
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  padding: 18px 18px 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(254, 172, 1, .07), rgba(254, 172, 1, 0) 65%);
}
.yetenek-cizim svg { width: 100%; height: 100%; overflow: visible; }
.yetenek-metin { padding: 8px 28px 30px; }
.yetenek-metin h3 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--koyu-metin); }
.yetenek-metin h3 span { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--sari); margin-bottom: 4px; }
.yetenek-metin p { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--koyu-ikincil); }

/* ortak çizim dili: koyu zemin, gri çizgi, sarı tespit; döngü 4,5 sn (normal → tehlike → uyarı) */
.yetenek svg * { transform-box: view-box; }
.yetenek .yt-kenar { fill: none; stroke: #3a3d44; stroke-width: 2; }
.yetenek .yt-akan { fill: none; stroke: #5a5d64; stroke-width: 2.5; stroke-dasharray: 10 12; }
.yetenek .yt-kasa { fill: #2b2d33; stroke: #5a5d64; stroke-width: 1.5; }
.yetenek .yt-cam { fill: #111215; }
.yetenek .yt-teker { fill: #0b0b0d; }
.yetenek .yt-plaka { fill: #4a4d55; }
.yetenek .yt-stop { fill: #b3261e; }
.yetenek .yt-far { fill: #fff4d6; opacity: .85; }
.yetenek .yt-tavan { fill: #34363c; stroke: #45484f; }
.yetenek .yt-tavan-cizgi { stroke: #3a3d44; stroke-width: 1.5; }
.yetenek .yt-ayna { fill: #3a3d44; }
.yetenek .yt-ayna-isik { fill: var(--sari); opacity: 0; }
.yetenek .yt-etiket rect { fill: var(--sari); }
.yetenek .yt-etiket text { fill: #1d1d1f; font: 700 14px var(--font); letter-spacing: 0; text-anchor: middle; }
.yetenek .yt-etiket { opacity: 0; }

/* ADAS */
.yetenek .yt-serit-tespit { fill: none; stroke: url(#yt-serit-isik); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; filter: drop-shadow(0 0 4px rgba(254, 172, 1, .6)); }
.yetenek .yt-on-arac { transform: translate(160px, 96px) scale(.45); }
.yetenek .yt-tespit { fill: none; stroke: var(--sari); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.yetenek .yt-ttc { opacity: 0; }
.yetenek .yt-ttc rect { fill: rgba(255, 59, 48, .16); stroke: #ff3b30; stroke-width: 1.2; }
.yetenek .yt-ttc text { fill: #ff6961; font: 700 12px var(--font); text-anchor: middle; font-variant-numeric: tabular-nums; }

/* DMS */
.yetenek .yt-ag { fill: none; stroke: #2a2c31; stroke-width: 1; }
.yetenek .yt-hat { fill: none; stroke: #4a4d55; stroke-width: 1.3; stroke-linejoin: round; }
.yetenek .yt-nokta circle { fill: #9a9da4; }
.yetenek .yt-goz { transform-box: fill-box; transform-origin: center; }
.yetenek .yt-kose { fill: none; stroke: #4a4d53; stroke-width: 3; stroke-linecap: round; }

/* BSD */
.yetenek .yt-kor { fill: url(#yt-kor-alan); stroke: rgba(254, 172, 1, .5); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .25; }
.yetenek .yt-yan-arac { transform: translateY(130px); }
.yetenek .yt-dalga { fill: none; stroke: var(--sari); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }

/* yaya, hız, tarama, EAR değeri, sinyal */
.yetenek .yt-yaya circle { fill: #8a8d94; }
.yetenek .yt-yaya path { fill: none; stroke: #8a8d94; stroke-width: 2; stroke-linecap: round; }
.yetenek .yt-yaya .yt-yaya-kutu { stroke: var(--sari); stroke-width: 1.6; opacity: 0; }
.yetenek .yt-hiz rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .14); }
.yetenek .yt-hiz text { fill: #c7c7cc; font: 600 11px var(--font); text-anchor: middle; font-variant-numeric: tabular-nums; }
.yetenek .yt-tarama { opacity: 0; }
.yetenek .yt-sinyal { fill: #FF9F0A; opacity: 0; filter: drop-shadow(0 0 3px #FF9F0A); }

.yetenek .yt-tel { transform: translateY(70px); opacity: 0; }
.yetenek .yt-el { fill: none; stroke: #6b6e75; stroke-width: 10; stroke-linecap: round; }
.yetenek .yt-tel-govde { fill: #2b2d33; stroke: #8a8d94; stroke-width: 1.5; }
.yetenek .yt-tel-tespit { fill: none; stroke: var(--sari); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }

/* animasyonlar yalnız kart görünürken */
.yetenek-kart.gorundu .yt-tel { animation: yt-tel 4.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes yt-tel { 0%, 18% { transform: translateY(70px); opacity: 0; } 22% { opacity: 1; } 36%, 86% { transform: none; opacity: 1; } 96%, 100% { transform: translateY(70px); opacity: 0; } }
.yetenek-kart.gorundu .yt-tel-tespit { animation: yt-tespit-tel 4.5s var(--egri) infinite; }
@keyframes yt-tespit-tel { 0%, 36% { opacity: 0; stroke: var(--sari); } 40%, 48% { opacity: 1; stroke: var(--sari); } 54%, 86% { opacity: 1; stroke: #ff3b30; } 94%, 100% { opacity: 0; } }
.yetenek-kart.gorundu .yt-yaya-kutu { animation: yt-yaya 4.5s var(--egri) infinite; }
@keyframes yt-yaya { 0%, 8% { opacity: 0; } 14%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
.yetenek-kart.gorundu .yt-tarama { animation: yt-tarama 2.2s linear infinite; }
@keyframes yt-tarama { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.yetenek-kart.gorundu .yt-sinyal { animation: yt-sinyal 4.5s steps(1) infinite; }
@keyframes yt-sinyal {
  0% { opacity: 0; }
  20%, 28%, 36%, 44%, 52%, 60%, 68%, 76% { opacity: 1; }
  24%, 32%, 40%, 48%, 56%, 64%, 72%, 80%, 100% { opacity: 0; }
}
.yetenek-kart.gorundu .yt-akan { animation: yt-ak .6s linear infinite; }
@keyframes yt-ak { to { stroke-dashoffset: -22; } }
.yetenek-kart.gorundu .yt-etiket { animation: yt-etiket 4.5s var(--egri) infinite; }
@keyframes yt-etiket { 0%, 48% { opacity: 0; transform: translateY(4px); } 55%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

.yetenek-kart.gorundu .yt-serit-tespit { animation: yt-serit 4.5s var(--egri) infinite; }
@keyframes yt-serit { 0% { stroke-dashoffset: 200; opacity: 1; } 25%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.yetenek-kart.gorundu .yt-on-arac { animation: yt-yaklas 4.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes yt-yaklas {
  0% { transform: translate(160px, 92px) scale(.4); opacity: 0; }
  8% { opacity: 1; }
  55%, 88% { transform: translate(160px, 146px) scale(1.2); opacity: 1; }
  100% { transform: translate(160px, 146px) scale(1.2); opacity: 0; }
}
.yetenek-kart.gorundu .yt-tespit { animation: yt-tespit 4.5s var(--egri) infinite; }
@keyframes yt-tespit { 0%, 12% { opacity: 0; stroke: var(--sari); } 20%, 45% { opacity: 1; stroke: var(--sari); } 55%, 88% { opacity: 1; stroke: #ff3b30; } 100% { opacity: 0; stroke: #ff3b30; } }
.yetenek-kart.gorundu .yt-stop { animation: yt-stop 4.5s var(--egri) infinite; }
@keyframes yt-stop { 0%, 45% { fill: #b3261e; filter: none; } 55%, 88% { fill: #ff3b30; filter: drop-shadow(0 0 3px #ff3b30); } 100% { fill: #b3261e; } }
.yetenek-kart.gorundu .yt-ttc { animation: yt-etiket 4.5s var(--egri) infinite; }

.yetenek-kart.gorundu .yt-goz { animation: yt-goz 4.5s var(--egri) infinite; }
@keyframes yt-goz { 0%, 12% { transform: scaleY(1); } 15% { transform: scaleY(.15); } 18%, 70% { transform: scaleY(1); } 73% { transform: scaleY(.15); } 76%, 100% { transform: scaleY(1); } }
.yetenek-kart.gorundu .yt-kose { animation: yt-kose 4.5s var(--egri) infinite; }
@keyframes yt-kose { 0%, 44% { stroke: #4a4d53; } 52%, 88% { stroke: var(--sari); } 100% { stroke: #4a4d53; } }

.yetenek-kart.gorundu .yt-yan-arac { animation: yt-yan 4.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes yt-yan { 0% { transform: translateY(130px); } 48%, 84% { transform: translateY(0); } 100% { transform: translateY(-170px); } }
.yetenek-kart.gorundu .yt-kor { animation: yt-kor 4.5s var(--egri) infinite; }
@keyframes yt-kor { 0%, 40% { opacity: .25; } 50%, 84% { opacity: 1; } 96%, 100% { opacity: .25; } }
.yetenek-kart.gorundu .yt-dalga { animation: yt-dalga 1.5s var(--egri) infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes yt-dalga { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.yetenek-kart.gorundu .yt-ayna-isik { animation: yt-ayna 4.5s steps(1) infinite; }
@keyframes yt-ayna { 0%, 48% { opacity: 0; } 52%, 58%, 66%, 74%, 82% { opacity: 1; } 55%, 62%, 70%, 78%, 86%, 100% { opacity: 0; } }

@media (max-width: 900px) { .yetenek-izgara { grid-template-columns: 1fr; } .yetenek-cizim { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) {
  .yetenek .yt-etiket, .yetenek .yt-ttc, .yetenek .yt-tespit { opacity: 1; }
  .yetenek .yt-serit-tespit { stroke-dashoffset: 0; }
  .yetenek .yt-on-arac { transform: translate(160px, 146px) scale(1.2); }
  .yetenek .yt-yan-arac { transform: none; }
  .yetenek .yt-kor { opacity: 1; }
}

/* ---------------------------------------------------------------- VR-PRO: önce ön yüz (yol), sonra kabin yüzü */

.sahne.pro { height: 450vh; }
.sahne.pro .pro-cevir {
  position: relative;
  width: 58%;
  display: grid;
  transform: scale(calc(.86 + var(--p, 0) * .14)) rotate(calc(-4deg + var(--p, 0) * 4deg));
  will-change: transform;
  transition: translate .9s var(--egri-yay), scale .9s var(--egri-yay);
}
/* rapor adımı: cihaz sola kayar, kart boşalan sağ tarafta açılır */
.sahne.pro[data-yuz="rapor"] .pro-cevir { translate: -26% 0; scale: .9; }
@media (max-width: 834px) { .sahne.pro[data-yuz="rapor"] .pro-cevir { translate: -38% 0; } }
.sahne-cihaz .pro-yuz {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .7s var(--egri), transform .9s var(--egri-yay);
}
.sahne.pro[data-yuz="on"] .yuz-on,
.sahne.pro[data-yuz="kabin"] .yuz-kabin,
.sahne.pro[data-yuz="rapor"] .yuz-kabin { opacity: 1; transform: none; }
/* 4 MP lens vurgusu: lensin çevresinden yayılan halka */
.sahne.pro .lens-halka { fill: none; stroke: var(--sari); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.sahne.pro g.aktif .lens-halka { animation: lens-halka 2.2s var(--egri) infinite; }
.sahne.pro g.aktif .lens-halka.ikinci { animation-delay: 1.1s; }
@keyframes lens-halka { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.sahne.pro .pro-rapor .satir { opacity: 0; }
.sahne.pro g.aktif .satir { animation: pro-gir .5s var(--egri) both; animation-delay: calc(.5s + var(--i) * .16s); }
@keyframes pro-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sahne.pro .rapor-kart { fill: #fff; stroke: #e5e5ea; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .14)); }
.sahne.pro .rapor-baslik { font: 700 15px var(--font); letter-spacing: -.01em; }
.sahne.pro .r-plaka { font: 600 10.5px var(--font); letter-spacing: .04em; fill: var(--ikincil); }
.sahne.pro .r-alt { font: 500 11px var(--font); fill: var(--ikincil); }
.sahne.pro .rapor-cizgi { stroke: #e5e5ea; }
.sahne.pro .satir .r-ad { font: 600 12.5px var(--font); }
.sahne.pro .satir .r-yer { font: 500 10.5px var(--font); fill: var(--ucuncul); }
.sahne.pro .satir .saat { font: 500 12px var(--font); fill: var(--ikincil); font-variant-numeric: tabular-nums; }
.sahne.pro .satir .r-ikon { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sahne.pro .satir .r-video { fill: #f2f2f7; }
.sahne.pro .satir .r-oynat { fill: var(--metin); }
.sahne.pro .r-cubuk { transform-box: fill-box; transform-origin: left; }
.sahne.pro g.aktif .r-cubuk { animation: r-cubuk .8s var(--egri) .3s both; }
@keyframes r-cubuk { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sahne.pro { height: auto; }
  .sahne.pro .lens-halka { animation: none; opacity: 0; }
  .sahne.pro .pro-rapor .satir { opacity: 1; animation: none; }
}