/* ==========================================================================
   Yenilikler / surum notlari (Genisleme G2, B.9; sahibin istegiyle yeniden tasarim): Views/sayfalar/yenilikler.php. Yalniz bu sayfada yuklenir.
   Ic hero (sitenin takvim seridi) + "Son surum" hapi; acik lavanta bolum (isiklar, kose nokta desenleri). Baslik + YATAY zaman
   cizelgesi (masaustunde yalniz parkur .ov-yn-yatay basliktan sonra GSAP ile pinlenir, JS .is-pinli). Yatay kartlar: solda surum / tarih / baslik / tur
   cipleri, sagda kendi icinde kayan madde listesi (alt solma + ipucu). Ikon ve rozetler sitenin duz dili (.ov-kayit__rozet /
   .ov-gizli__rozet kalibi): gradyan kare ikonlar, beyaz hap cipler; 3B yok. Sonda acik "oneri" karti: sahte oneri kutusu
   (daktilo, ucan cipler). Giris bir kez oynar (.ov-yn-hareket, JS); suzulme animasyonlari hareket azaltmada durur.
   Renkler sitenin paletinden: mor #7c4dd6 / #5b3fb3, gece #17102a, lavanta #f8f5ff, yazi #1c1540 / #8a82a8.
   ========================================================================== */

/* --- Hero: son surum hapi ------------------------------------------------ */
.ov-yn-son {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 22px;
  padding: 9px 18px 9px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 30px -12px rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s ease;
}

.ov-yn-son:hover,
.ov-yn-son:focus-visible {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.ov-yn-son b {
  font-family: var(--font-heading);
  color: #d9c4ff;
}

.ov-yn-son__nabiz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ef0b6;
  box-shadow: 0 0 0 4px rgba(126, 240, 182, .18), 0 0 14px rgba(126, 240, 182, .8);
}

.ov-yn-son__tarih {
  color: rgba(255, 255, 255, .64);
  font-weight: 500;
}

.ov-yn-son i {
  color: #c4b0ff;
  font-size: 13px;
}

/* --- Govde: lavanta bolum ------------------------------------------------ */
.ov-yn-govde {
  position: relative;
  overflow: hidden;
  padding: 90px 0 30px;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(233, 222, 255, .65) 0%, rgba(233, 222, 255, 0) 70%),
    linear-gradient(180deg, #fbfaff 0%, #f5f0fe 100%);
}

.ov-yn-govde__arka {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ov-yn-isik {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}

.ov-yn-isik--1 {
  top: 18%;
  left: -160px;
  width: 460px;
  height: 460px;
  background: #e3d4ff;
}

.ov-yn-isik--2 {
  right: -180px;
  bottom: 12%;
  width: 520px;
  height: 520px;
  background: #ffd9ec;
  opacity: .4;
}

.ov-yn-noktalar {
  position: absolute;
  width: 300px;
  height: 220px;
  background-image: radial-gradient(rgba(124, 77, 214, .22) 1.2px, transparent 1.7px);
  background-size: 19px 19px;
}

.ov-yn-noktalar--sol {
  top: 60px;
  left: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}

.ov-yn-noktalar--sag {
  right: 0;
  bottom: 40px;
  -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(315deg, #000 0%, transparent 70%);
}

/* sahne: baslik + parkur (masaustunde yalniz parkur pinlenir, baslik ustte kalir) */
.ov-yn-sahne {
  position: relative;
  z-index: 1;
}

.ov-yn-bas {
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
}

.ov-yn-bas .sec-title {
  margin-bottom: 14px;
}

/* Turkce "İ" buyuk harfi dogru kalsin: baslik zaten her sozcugu buyuk yazili geliyor */
.ov-yn-bas .sec-title.sec-title--three .title {
  text-transform: none;
}

.ov-yn-bas__metin {
  margin: 0 auto;
  max-width: 600px;
  color: #8a82a8;
  font-size: 17px;
  line-height: 1.65;
}

/* --- Yatay zaman cizelgesi ---------------------------------------------------- */
.ov-yn-yatay {
  position: relative;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* parkur kutusu: kurelerin isigi kirpilmasin diye dort yandan pay (negatif kenar bosluguyla dengelenir) */
.ov-yn-iz {
  --solma: 64px;
  --pay: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: calc(-1 * var(--pay)) calc(-1 * var(--pay)) 0;
  padding: var(--pay) var(--pay) 26px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pay);
  scrollbar-width: thin;
  scrollbar-color: #cdb8f7 transparent;
  -webkit-overflow-scrolling: touch;
}

.ov-yn-iz:focus-visible {
  outline: 2px solid #7c4dd6;
  outline-offset: -6px;
  border-radius: 20px;
}

.ov-yn-iz::-webkit-scrollbar {
  height: 6px;
}

.ov-yn-iz::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #cdb8f7;
}

.ov-yn-yatay.is-sag .ov-yn-iz {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--solma)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--solma)), transparent);
}

.ov-yn-yatay.is-sol .ov-yn-iz {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--solma));
  mask-image: linear-gradient(90deg, transparent, #000 var(--solma));
}

.ov-yn-yatay.is-sol.is-sag .ov-yn-iz {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--solma), #000 calc(100% - var(--solma)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--solma), #000 calc(100% - var(--solma)), transparent);
}

/* ilerleme cubugu (kaydirmayla dolar) */
.ov-yn-ilerleme {
  height: 4px;
  max-width: 320px;
  margin: 2px auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(124, 77, 214, .14);
}

.ov-yn-ilerleme span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c4dd6, #b48cf0);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Masaustu: pinlenmis sahne (JS .is-pinli). Kartlar sabit boyda; parkur kendi kaydirmasi yerine GSAP ile kayar. */
.ov-yn-yatay.is-pinli .ov-yn-iz {
  overflow: hidden;
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
}

.ov-yn-yatay.is-pinli.is-sol .ov-yn-iz {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 80px), transparent);
}

.ov-yn-yatay.is-pinli.is-sigiyor .ov-yn-iz {
  -webkit-mask-image: none;
  mask-image: none;
}

.ov-yn-yatay.is-pinli .ov-yn-zaman {
  padding-right: 90px;
}

.ov-yn-zaman {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

/* parlayan yatay cizgi: kurelerin ortasindan */
.ov-yn-zaman::before {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #7c4dd6 0%, #b48cf0 55%, rgba(180, 140, 240, .15) 100%);
  box-shadow: 0 0 22px rgba(124, 77, 214, .45);
  content: "";
  pointer-events: none;
}

.ov-yn-surum {
  position: relative;
  flex: 0 0 720px;
  width: 720px;
  scroll-snap-align: start;
  scroll-margin-top: 120px;
}

.ov-yn-surum__dugum {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  margin-bottom: 16px;
  padding-left: 18px;
}

.ov-yn-surum__tarih {
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 8px 16px -12px rgba(60, 28, 140, .5);
  color: #6b6190;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* surum kuresi: sitenin duz gradyan dili (parlama yok), yumusak isik */
.ov-yn-kure {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--vurgu, #7c4dd6) 55%, #fff) 0%, var(--vurgu, #7c4dd6) 100%);
  box-shadow: 0 0 0 6px #fbf9ff, 0 0 0 7px color-mix(in srgb, var(--vurgu, #7c4dd6) 25%, transparent), 0 16px 28px -12px var(--vurgu, #7c4dd6);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

.ov-yn-kure span {
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-yn-surum--yeni .ov-yn-kure {
  width: 68px;
  height: 68px;
  font-size: 16px;
  box-shadow: 0 0 0 6px #fbf9ff, 0 0 0 7px rgba(124, 77, 214, .32), 0 0 0 16px rgba(124, 77, 214, .08), 0 0 40px rgba(124, 77, 214, .42), 0 16px 28px -12px #7c4dd6;
}

.ov-yn-surum.is-etkin .ov-yn-kure {
  transform: scale(1.08);
}

/* --- Kart: yatay (sol bilgi / sag maddeler) ------------------------------------ */
.ov-yn-kart {
  --vurgu-acik: color-mix(in srgb, var(--vurgu, #7c4dd6) 38%, #fff);
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 350px;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88)) padding-box,
    linear-gradient(150deg, var(--vurgu-acik) 0%, rgba(255, 255, 255, .7) 38%, rgba(214, 200, 250, .9) 100%) border-box;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(124, 77, 214, .06), 0 30px 50px -36px rgba(60, 28, 140, .55);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

.ov-yn-surum.is-etkin .ov-yn-kart {
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(124, 77, 214, .35), 0 44px 70px -38px rgba(60, 28, 140, .75);
}

.ov-yn-surum--yeni .ov-yn-kart {
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(124, 77, 214, .07), 0 0 48px -6px rgba(155, 116, 234, .5), 0 36px 60px -36px rgba(60, 28, 140, .7);
}

@media (hover: hover) {
  .ov-yn-surum .ov-yn-kart:hover {
    transform: translateY(-4px);
  }
}

/* sol: surume gore hafif renkli zemin, sagda ince ayirici */
.ov-yn-kart__sol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--vurgu, #7c4dd6) 9%, #fff) 0%, color-mix(in srgb, var(--vurgu, #7c4dd6) 3%, #fff) 100%);
}

.ov-yn-kart__sol::after {
  position: absolute;
  top: 22px;
  bottom: 22px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(124, 77, 214, 0), rgba(124, 77, 214, .22) 30%, rgba(124, 77, 214, .22) 70%, rgba(124, 77, 214, 0));
  content: "";
}

/* "En yeni" seridi: sitenin gradyan rozet kalibi (.ov-kayit__rozet), duz */
.ov-yn-kart__serit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 100px;
  background: linear-gradient(140deg, #a86dff 0%, #7c4dd6 100%);
  box-shadow: 0 10px 17px -11px rgba(124, 77, 214, .95);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ov-yn-kart__surum {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ov-yn-kart__surum small {
  margin-bottom: 6px;
  color: #8a82a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ov-yn-kart__surum b {
  background: linear-gradient(90deg, #5b3fb3, #9b74ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.ov-yn-kart__tarih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  color: #6b6190;
  font-size: 13px;
  font-weight: 600;
}

.ov-yn-kart__tarih i {
  color: #8b5cf6;
}

.ov-yn-kart__baslik {
  margin: 4px 0 0;
  color: #1c1540;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.ov-yn-kart__ozet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
}

/* tur cipleri: sitenin beyaz hap rozeti (.ov-gizli__rozet) — renk yalniz ikon ve sayida */
.ov-yn-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 8px 16px -12px rgba(60, 28, 140, .5);
  color: #6b5a90;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ov-yn-cip i,
.ov-yn-cip b {
  color: var(--t, #7c4dd6);
}

.ov-yn-cip b {
  font-weight: 800;
}

.ov-yn-cip--yeni,
.ov-yn-madde--yeni .ov-yn-madde__ikon,
.ov-yn-madde--yeni .ov-yn-madde__tur {
  --t: #7c4dd6;
  --tA: #a86dff;
}

.ov-yn-cip--iyilestirme,
.ov-yn-madde--iyilestirme .ov-yn-madde__ikon,
.ov-yn-madde--iyilestirme .ov-yn-madde__tur {
  --t: #2f6fd0;
  --tA: #6aa0ee;
}

.ov-yn-cip--duzeltme,
.ov-yn-madde--duzeltme .ov-yn-madde__ikon,
.ov-yn-madde--duzeltme .ov-yn-madde__tur {
  --t: #178a5e;
  --tA: #4fc39a;
}

.ov-yn-kart__gorsel {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto 0 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(80% 90% at 50% 100%, #e3d4ff 0%, rgba(227, 212, 255, 0) 75%), #f6f3fd;
}

.ov-yn-kart__gorsel img {
  display: block;
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 22px -14px rgba(60, 28, 140, .6);
}

/* sag: kendi icinde kayan madde listesi (flex sutun: liste kalan boyu alir, tasarsa kayar) */
.ov-yn-kart__sag {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ov-yn-maddeler {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 14px 24px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #d9cbf7 transparent;
}

.ov-yn-maddeler:focus-visible {
  outline: 2px solid #7c4dd6;
  outline-offset: -4px;
  border-radius: 0 24px 24px 0;
}

.ov-yn-maddeler::-webkit-scrollbar {
  width: 6px;
}

.ov-yn-maddeler::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #d9cbf7;
}

.ov-yn-madde {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dashed #e7e0f6;
}

.ov-yn-madde:first-child {
  padding-top: 4px;
  border-top: 0;
}

/* madde ikonu: sitenin gradyan kare ikonu (.ov-kayit__rozet), tur rengiyle */
.ov-yn-madde__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--tA, #a86dff) 0%, var(--t, #7c4dd6) 100%);
  box-shadow: 0 10px 17px -11px var(--t, #7c4dd6);
  color: #fff;
  font-size: 14px;
}

.ov-yn-madde__metin {
  padding-top: 2px;
  color: #4a4260;
  font-size: 15px;
  line-height: 1.5;
}

.ov-yn-madde__tur {
  display: block;
  margin-bottom: 1px;
  color: var(--t, #7c4dd6);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* tasan liste: alt (ve ustte kaydirinca ust) solma + "kaydir" ipucu; sona gelince kalkar */
.ov-yn-kart__solma {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.ov-yn-kart__sag::before {
  position: absolute;
  top: 0;
  right: 8px;
  left: 0;
  z-index: 1;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity .3s ease;
  content: "";
  pointer-events: none;
}

.ov-yn-kart__sag.is-tasiyor:not(.is-sonda) .ov-yn-kart__solma,
.ov-yn-kart__sag.is-tasiyor:not(.is-basta)::before {
  opacity: 1;
}

.ov-yn-kart__kaydir {
  position: absolute;
  right: 22px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 8px 16px -12px rgba(60, 28, 140, .5);
  color: #6b5a90;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.ov-yn-kart__kaydir i {
  color: #8b5cf6;
  animation: ov-yn-zipla 1.6s ease-in-out infinite;
}

.ov-yn-kart__sag.is-tasiyor:not(.is-sonda) .ov-yn-kart__kaydir {
  opacity: 1;
  transform: none;
}

@keyframes ov-yn-zipla {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* --- Henuz not yok -------------------------------------------------------- */
.ov-yn-bos {
  max-width: 640px;
  margin: 0 auto;
  padding: 50px 34px 46px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(124, 77, 214, .13), 0 34px 60px -40px rgba(60, 28, 140, .55);
  text-align: center;
}

.ov-yn-bos__kure {
  display: inline-grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f7f2ff 0%, #e6d9fb 100%);
  box-shadow: 0 0 0 10px rgba(124, 77, 214, .06), 0 18px 34px -18px #7c4dd6;
}

.ov-yn-bos__baslik {
  margin: 0 0 10px;
  color: #1c1540;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

.ov-yn-bos__metin {
  max-width: 480px;
  margin: 0 auto;
  color: #8a82a8;
  font-size: 16px;
  line-height: 1.6;
}

/* --- Oneri karti: acik cam kart + sahte oneri kutusu ------------------------- */
.ov-yn-oneri-alan {
  padding: 34px 0 120px;
  background: #f5f0fe;
}

.ov-yn-oneri {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px 50px;
  padding: 56px 64px;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 34px;
  background:
    linear-gradient(135deg, #fff 0%, #f7f2ff 100%) padding-box,
    linear-gradient(150deg, #cdb8f7 0%, rgba(255, 255, 255, .8) 40%, #ffd9ec 100%) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -46px rgba(40, 16, 110, .5);
}

.ov-yn-oneri__arka {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ov-yn-oneri__isik {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

.ov-yn-oneri__isik--1 {
  left: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  background: rgba(255, 143, 196, .22);
}

.ov-yn-oneri__isik--2 {
  top: -160px;
  right: -60px;
  width: 460px;
  height: 460px;
  background: rgba(155, 116, 234, .26);
}

.ov-yn-oneri__halkalar {
  position: absolute;
  top: 50%;
  right: -120px;
  width: 620px;
  height: 620px;
  transform: translateY(-50%);
}

.ov-yn-oneri__halkalar circle {
  fill: none;
  stroke: rgba(124, 77, 214, .1);
  stroke-width: 1.2;
}

.ov-yn-oneri__metin {
  position: relative;
  max-width: 520px;
}

.ov-yn-oneri__metin .sec-title {
  margin-bottom: 14px;
}

.ov-yn-oneri__baslik {
  margin: 0 0 12px;
  color: #1c1540;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ov-yn-oneri__metin p {
  margin: 0 0 26px;
  color: #6b6190;
  font-size: 16.5px;
  line-height: 1.6;
}

.ov-yn-oneri__dugme {
  position: relative;
}

/* sahne: ucan cipler + oneri kutusu + "okundu" balonu */
.ov-yn-oneri__sahne {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 50px 30px 30px;
}

.ov-yn-oneri__kutu {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 8px 8px 8px 10px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 24px 44px -26px rgba(60, 28, 140, .6), 0 0 0 8px rgba(124, 77, 214, .05);
}

.ov-yn-oneri__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f3ecff 0%, #e2d4fb 100%);
}

.ov-yn-oneri__yazi {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  color: #1c1540;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
}

.ov-yn-oneri__yazi span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ov-yn-oneri__imlec {
  display: inline-block;
  flex: none;
  width: 2px;
  height: 20px;
  margin-left: 3px;
  border-radius: 2px;
  background: #7c4dd6;
  animation: ov-yn-imlec 1s steps(2, start) infinite;
}

@keyframes ov-yn-imlec {
  to { visibility: hidden; }
}

.ov-yn-oneri__gonder {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, #a86dff 0%, #7c4dd6 100%);
  box-shadow: 0 12px 20px -10px rgba(124, 77, 214, .95);
  color: #fff;
  font-size: 16px;
}

.ov-yn-oneri__balon {
  position: absolute;
  right: 26px;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 8px 16px -12px rgba(60, 28, 140, .5);
  color: #6b5a90;
  font-size: 12.5px;
  font-weight: 600;
}

.ov-yn-oneri__balon i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e2f6ec;
  color: #178a5e;
  font-size: 10px;
}

.ov-yn-oneri__cip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid #ece2fb;
  background: #fff;
  box-shadow: 0 12px 22px -14px rgba(60, 28, 140, .6);
  font-size: 17px;
  animation: ov-yn-suzul 6s ease-in-out infinite;
}

.ov-yn-oneri__cip--1 {
  top: 0;
  left: 12%;
  color: #d8922a;
  animation-delay: -1s;
}

.ov-yn-oneri__cip--2 {
  top: 14px;
  right: 10%;
  color: #d9537f;
  animation-delay: -3s;
}

.ov-yn-oneri__cip--3 {
  bottom: 8px;
  left: 4%;
  color: #7c4dd6;
  animation-delay: -4.5s;
}

@keyframes ov-yn-suzul {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}

/* --- Giris (bir kez) ------------------------------------------------------ */
.ov-yn-hareket .ov-yn-gir {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.ov-yn-hareket .ov-yn-gir.is-gorunur {
  opacity: 1;
  transform: none;
}

.ov-yn-hareket .ov-yn-surum .ov-yn-kure {
  opacity: 0;
  transform: scale(.55);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.ov-yn-hareket .ov-yn-surum .ov-yn-kart {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1) .1s, transform .7s cubic-bezier(.2, .7, .2, 1) .1s;
}

.ov-yn-hareket .ov-yn-surum.is-gorunur .ov-yn-kure,
.ov-yn-hareket .ov-yn-surum.is-gorunur .ov-yn-kart {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ov-yn-oneri__cip,
  .ov-yn-kart__kaydir i,
  .ov-yn-oneri__imlec {
    animation: none;
  }
}

/* --- Tablet ve telefon ----------------------------------------------------- */
@media (max-width: 991px) {
  .ov-yn-govde {
    padding: 80px 0 20px;
  }

  .ov-yn-bas {
    margin-bottom: 30px;
  }

  .ov-yn-surum {
    flex-basis: 600px;
    width: 600px;
  }

  .ov-yn-kart {
    grid-template-columns: 220px minmax(0, 1fr);
    height: 330px;
  }

  .ov-yn-oneri {
    grid-template-columns: minmax(0, 1fr);
    padding: 48px 40px;
  }

  .ov-yn-oneri__sahne {
    padding-top: 56px;
  }
}

@media (max-width: 767px) {
  .ov-yn-surum {
    flex-basis: 86vw;
    width: 86vw;
    max-width: 420px;
  }

  /* dar ekran: sol bilgi ustte, maddeler altta (kendi icinde kayar) */
  .ov-yn-kart {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 420px;
  }

  .ov-yn-kart__sol {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 20px 20px 16px;
  }

  .ov-yn-kart__sol::after {
    top: auto;
    right: 20px;
    bottom: 0;
    left: 20px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 77, 214, 0), rgba(124, 77, 214, .22) 30%, rgba(124, 77, 214, .22) 70%, rgba(124, 77, 214, 0));
  }

  .ov-yn-kart__serit {
    order: -1;
    width: 100%;
    width: max-content;
  }

  .ov-yn-kart__surum b {
    font-size: 30px;
  }

  .ov-yn-kart__baslik {
    width: 100%;
    margin: 0;
    font-size: 18px;
  }

  .ov-yn-kart__ozet {
    width: 100%;
    margin: 0;
  }

  .ov-yn-kart__gorsel {
    display: none;
  }

  .ov-yn-maddeler {
    padding: 10px 18px 16px;
  }

  .ov-yn-kart__kaydir {
    right: 16px;
    bottom: 12px;
  }
}

@media (max-width: 575px) {
  .ov-yn-govde {
    padding: 64px 0 16px;
  }

  .ov-yn-iz {
    --solma: 28px;
    --pay: 30px;
  }

  .ov-yn-zaman {
    gap: 14px;
  }

  .ov-yn-surum__dugum {
    padding-left: 12px;
  }

  .ov-yn-kart {
    border-radius: 20px;
  }

  .ov-yn-bos__baslik {
    font-size: 20px;
  }

  .ov-yn-bos {
    padding: 38px 22px 34px;
  }

  .ov-yn-oneri-alan {
    padding: 24px 0 90px;
  }

  .ov-yn-oneri {
    padding: 38px 22px 28px;
    border-radius: 26px;
  }

  .ov-yn-oneri__baslik {
    font-size: 26px;
  }

  .ov-yn-oneri__halkalar {
    right: -260px;
  }

  .ov-yn-oneri__dugme {
    display: block;
  }

  .ov-yn-oneri__dugme .inner {
    justify-content: center;
    width: 100%;
  }

  .ov-yn-oneri__sahne {
    min-height: 0;
    padding: 46px 6px 28px;
  }

  .ov-yn-oneri__cip {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .ov-yn-oneri__balon {
    right: 6px;
  }
}