/* MedyaDes · yükseltme katmanı
   neon.css ve ustmenu.css'in ÜSTÜNE biner. Mevcut hiçbir kural silinmez.
   Bütün yeni sınıflar yz- önekiyle başlar.

   Hareket üç yerden kapanır:
     1) prefers-reduced-motion
     2) sitedeki mevcut "Animasyonları duraklat" düğmesi (body.motion-off)
     3) JavaScript hiç çalışmazsa html.yz sınıfı gelmez, her şey görünür kalır. */

:root {
  --yz-y: cubic-bezier(.16, 1, .3, 1);
  --yz-h: cubic-bezier(.22, 1, .36, 1);
}

/* Tam genişlik bantları 100vw kullanıyor; 100vw kaydırma çubuğunu da sayar
   ve birkaç pikselllik yatay taşma doğurur. clip, hidden'ın aksine kaydırma
   kabı yaratmaz, position:sticky çalışmaya devam eder. */
html { overflow-x: clip; }

/* ===================================================== F20. ilerleme çubuğu */

.yz-ilerleme {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: #e6edf1;
  opacity: 0;
  transition: opacity .45s;
}
.yz-ilerleme.gorunur { opacity: 1; }
.yz-ilerleme i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--teal), var(--aqua));
}

/* ============================================= A. turkuaz iz: sayfa omurgası */

main { position: relative; }
main > section,
main > nav { position: relative; z-index: 1; }

.yz-iz-kat {
  position: absolute;
  inset: 0;
  /* Sayfanın tepesinde görünmez: kaydırma başlayınca JavaScript açar.
     Duran bir çizgi ve parlayan nokta, hero'nun yanında başıboş duruyordu. */
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* SVG de mutlak: katman herhangi bir sebeple akışa düşse bile
   sayfayı itemez. */
.yz-iz-kat svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A1 · çizgi: kaydırdıkça çizilir */
.yz-yol {
  fill: none;
  stroke: url(#yz-degrade);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .62;
}
/* A4 · ucundaki ışık ve A2 · yürüyen nokta */
.yz-isin { fill: #35d4d4; opacity: .22; filter: url(#yz-bulanik); }
.yz-nokta { fill: var(--teal); }
.yz-nokta-halka { fill: none; stroke: var(--aqua); stroke-width: 1.5; opacity: .5; }

@media (max-width: 760px) { .yz-yol { opacity: .4; stroke-width: 1.6; } }

/* ============================================================ giriş düzeni */

html.yz [data-yz] { --yz-g: 0; }

html.yz [data-yz] .yz-sat { display: block; overflow: hidden; padding-bottom: .16em; }
html.yz [data-yz] .yz-sat > span {
  display: block;
  transform: translateY(104%);
  transition: transform .95s var(--yz-y) calc(var(--yz-g) * .07s);
}
html.yz [data-yz].yz-ac .yz-sat > span { transform: none; }

html.yz [data-yz] .yz-yuksel,
html.yz [data-yz].yz-yuksel {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--yz-y) calc(var(--yz-g) * .07s),
              transform .8s var(--yz-y) calc(var(--yz-g) * .07s);
}
html.yz [data-yz].yz-ac .yz-yuksel,
html.yz [data-yz].yz-ac.yz-yuksel { opacity: 1; transform: none; }

html.yz [data-yz] .yz-perde {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--yz-y) calc(var(--yz-g) * .08s);
}
html.yz [data-yz].yz-ac .yz-perde { clip-path: inset(0 0 0 0); }

/* =============================================================== B. hero */

/* Hero zemini düz beyaz: görselin arkasında hiçbir renk lekesi kalmaz. */
.hero { background: #fff; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }

/* Hero görseli duruyor: ne süzülme, ne eğim, ne arkasında parıltı. */
.hero-art { animation: none !important; rotate: none !important; transform: none !important; }
.hero-art::before, .hero-art::after { display: none !important; }

/* B5 · imlecin arkasında kalan iz */
.yz-iz-tuval {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s;
}
.yz-iz-tuval.gorunur { opacity: 1; }

@keyframes yz-don { to { rotate: 360deg; } }

/* B6 · başlık kelimeleri maskeden yükselir */
html.yz .hero h1 .yz-k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
html.yz .hero h1 .yz-k > span {
  display: inline-block;
  transform: translateY(106%);
  transition: transform 1s var(--yz-y) calc(var(--yz-g) * .085s);
}
html.yz body.yz-hazir .hero h1 .yz-k > span { transform: none; }

html.yz .hero h1 .dot {
  display: inline-block;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .5s var(--yz-y) .66s, transform .75s var(--yz-h) .66s;
}
html.yz body.yz-hazir .hero h1 .dot {
  opacity: 1;
  transform: none;
  animation: yz-nabiz 3.6s var(--yz-y) 1.9s infinite;
}
@keyframes yz-nabiz {
  0%, 74%, 100% { text-shadow: 0 0 0 #35d4d400; }
  86%           { text-shadow: 0 0 20px #35d4d4a8; }
}

html.yz .hero .eyebrow,
html.yz .hero-desc,
html.yz .hero-actions {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s var(--yz-y), transform .85s var(--yz-y);
}
html.yz .hero .eyebrow { transition-delay: .06s; }
html.yz .hero-desc    { transition-delay: .54s; }
html.yz .hero-actions { transition-delay: .66s; }
html.yz body.yz-hazir .hero .eyebrow,
html.yz body.yz-hazir .hero-desc,
html.yz body.yz-hazir .hero-actions { opacity: 1; transform: none; }

/* Hero'daki ışık lekeleri kaldırıldı: zemin düz beyaz kalsın. */
.yz-isik { display: none; }

/* ====================================================== F19. düğme cilası */

.button, .md-cta { will-change: transform; }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: "";
  position: absolute;
  left: var(--yz-x, 50%);
  top: var(--yz-t, 50%);
  width: 0; height: 0;
  z-index: -1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, #1e505c, #15323c);
  transition: width .55s var(--yz-h), height .55s var(--yz-h);
}
.button:hover::after { width: 280%; height: 650%; }

/* ======================================================== C9. rakam şeridi */

.yz-rakamlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) { .yz-rakamlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.yz-rakam {
  padding: clamp(26px, 3vw, 42px) clamp(14px, 2vw, 28px);
  border-right: 1px solid var(--line);
  display: grid;
  gap: 7px;
  align-content: start;
}
.yz-rakam:last-child { border-right: 0; }
@media (max-width: 819px) {
  .yz-rakam:nth-child(2n) { border-right: 0; }
  .yz-rakam:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.yz-rakam b {
  font: 600 clamp(38px, 4.6vw, 66px)/1 Sora, Manrope, Arial, sans-serif;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(142deg, var(--ink) 18%, #2d5a64 58%, var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.yz-rakam span { color: var(--muted); font-size: clamp(12px, 1.05vw, 14px); line-height: 1.45; }

/* ======================================================= C10. isim şeridi */

.yz-serit {
  border-bottom: 1px solid var(--line);
  padding-block: 22px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 8%, #000 92%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 8%, #000 92%, #0000);
}
.yz-serit-ray { display: flex; width: max-content; will-change: transform; }
.yz-serit-grup {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 52px);
  padding-right: clamp(24px, 3.2vw, 52px);
  white-space: nowrap;
}
.yz-serit-grup b {
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -.035em;
  color: #41525f;
}
.yz-serit-grup i { font-style: normal; color: var(--aqua); }

/* ==================================================== C13. çalışma kartları */

.project-picture { will-change: transform; }
.project:hover .project-picture { box-shadow: 0 22px 46px #0f8f9a1f, 0 0 0 1px #c9eef0; }
.project-go { transition: transform .45s var(--yz-y), background .3s; }
.project:hover .project-go { transform: rotate(-45deg) scale(1.08); background: #fff; }

@media (min-width: 1000px) {
  .projects.yz-genis { grid-template-columns: repeat(3, 1fr); gap: 26px 24px; }
  .projects.yz-genis .project-picture { aspect-ratio: 1.5; border-width: 11px !important; }
  .projects.yz-genis .project-meta h3 { font-size: 17px; }
  .projects.yz-genis .project-meta { margin-top: 14px; }
}

/* ======================= C11. VİTRİN: kaydırdıkça müşteriden müşteriye =======

   Bölüm ekrana yapışır; kaydırdıkça hem masaüstü hem telefon çerçevesi bir
   sonraki müşteri sitesine geçer, telefon da o sitenin içinde aşağı kayar.
   Video yok: hepsi gerçek ekran görüntüsü.                                   */

.yz-vitrin { position: relative; height: calc(100svh + var(--yz-adet, 6) * 72svh); }
/* Telefonda masaustu cercevesi gizli; ayni kaydirma mesafesi orada
   bos ekran gibi duruyordu. Site basina dusen mesafe kisaldi. */
@media (max-width: 979px) { .yz-vitrin { height: calc(100svh + var(--yz-adet, 6) * 50svh); } }
.yz-vitrin-sahne {
  position: sticky;
  top: 96px;
  height: calc(100svh - 118px);
  min-height: 560px;
  display: flex;
  align-items: center;
}
/* width: 100% yazmıyoruz: eleman .container sınıfını da taşıyor ve
   kenar boşluğunu oradaki calc(100% - --space*2) veriyor. Ezilince
   telefonda yazı ekranın sol kenarına yapışıyordu. */
.yz-vitrin-ic { display: grid; gap: clamp(22px, 3vw, 46px); align-items: center; }
@media (min-width: 980px) {
  .yz-vitrin-ic { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); }
}

/* --- sol taraf: hangi müşteri --- */

.yz-vitrin-bilgi { display: grid; gap: 10px; align-content: center; }
.yz-vitrin-sira {
  margin: 0;
  font-family: var(--mono, inherit);
  font-size: 12px;
  letter-spacing: .18em;
  color: #7d8f9c;
  font-variant-numeric: tabular-nums;
}
.yz-vitrin-sira b { color: var(--teal, #008f96); font-weight: 600; font-size: 15px; }
.yz-vitrin-ad {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.yz-vitrin-sektor { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua, #35d4d4); font-weight: 600; }
.yz-vitrin-is { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: #66758a; max-width: 30ch; }
.yz-vitrin-bag { margin-top: 10px; justify-self: start; }

/* yazılar değişirken kısa bir soluk alır */
.yz-vitrin-bilgi > * { transition: opacity .3s, translate .4s cubic-bezier(.16,1,.3,1); }
.yz-vitrin.yz-gecis .yz-vitrin-bilgi > * { opacity: 0; translate: 0 8px; }

/* ilerleme noktaları */
.yz-vitrin-noktalar { display: flex; gap: 7px; margin-top: 18px; }
.yz-vitrin-noktalar i {
  width: 22px; height: 3px; border-radius: 3px;
  background: #d8e3e8;
  transition: background-color .4s, width .4s cubic-bezier(.16,1,.3,1);
}
.yz-vitrin-noktalar i.etkin { background: var(--teal, #008f96); width: 38px; }

/* --- sağ taraf: iki ekran --- */

.yz-vitrin-ekranlar { display: grid; gap: clamp(18px, 2.4vw, 34px); align-items: end; justify-items: center; }
@media (min-width: 980px) { .yz-vitrin-ekranlar { grid-template-columns: minmax(0, 1fr) 272px; justify-items: stretch; } }

.yz-tarayici {
  display: block;
  width: 100%;
  border: 1px solid var(--line, #e0e6eb);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 28px 62px -32px #15404d59;
}
@media (max-width: 979px) { .yz-tarayici { display: none; } }

.yz-tarayici-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line, #e0e6eb);
  background: linear-gradient(#fbfdfe, #f3f8fa);
}
.yz-nokta-grup { display: flex; gap: 6px; flex-shrink: 0; }
.yz-nokta-grup i { width: 9px; height: 9px; border-radius: 50%; background: #dce5eb; }
.yz-adres {
  flex: 1; max-width: 330px;
  padding: 5px 13px; border-radius: 100px;
  background: #fff; border: 1px solid #e4ebf0;
  font-size: 11.5px; color: #7b8a9c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s;
}

/* ekran görüntüleri üst üste durur, aktif olan görünür */
.yz-tarayici-ekran { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f7f9; }
.yz-tarayici-ekran img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity .55s ease;
}
.yz-tarayici-ekran img.etkin { opacity: 1; }

/* Telefon ölçüsü tek değişkenden türer: --tel (ekranın genişliği, piksel).
   Görüntüler 430 CSS piksel genişliğinde, 2600 piksel yüksekliğinde çekildi.
   Ekran yüksekliği 930 * oran olduğu için kayma yolu her boyutta 1670 kalır,
   JavaScript'teki değerle bire bir uyar. */
.yz-telefon {
  --tel: 252;
  --oran: calc(var(--tel) / 430);
  width: calc(var(--tel) * 1px + 20px);
  padding: 10px;
  border-radius: 40px;
  background: linear-gradient(150deg, #3a464f, #1b262f 55%, #3a464f);
  box-shadow: 0 32px 66px -22px #0e333d6b, inset 0 0 0 1px #ffffff1f;
  justify-self: center;
}
@media (min-width: 980px) { .yz-telefon { justify-self: end; } }
/* dar telefonlarda çerçeve de küçülür, yatay taşma olmaz */
@media (max-width: 420px) { .yz-telefon { --tel: 222; padding: 9px; border-radius: 34px; width: calc(var(--tel) * 1px + 18px); } }
@media (max-width: 340px) { .yz-telefon { --tel: 196; } }

/* Telefonda vitrin: sahne yüksekliği sabit (ekran eksi başlık), içerik ise
   ondan uzundu. Flex ortalaması taşmayı üste ve alta eşit dağıtıyor, bu
   yüzden metin başlığın altına giriyor telefon aşağı taşıyordu. Üstelik
   metin uzunluğu müşteriye göre değiştiği için her geçişte telefon
   zıplıyordu. Metni sabit yüksekliğe oturtup telefonu sahneye sığacak
   kadar küçültüyoruz. */
@media (max-width: 979px) {
  .yz-vitrin-sahne { top: 88px; height: calc(100svh - 106px); }
  .yz-vitrin-ic { gap: 16px; }
  .yz-vitrin-bilgi { min-height: 198px; align-content: start; }
  .yz-vitrin-ad { font-size: clamp(22px, 6.4vw, 30px); }
  /* iki satıra sabitlenir: müşteri değişince blok yüksekliği oynamaz */
  .yz-vitrin-is {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; min-height: 3.2em; margin-top: 2px;
  }
  .yz-vitrin-noktalar { margin-top: 12px; }
  .yz-telefon { --tel: 204; }
}
@media (max-width: 420px) { .yz-telefon { --tel: 190; } }
@media (max-width: 340px) { .yz-telefon { --tel: 166; } }

/* Asıl kısıt ekranın genişliği değil yüksekliği: sahne, ekran eksi başlık
   kadar. 740px boyundaki bir telefonda 812px'e göre 72px daha az yer var.
   Kısa ekranlarda hizmet satırı tek satıra iner ve telefon küçülür. */
@media (max-width: 979px) and (max-height: 800px) {
  .yz-vitrin-sahne { height: calc(100svh - 96px); }
  .yz-vitrin-is { -webkit-line-clamp: 1; min-height: 1.6em; }
  .yz-vitrin-bilgi { min-height: 176px; }
  .yz-telefon { --tel: 176; }
}
@media (max-width: 979px) and (max-height: 700px) {
  .yz-vitrin-ad { font-size: clamp(20px, 5.6vw, 26px); }
  .yz-vitrin-bilgi { min-height: 152px; }
  .yz-vitrin-noktalar { margin-top: 8px; }
  .yz-telefon { --tel: 150; }
}

.yz-tel-ekran {
  position: relative;
  width: calc(var(--tel) * 1px);
  height: calc(930px * var(--oran));
  border-radius: calc(31px * var(--oran) + 8px);
  overflow: hidden;
  background: #f3f7f9;
}
.yz-tel-centik {
  position: absolute; left: 50%; top: 0;
  translate: -50% 0; z-index: 3;
  width: calc(96px * var(--oran) + 14px);
  height: calc(21px * var(--oran) + 6px);
  border-radius: 0 0 13px 13px;
  background: #1b262f;
}
.yz-tel-kaydir {
  position: absolute; left: 0; top: 0;
  width: 430px; height: 930px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(var(--oran));
}
.yz-tel-ic { position: absolute; left: 0; top: 0; width: 430px; will-change: transform; }
.yz-tel-ic img {
  position: absolute; left: 0; top: 0;
  width: 430px; height: auto;
  opacity: 0;
  transition: opacity .55s ease;
}
.yz-tel-ic img.etkin { opacity: 1; }

.yz-ekran-not { margin-top: clamp(22px, 2.6vw, 34px); color: var(--muted, #66758a); font-size: 13px; }

/* ================================== E16. koyu bölüm: süreç sayfanın molası */

.process {
  position: relative;
  border-top: 0;
  color: #eaf5f7;
  padding-block: clamp(72px, 8vw, 112px) !important;
  margin-top: clamp(26px, 3vw, 48px);
}
.process::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0; bottom: 0;
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 14% 8%, #16454f 0%, #16454f00 62%),
    radial-gradient(55% 80% at 88% 92%, #0f3b47 0%, #0f3b4700 60%),
    linear-gradient(165deg, #1b2a35, #14222c 62%, #16303a);
}
.process .eyebrow { color: #7fd6da; }
.process h2 { color: #fff; }
.process h2 .dot { color: var(--aqua); }
.process .step h3 { color: #fff; }
.process .step p { color: #a9c3c9; }
.process .step small { color: var(--aqua); }
.process .step { border-top-color: #2b4752; }

/* D14 · turkuaz çizgi kaydırdıkça uzar, noktalar sırayla yanar */
html.yz .steps::before {
  transform: scaleX(var(--yz-c, 0));
  transform-origin: left;
  transition: transform .12s linear;
}
html.yz .step::before { transform: scale(.001); transition: transform .62s var(--yz-h) calc(var(--yz-g) * .13s); }
html.yz .step.yz-ac::before { transform: none; }
html.yz .step small,
html.yz .step h3,
html.yz .step p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .72s var(--yz-y) calc(var(--yz-g) * .13s + .12s),
              transform .72s var(--yz-y) calc(var(--yz-g) * .13s + .12s);
}
html.yz .step.yz-ac small,
html.yz .step.yz-ac h3,
html.yz .step.yz-ac p { opacity: 1; transform: none; }

/* koyu zeminde iz çizgisi biraz daha parlasın */
.process ~ * { }
.yz-iz-kat .yz-yol { transition: opacity .4s; }

/* ====================================== hizmet akordeonunda açılan çizgi */

.service::before { transition: transform .5s var(--yz-h); transform-origin: top; }
.service:not([open])::before { transform: scaleY(0); }

/* ========================================================= az hareket modu */

@media (prefers-reduced-motion: reduce) {
  .yz-iz-tuval, .hero-art::before { display: none; }
  html.yz [data-yz] .yz-sat > span,
  html.yz .hero h1 .yz-k > span { transform: none !important; }
  html.yz [data-yz] .yz-yuksel, html.yz [data-yz].yz-yuksel,
  html.yz .hero .eyebrow, html.yz .hero-desc, html.yz .hero-actions,
  html.yz .step small, html.yz .step h3, html.yz .step p { opacity: 1 !important; transform: none !important; }
  html.yz [data-yz] .yz-perde { clip-path: none !important; }
  html.yz .hero h1 .dot { opacity: 1 !important; transform: none !important; }
  html.yz .steps::before, html.yz .step::before { transform: none !important; }
  .yz-tel-kaydir iframe { animation: none; opacity: 1; }
}

/* sitedeki mevcut duraklat düğmesi bu katmanı da durdurur */
body.motion-off .yz-iz-tuval { opacity: 0; }

/* =================================================================
   PAKETLER SAYFASI
   Aynı katman, bu sayfanın kendi renkleriyle (.paketler-govde).
   ================================================================= */

/* iz çizgisi sayfanın altına, kartların arkasına */
.paketler-govde .yz-iz-kat { z-index: 0; }
/* :not(.yz-iz-kat) şart: iz katmanı da main > div. Bu kural onu akışa
   sokunca SVG'nin 100:1000 en boy oranı 14000 pikselden fazla boşluk
   yaratıp bütün sayfayı aşağı itiyordu. */
.paketler-govde main > section,
.paketler-govde main > div:not(.yz-iz-kat) { position: relative; z-index: 1; }

/* hero başlığı: kelimeler maskeden yükselir (yukselt.js ayırır) */
html.yz .paketler-govde .hero h1 .yz-k { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
html.yz .paketler-govde .hero h1 em { font-style: italic; }

/* ---------------------------------------------------- rakam şeridi */

.paketler-govde .yz-rakamlar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.paketler-govde .yz-rakam { border-right-color: var(--line); }
.paketler-govde .yz-rakam b {
  font-family: 'Sora', 'Manrope', ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: -.05em;
  background: linear-gradient(142deg, var(--ink) 16%, #1b6b78 58%, var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.paketler-govde .yz-rakam span { color: var(--muted); }

/* ------------------------------------------------- paket kartları */

/* Kartları GİZLEMİYORUZ.
   Paketler sayfasının kendi açılış sistemi var (.reveal-up / .in) ve
   çalışıyor. Üstüne ikinci bir opaklık katmanı koymak, en ufak aksamada
   (betik gecikmesi, donmuş geçiş, sekme arka plana düşmesi) sayfanın
   bomboş kalmasına yol açıyordu. Katman artık yalnızca cila ekliyor. */

.paketler-govde .package-card:hover {
  border-color: #8fd3da;
  box-shadow: 0 18px 38px #0f54611a, 0 0 0 1px #c6edf0;
}

/* öne çıkan paketlerde üstte çizilen turkuaz çizgi */
.paketler-govde .package-card.featured::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(90deg, var(--aqua), #7ae3e8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--yz-h) .25s;
}
.paketler-govde .package-card.featured.in::before,
.paketler-govde .yz-ac .package-card.featured::before { transform: none; }


/* ---------------------------------------- bölüm başlıkları ve paneller */

html.yz .paketler-govde .pk-section-head .yz-sat > span { will-change: transform; }

/* özet paneller ve avantaj şeridi de gizlenmez; sayfanın kendi sistemi açar */
html.yz .paketler-govde .yz-ac.summary-panel,
html.yz .paketler-govde .yz-ac.advantages { opacity: 1; translate: none; }

/* ------------------------------------- koyu bölüm: rehberler molası */

.paketler-govde .guides-section {
  position: relative;
  color: #dcecef;
  padding-block: clamp(58px, 6.5vw, 96px);
  margin-top: clamp(34px, 4vw, 60px);
}
.paketler-govde .guides-section::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0; bottom: 0;
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(58% 86% at 16% 10%, #15525e 0%, #15525e00 62%),
    radial-gradient(52% 78% at 86% 90%, #0d3b47 0%, #0d3b4700 60%),
    linear-gradient(165deg, #10353e, #0b2730 60%, #11404b);
}
.paketler-govde .guides-section .pk-eyebrow { color: #68d2db; }
.paketler-govde .guides-section h2 { color: #fff; }
.paketler-govde .guides-section h2 em { color: var(--aqua); }
.paketler-govde .guides-section > .pk-section-head p { color: #a6c4cb; }
.paketler-govde .guides-section .ghost { color: #d6eef1; border-color: #35616d; }
.paketler-govde .guides-section .ghost:hover { color: #fff; border-color: var(--aqua); }
.paketler-govde .guides-section .guide-card {
  background: #fff;
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 16px 36px -18px #02171d7a;
  transition: transform .4s var(--yz-y), box-shadow .4s var(--yz-y);
}
.paketler-govde .guides-section .guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -20px #02171d8c;
}


/* ------------------------------------------------- az hareket modu */

@media (prefers-reduced-motion: reduce) {
  html.yz .paketler-govde .package-card.featured::before { transform: none !important; }
}

/* vitrin bölümünün dış boşlukları */
.yz-ekranlar { padding-block: clamp(44px, 5vw, 74px) clamp(30px, 4vw, 56px); border-top: 1px solid var(--line); }
.yz-ekranlar .section-heading { margin-bottom: clamp(18px, 2.4vw, 30px); }

@media (prefers-reduced-motion: reduce) {
  .yz-vitrin { height: auto; }
  .yz-vitrin-sahne { position: static; height: auto; min-height: 0; padding-block: 30px; }
  .yz-tel-ic { transform: none !important; }
}

/* =================================================================
   GÖRÜNÜRLÜK GARANTİSİ (paketler sayfası)

   Sayfanın kendi açılış sistemi içeriği opaklıkla gizleyip betikle
   açıyor. Betik gecikirse, ölürse ya da geçiş herhangi bir sebeple
   ilerlemezse sayfa bomboş kalıyor: başlık dışında hiçbir şey yok.
   Boş sayfa, animasyonsuz sayfadan çok daha kötü. Bu yüzden içerik
   koşulsuz görünür; hareketi yukarıdaki katman veriyor.
   ================================================================= */

html.yz .paketler-govde .reveal-up { opacity: 1; transform: none; }