/* =========================================================
   /aramadan-teklife/ — etkilesimli ziyaretci yolculugu
   (pages/yolculuk.php, partials/yolculuk/*, assets/js/yolculuk.js)
   ========================================================= */

/* ---------- Giris: derinlikli kartlar + imleci izleyen isik ---------- */
.yk-giris { min-height: min(92vh, 860px); display: grid; align-items: center; background: var(--bg); --mx: 50%; --my: 40%; }
.yk-giris::after { display: none; }
.yk-giris > .yk-giris__isik {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(237, 109, 30, 0.16), transparent 60%);
  transition: background 0.2s linear;
}
/* texture.css'teki '.hero > *:not(.fox--watermark)' tum katmanlari relative yapiyor; secici bilerek guclu */
.yk-giris > .yk-giris__sahne { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.yk-kart { position: absolute; height: auto; filter: drop-shadow(0 24px 30px rgba(23, 18, 15, 0.16)); transition: translate 0.6s var(--ease); animation: yk-yuz 7s ease-in-out infinite; }
/* SVG'nin yuksekligi viewBox oranindan gelsin; yoksa alta yaslanan kartlar uste kayiyordu */
.yk-kart--arama    { left: 5%;  top: 15%; width: clamp(180px, 20vw, 280px); aspect-ratio: 260 / 64; animation-delay: -1s; }
.yk-kart--hiz      { right: 7%; top: 13%; width: clamp(120px, 12vw, 170px); aspect-ratio: 160 / 104; animation-delay: -3s; }
.yk-kart--telefon  { right: 11%; bottom: 8%; width: clamp(90px, 9vw, 128px); aspect-ratio: 120 / 220; animation-delay: -2s; }
.yk-kart--form     { left: 8%;  bottom: 9%; width: clamp(150px, 15vw, 210px); aspect-ratio: 200 / 150; animation-delay: -4s; }
.yk-kart--bildirim { left: 50%; bottom: 5%; width: clamp(170px, 17vw, 240px); aspect-ratio: 230 / 70; margin-left: -6%; animation-delay: -5s; }
@keyframes yk-yuz { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }

.yk-giris__ic { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; padding-block: 3rem 6rem; }
.yk-giris__ic .eyebrow { justify-content: center; }
.yk-giris__baslik { margin-top: 1rem; font-size: clamp(2.3rem, 5.8vw, 4.6rem); line-height: 1.04; letter-spacing: -0.04em; }
.yk-giris .hero-lede { margin-inline: auto; max-width: 50ch; }
.yk-giris .hero-actions { justify-content: center; }
.yk-miknatis { transition: translate 0.25s var(--ease), transform 0.2s var(--ease); }

.yk-asagi { margin-top: 2.6rem; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line-strong); position: relative; }
.yk-asagi span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: yk-asagi 1.8s ease-in-out infinite; }
@keyframes yk-asagi { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 899px) {
  .yk-kart--form, .yk-kart--bildirim, .yk-kart--telefon { display: none; }
  .yk-kart { opacity: 0.55; }
  .yk-kart--arama { top: 4%; left: -6%; } .yk-kart--hiz { top: auto; bottom: 6%; right: -4%; }
}

/* ---------- Yolculuk: yapiskan sahne ---------- */
.yk-yol { position: relative; background: var(--surface-2); }
.js .yk-yol { height: 640vh; }
.yk-sahne { padding-block: 3rem; }
.js .yk-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-block: 4.6rem 0; box-sizing: border-box; overflow: hidden; }
.yk-sahne__ic { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .yk-sahne__ic { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); } }

.yk-harita { position: relative; display: grid; justify-items: center; gap: 0.8rem; }
.yk-svg { width: 100%; max-width: 460px; height: auto; max-height: 70vh; overflow: visible; }
.yk-svg__zemin { fill: none; stroke: var(--line-strong); stroke-width: 6; stroke-dasharray: 2 12; stroke-linecap: round; }
.yk-svg__dolu { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke 0.3s ease; }
.yk--kotu .yk-svg__dolu { stroke: #9AA9B8; }
.yk-durak-nokta circle { fill: var(--surface); stroke: var(--line-strong); stroke-width: 3; transition: fill 0.3s ease, stroke 0.3s ease; }
.yk-durak-nokta text { font: 700 11px var(--font-display); fill: var(--ink-dim); transition: fill 0.3s ease; }
.yk-durak-nokta.is-gecti circle { fill: var(--accent); stroke: var(--accent); }
.yk-durak-nokta.is-gecti text { fill: #fff; }
.yk-durak-nokta.is-kayip { opacity: 0.3; }
.yk-ziyaretci__ic { fill: var(--accent); }
.yk-ziyaretci__hale { fill: rgba(237, 109, 30, 0.22); transform-box: fill-box; transform-origin: center; animation: yk-hale 1.6s ease-out infinite; }
@keyframes yk-hale { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.yk--kotu .yk-ziyaretci__ic { fill: #6B7C8D; }
.yk--kotu .yk-ziyaretci__hale { fill: rgba(107, 124, 141, 0.25); }

/* iyi / kotu dugmesi */
.yk-mod { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.yk-mod button { position: relative; z-index: 1; border: 0; background: none; padding: 0.6rem 1.2rem; font: 600 var(--fs-sm) var(--font-body); color: var(--ink-dim); cursor: pointer; transition: color 0.3s ease; }
.yk-mod button.is-secili { color: #fff; }
.yk-mod__kayan { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--accent); transition: transform 0.4s var(--ease), background 0.3s ease; }
.yk--kotu .yk-mod__kayan { transform: translateX(100%); background: #6B7C8D; }

.yk-sayac { display: flex; align-items: baseline; gap: 0.6rem; }
.yk-sayac b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; color: var(--accent-deep); min-width: 3ch; text-align: right; transition: color 0.3s ease; }
.yk--kotu .yk-sayac b { color: #6B7C8D; }
.yk-sayac span { font-size: var(--fs-sm); color: var(--ink-dim); }
.yk-sayac em { font-style: normal; opacity: 0.8; }

/* paneller */
.yk-paneller { position: relative; }
.yk-ilerleme { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 1.4rem; }
.yk-ilerleme span { height: 4px; border-radius: 4px; background: var(--line); cursor: pointer; transition: background 0.3s ease; }
.yk-ilerleme span.is-dolu { background: var(--accent); }
.yk--kotu .yk-ilerleme span.is-dolu { background: #9AA9B8; }

.yk-panel { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); }
.yk-panel + .yk-panel { margin-top: 1.2rem; }
.js .yk-paneller { min-height: 34rem; }
.js .yk-panel { position: absolute; left: 0; right: 0; top: 1.6rem; margin: 0; opacity: 0; transform: translateY(24px) scale(0.98); pointer-events: none; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.js .yk-panel.is-aktif { opacity: 1; transform: none; pointer-events: auto; }
.yk-panel__no { font: 700 var(--fs-xs) var(--font-display); letter-spacing: 0.14em; color: var(--accent); }
.yk-panel h2 { margin-top: 0.35rem; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.03em; }
.yk-cizim { margin: 1.1rem 0 0.9rem; border-radius: 14px; background: var(--bg); padding: 0.8rem; transition: filter 0.4s ease, opacity 0.4s ease; }
.yk-cizim svg { display: block; width: 100%; height: auto; }
.yk-panel__metin { color: var(--ink-2); line-height: 1.6; }
.yk-panel__biz { margin-top: 0.8rem; font-size: var(--fs-sm); color: var(--ink-dim); }
.yk-panel__biz b { color: var(--ink); }
.yk-kotu, .yk-kotu-svg { display: none; }
.yk--kotu .yk-kotu, .yk--kotu .yk-kotu-svg { display: block; }
.yk--kotu .yk-iyi, .yk--kotu .yk-iyi-svg { display: none; }
.yk--kotu .yk-panel:nth-of-type(n+3) .yk-cizim { filter: grayscale(1); opacity: 0.35; }
.yk--kotu .yk-panel:nth-of-type(n+3) .yk-panel__metin { color: #6B7C8D; font-weight: 600; }
.yk--kotu .yk-panel--hiz .yk-panel__metin { color: #9B2C22; font-weight: 600; }

/* ---------- Durak cizimleri: panel aktif olunca canlanir ---------- */
.yk-c * { transform-box: fill-box; }
/* 1 arama */
.yk-c__yazi-maske { transform-origin: left center; transform: scaleX(0); }
.is-aktif .yk-c__yazi-maske { animation: yk-yaz 1.1s steps(19) 0.2s forwards; }
@keyframes yk-yaz { to { transform: scaleX(1); } }
.yk-c__sonuc { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s var(--ease); }
.is-aktif .yk-c__sonuc { opacity: 1; transform: none; transition-delay: calc(1.3s + var(--i) * 0.15s); }
.is-aktif .yk-c__sonuc--biz { animation: yk-vurgu 1.6s ease-in-out 2s 2; }
@keyframes yk-vurgu { 50% { transform: scale(1.02); } }
/* 2 hiz */
.yk-c__ibre { transform-box: view-box; transform-origin: 210px 180px; transform: rotate(-90deg); transition: transform 1.3s cubic-bezier(.3, 1.4, .5, 1); }
.is-aktif .yk-c__ibre { transform: rotate(-58deg); }
.yk--kotu .is-aktif .yk-c__ibre { transform: rotate(64deg); transition-duration: 2.6s; }
.yk-c--hiz text { opacity: 0; transition: opacity 0.4s ease 1.2s; }
.is-aktif .yk-c--hiz text { opacity: 1; }
.yk--kotu .yk-c--hiz text { transition-delay: 2.4s; }
/* 3 telefon */
.is-aktif .yk-c__kaydir { animation: yk-kaydir 5s ease-in-out 0.4s infinite; }
@keyframes yk-kaydir { 0%, 20% { transform: translateY(0); } 50%, 70% { transform: translateY(-120px); } 100% { transform: translateY(0); } }
.yk-c__parmak { opacity: 0; }
.is-aktif .yk-c__parmak { animation: yk-parmak 5s ease-in-out 0.4s infinite; }
@keyframes yk-parmak { 0%, 15% { opacity: 0; transform: translateY(20px); } 25%, 55% { opacity: 1; transform: translateY(-30px); } 65%, 100% { opacity: 0; } }
/* 4 guven */
.yk-c__kart { opacity: 0; transform: translateY(18px) scale(0.92); transform-origin: center; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.3, 1.5, .5, 1); }
.is-aktif .yk-c__kart { opacity: 1; transform: none; transition-delay: calc(0.2s + var(--i) * 0.2s); }
.yk-c__onay { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 0.6s ease 1.1s; }
.is-aktif .yk-c__onay { stroke-dashoffset: 0; }
/* 5 form */
.yk-c__alan { opacity: 0; transition: opacity 0.3s ease; }
.is-aktif .yk-c__alan { opacity: 1; transition-delay: calc(0.4s + var(--i) * 0.6s); }
.yk-c__tik { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease 1.8s; }
.is-aktif .yk-c__tik { stroke-dashoffset: 0; }
.yk-c__tamam { opacity: 0; transition: opacity 0.4s ease; }
.is-aktif .yk-c__tamam { opacity: 1; transition-delay: 2.7s; }
.is-aktif .yk-c__gonder { animation: yk-bas 0.3s ease 2.3s; opacity: 1; }
@keyframes yk-bas { 50% { transform: scale(0.96); } }
/* 6 bildirim */
.yk-c__balon { opacity: 0; transform: translateY(-30px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.3, 1.5, .5, 1); }
.is-aktif .yk-c__balon { opacity: 1; transform: none; transition-delay: 0.3s; }
.yk-c__panel { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.5s var(--ease); }
.is-aktif .yk-c__panel { opacity: 1; transform: none; transition-delay: 0.9s; }
.yk-c__zil { transform-origin: top center; }
.is-aktif .yk-c__zil { animation: yk-zil 0.9s ease-in-out 0.4s 3; }
@keyframes yk-zil { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.is-aktif .yk-c__satir { animation: yk-vurgu 1.4s ease-in-out 1.5s 2; }

/* ---------- Son: kendi sitenizi tarayin ---------- */
.yk-son__ic { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .yk-son__ic { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.yk-tara { display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0.7rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
.yk-tara input { flex: 1 1 12rem; min-width: 0; border: 0; background: transparent; padding: 0.7rem 1rem; font: 500 var(--fs-body) var(--font-body); color: var(--ink); outline: none; }

/* ---------- Mobil: harita sadelesir ---------- */
@media (max-width: 899px) {
  .yk-svg { display: none; }
  .yk-harita { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .yk-sayac { justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; }
  .yk-sayac span { font-size: var(--fs-xs); text-align: right; }
  .js .yk-paneller { min-height: 31rem; }
  .yk-panel h2 { font-size: 1.45rem; }
  .yk-panel__metin { font-size: var(--fs-sm); }
  .yk-tara { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .yk-kart, .yk-asagi span, .yk-ziyaretci__hale, .is-aktif .yk-c__kaydir, .is-aktif .yk-c__parmak, .is-aktif .yk-c__zil { animation: none !important; }
}