@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('../fonts/jbm-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap; src: url('../fonts/jbm-700.woff2') format('woff2'); }
:root { --murdum: #502f4c; --ametist: #70587c; --lavanta: #c8b8db; --pudra: #f9f4f5; --sis: #e8dfec; --murekkep: #171218; --ust: 72px; --kenar: clamp(16px, 5vw, 72px); --g: Georgia, 'Times New Roman', serif; --o: 'Outfit', system-ui, sans-serif; --m: 'JetBrains Mono', monospace; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pudra); scroll-padding-top: var(--ust); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pudra); color: var(--murekkep); font: 18px/1.6 var(--o); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ametist); outline-offset: 4px; }
.atla { position: fixed; left: 16px; top: -64px; z-index: 30; padding: 8px 16px; background: var(--murdum); color: var(--pudra); border-radius: 24px; }
.atla:focus { top: 16px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ku { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--ust); display: flex; align-items: center; gap: 40px; padding-inline: var(--kenar); background: rgb(249 244 245 / .9); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(200 184 219 / .5); }
.ku-logo { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; }
.ku-logo .em { width: 38px; height: auto; }
.ku-logo .wm { width: 104px; height: auto; }
.ku-logo i { width: 1px; height: 24px; background: var(--ametist); }
.ku-cta { flex: none; padding: 8px 24px; border-radius: 24px; background: var(--murdum); color: var(--pudra); font: 600 15px var(--o); text-decoration: none; }
.ku-don { flex: none; font: 12px var(--m); letter-spacing: .1em; color: var(--ametist); text-decoration: none; }
.ray { position: relative; flex: 1; min-width: 0; height: 40px; }
.ray-cizgi, .ray-dolu { position: absolute; left: 6px; right: 6px; top: 11px; height: 2px; background: var(--lavanta); }
.ray-dolu { right: auto; width: 0; background: var(--ametist); }
.ray ol { position: absolute; inset: 0 6px; margin: 0; padding: 0; list-style: none; }
.ray li { position: absolute; top: 0; width: 0; left: calc(var(--i) / 7 * 100%); }
.ray a { position: absolute; top: 0; left: -40px; width: 80px; height: 40px; text-align: center; text-decoration: none; font: 10.5px var(--m); letter-spacing: .1em; color: var(--ametist); padding-top: 20px; }
.ray a::before { content: ''; position: absolute; left: 35px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--pudra); border: 1.5px solid var(--lavanta); }
.ray li.gecti a::before { background: var(--ametist); border-color: var(--ametist); }
.ray li.etkin a { color: var(--murdum); font-weight: 700; }
.ray li:first-child a { left: 0; width: 80px; text-align: left; }
.ray li:first-child a::before { left: -5px; }
.ray li:last-child a { left: auto; right: 0; width: 80px; text-align: right; }
.ray li:last-child a::before { left: auto; right: -5px; }
.ray-nokta { position: absolute; left: 6px; top: 12px; width: 13px; height: 13px; margin: -6.5px; border-radius: 50%; background: var(--murdum); box-shadow: 0 0 0 6px rgb(200 184 219 / .55); opacity: 0; }

.acilis { position: relative; padding: calc(var(--ust) + 64px) var(--kenar) 48px; }
.acilis-sahne { position: relative; }
.et { margin: 0 0 24px; font: 13px var(--m); letter-spacing: .14em; color: var(--ametist); }
.acilis h1, .ara h2, .son h2 { margin: 0; font-family: var(--g); font-weight: 400; letter-spacing: -.01em; color: var(--murdum); }
h1 em, h2 em { display: block; font-style: italic; color: var(--ametist); }
.acilis h1 { font-size: clamp(56px, 8.4vw, 128px); line-height: 1.04; }
.acilis-ozet { max-width: 620px; margin: 24px 0 0; font-size: clamp(18px, 1.6vw, 22px); }
.kapak { width: min(100%, 1400px); margin: 48px auto 0; }
.kapak img { width: 100%; box-shadow: 0 32px 64px -32px rgb(80 47 76 / .4); }

/* Pano ekranın görünen yüksekliğine sığar; çok alçak ekranda okunur genişlikte kalır. */
.akis-pano { position: relative; width: max(min(100%, 640px), min(100%, 1400px, calc((100svh - var(--ust) - 32px) * var(--ar, 1.27)))); margin: 16px auto; }
.akis-pano.genis { width: min(100%, 1400px); }
.akis-pano figure { margin: 0; box-shadow: 0 24px 48px -32px rgb(80 47 76 / .32); }
.akis-pano img, .akis-pano video { width: 100%; }
.pano-boy { position: absolute; right: 16px; bottom: 16px; z-index: 2; min-height: 40px; padding: 8px 16px; border: 1px solid var(--lavanta); border-radius: 24px; background: rgb(249 244 245 / .92); color: var(--murdum); font: 13px var(--o); cursor: pointer; }
.pano-boy { opacity: 0; transition: opacity .2s; }
.akis-pano:hover .pano-boy, .pano-boy:focus-visible, .genis .pano-boy { opacity: 1; }
.pano-boy:hover { background: var(--pudra); border-color: var(--ametist); }
@media (hover: none) { .pano-boy { display: none; } }
.dolum { max-width: 980px; margin: 0 auto; padding: clamp(64px, 12vw, 160px) var(--kenar); font-family: var(--g); font-size: clamp(26px, 3.2vw, 44px); line-height: 1.32; color: var(--murdum); }
.dolum p { margin: 0; }
.dolum small { display: block; margin-top: 32px; font: 16px/1.6 var(--o); color: var(--ametist); }
.ara { padding: clamp(64px, 12vw, 160px) var(--kenar); overflow: hidden; }
.ara-ic { width: min(100%, 1256px); margin-inline: auto; }
.ara-no { display: block; font: 700 clamp(96px, 16vw, 220px)/1 var(--m); color: transparent; -webkit-text-stroke: 1.5px var(--ametist); }
.ara h2 { margin-top: 24px; font-size: clamp(56px, 9vw, 136px); line-height: 1.06; }
.ara h2 span, .ara h2 b { display: block; font-weight: 400; }
.ara p { margin: 32px 0 0; max-width: 760px; font-size: clamp(20px, 2vw, 28px); }
.ara svg { display: block; width: 100%; height: 96px; margin-top: 40px; overflow: visible; }
.site-bant { width: min(100%, 1400px); margin: 0 auto; padding: 48px var(--kenar); text-align: center; }
.site-bant a { font: 600 clamp(20px, 2.4vw, 32px) var(--o); color: var(--murdum); text-decoration-color: var(--lavanta); text-underline-offset: 8px; }
.son { padding: clamp(64px, 12vw, 160px) var(--kenar); }
.son-ic { width: min(100%, 1256px); margin-inline: auto; }
.son h2 { font-size: clamp(48px, 7.4vw, 112px); line-height: 1.06; }
.son p { max-width: 720px; margin: 32px 0 0; font-size: clamp(18px, 1.6vw, 22px); }
.son ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 48px 0 0; padding: 0; list-style: none; }
.son li { border-top: 1px solid var(--lavanta); }
.son li a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0; text-decoration: none; }
.son li span { font: 13px/1.8 var(--m); letter-spacing: .14em; color: var(--ametist); }
.son-cta { display: inline-block; margin-top: 48px; padding: 16px 32px; border-radius: 32px; background: var(--murdum); color: var(--pudra); font-weight: 600; text-decoration: none; }
.son .son-dil { margin-top: 32px; font-size: 16px; color: var(--ametist); }
.kalt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 32px var(--kenar); border-top: 1px solid rgb(200 184 219 / .6); font-size: 15px; }
.kalt nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.kalt a { text-decoration: none; }

/* Kaydırma kipi yalnız JS ve normal hareket tercihiyle açılır; aksi hâlde doğal akış kalır. */
html.akis { scroll-behavior: smooth; }
.akis .acilis { height: 240svh; padding: 0; }
.akis .acilis-sahne { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: calc(var(--ust) + clamp(24px, 6vh, 64px)) var(--kenar) 0; }
.akis .kapak { --gen: min(calc(100vw - 32px), calc((100svh - var(--ust) - 24px) * 1.2785)); position: absolute; left: 50%; top: calc(var(--ust) + 12px); width: var(--gen); margin: 0 0 0 calc(var(--gen) / -2); transform-origin: 50% 0; will-change: transform; }
.akis .akis-pano figure { will-change: transform, opacity; }
.akis .ara { height: 200svh; padding: 0; overflow: clip; }
.akis .ara-gecis { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: var(--ust) var(--kenar) 0; overflow: hidden; }
.akis .ara h2 span { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.akis .ara h2 b { will-change: transform; }
@media (max-height: 760px) and (min-width: 861px) {
  .ara-no { font-size: 120px; }
  .ara h2 { font-size: 88px; }
  .ara svg { height: 56px; margin-top: 16px; }
}
@media (max-width: 860px) {
  :root { --ust: 104px; }
  .ku { flex-wrap: wrap; gap: 0 16px; align-content: center; justify-content: space-between; }
  .ku-don { display: none; }
  .ray { order: 3; flex: 0 0 100%; height: 32px; }
  .ray a { font-size: 0; }
  .ray li.etkin a { font-size: 11px; }
  .ray li:not(:first-child):not(:last-child).etkin a { width: 120px; left: -60px; }
  .ray li:not(:first-child):not(:last-child).etkin a::before { left: 55px; }
  .son ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html.akis { scroll-behavior: auto; } }