/* Vitrin katmanı: cesur tipografi, siyah/krem bölümler, hareket. site.css'in üstüne biner.
   Kurallar: animasyon yalnız transform/opacity/translate/scale (+ tek seferlik belirmede clip-path); gizli başlangıç durumları
   yalnız `.js` sınıfı + hareket tercihi varken geçerlidir, yani JS kapalıyken ya da "hareketi azalt" seçiliyken içerik düz görünür. */
:root { --e: cubic-bezier(.2, .8, .2, 1); --gri-acik: #c9c6bf; }
html { scroll-padding-top: 5.5rem; scroll-behavior: smooth; }
main { overflow-x: clip; }

/* tipografi */
h1 { font-size: clamp(2.3rem, 8.6vw, 6.4rem); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 5.6vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; }
h3 { letter-spacing: -.01em; }
.ust-yazi { color: var(--gri-koyu); }
.ust-yazi::before { content: "/ "; color: var(--kirmizi); font-weight: 800; }
.ozet { font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; max-width: 40rem; }
.blok { border-top: 0; padding-block: clamp(3.5rem, 9vw, 7rem); }
.son { border-top: 0; padding-block: clamp(4rem, 11vw, 9rem); }
.son h2 { font-size: clamp(2.3rem, 8vw, 5.6rem); line-height: 1; }
.blok > .madde { font-size: clamp(1.1rem, 2.2vw, 1.4rem); list-style: none; padding-left: 0; }
.blok > .madde li { padding-left: 2rem; position: relative; margin-bottom: .9rem; }
.blok > .madde li::before { content: "→"; position: absolute; left: 0; color: var(--kirmizi-koyu); font-family: var(--mono); }

/* üst çubuk */
.ust { position: sticky; top: 0; z-index: 30; }
.ust.golge { box-shadow: 0 8px 0 rgba(21, 21, 21, .07); }
.menu a { text-decoration: none; }
.menu a:hover, .menu a[aria-current] { text-decoration: none; }
.menu a::after { bottom: .55rem; }
.menu a[aria-current]::after { transform: scaleX(1); }

/* siyah bölümler (tam genişlik: gölge + clip-path; yatay taşma yok) */
main > .hero, .koyu {
  background: var(--murekkep); color: var(--kagit);
  box-shadow: 0 0 0 100vmax var(--murekkep); clip-path: inset(0 -100vmax);
}
main > .hero, .koyu { --bag: var(--kagit); }
main > .hero a:not(.dugme), .koyu a:not(.dugme) { color: var(--kagit); }
main > .hero .ust-yazi, .koyu .ust-yazi, .koyu .not, .koyu dt, .koyu .madde li::before { color: var(--gri-acik); }
main > .hero .ozet, .koyu p { color: #dedbd4; }
.koyu .dugme, main > .hero .dugme { background: var(--kagit); color: var(--murekkep); border-color: var(--kagit); box-shadow: 4px 4px 0 var(--kirmizi); }
.koyu .dugme:hover, main > .hero .dugme:hover { box-shadow: 6px 6px 0 var(--kirmizi); }
.koyu :focus-visible, main > .hero :focus-visible { outline-color: var(--kagit); box-shadow: 0 0 0 6px var(--murekkep); }
.hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 11vw, 8.5rem) clamp(2.5rem, 8vw, 6rem); }
.hero::before {
  content: ""; position: absolute; inset: -64px -50vw; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(238, 237, 233, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 237, 233, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 35% 45%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 35% 45%, #000 15%, transparent 75%);
}
.vurgu { position: relative; display: inline-block; }
.vurgu::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .09em; background: var(--kirmizi); transform-origin: left; }

/* şalter motifi (logo A): sağda büyük, yarı saydam */
.salter { position: absolute; z-index: -1; right: 3%; bottom: 7%; width: min(22rem, 34vw); aspect-ratio: 2 / 1; border-radius: 999px; border: clamp(10px, 2vw, 18px) solid rgba(238, 237, 233, .14); pointer-events: none; }
.salter b { position: absolute; top: 25%; right: 6%; height: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--kirmizi); }
.gl-tuval { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero.gl::before, .hero.gl .salter { display: none; }

/* şerit */
.serit { background: var(--kirmizi); color: var(--murekkep); overflow: hidden; border-block: 2px solid var(--murekkep); padding: .8rem 0; user-select: none; }
.serit-ic { display: flex; width: max-content; }
.serit-ic > div { display: flex; flex: none; }
.serit span { font-weight: 800; font-size: clamp(1.5rem, 4.4vw, 2.7rem); line-height: 1.2; text-transform: uppercase; letter-spacing: -.02em; padding-inline: 1.1rem; white-space: nowrap; }
.serit span::after { content: "/"; color: var(--kagit); margin-left: 2.2rem; }

/* adımlar: solda yapışkan başlık, sağda scroll'a bağlı ilerleme çizgisi */
.sticky-bolum { display: grid; gap: 2rem 4rem; }
@media (min-width: 60em) {
  .sticky-bolum { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .sticky-bolum > h2 { position: sticky; top: 7rem; }
}
.adimlar, .takvim { --ilerleme: 1; position: relative; padding-left: 2.25rem; gap: 0; }
.adimlar::before, .takvim::before, .adimlar::after, .takvim::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.adimlar::before, .takvim::before { background: rgba(238, 237, 233, .2); }
.adimlar::after, .takvim::after { background: var(--kirmizi); transform: scaleY(var(--ilerleme)); transform-origin: top; }
.koyu .adimlar li, .koyu .takvim li { background: transparent; border: 0; border-top: 1px solid rgba(238, 237, 233, .18); box-shadow: none; padding: 1.5rem 0 1.75rem; color: var(--kagit); }
.adimlar li strong, .takvim li strong { font-size: 1.35rem; letter-spacing: -.01em; }
.adimlar li strong::before { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: .35rem; color: var(--kirmizi); content: counter(a, decimal-leading-zero); }
.koyu .adimlar li span, .koyu .takvim li span { color: #dedbd4; }

/* kartlar */
.kart { transition: transform .3s var(--e), box-shadow .3s var(--e); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ly, 0px)); }
.kart.egik { box-shadow: 9px 9px 0 var(--murekkep); }
.kartlar { gap: 1.5rem; }

/* düğme */
.dugme { transition: transform .2s var(--e), box-shadow .2s var(--e), translate .25s var(--e); }
.dugme.mik { transition: transform .2s var(--e), box-shadow .2s var(--e), translate .08s linear; }

/* animasyonlu bağlantı çizgisi (varsayılan alt çizgi kalır; kırmızı çizgi soldan dolar) */
a:not(.dugme):not(.logo):not(.atla) { position: relative; }
a:not(.dugme):not(.logo):not(.atla)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .13em; background: var(--kirmizi); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e); pointer-events: none; }
a:not(.dugme):not(.logo):not(.atla):hover::after, a:not(.dugme):not(.logo):not(.atla):focus-visible::after { transform: scaleX(1); }

/* alt çubuk */
.alt { background: var(--murekkep); color: var(--kagit); border-top: 1px solid rgba(238, 237, 233, .2); margin-top: 0; padding-block: 2.5rem; }
.alt a { color: var(--kagit); }
.alt .telif { color: var(--gri-acik); }
.alt-ad { font-size: 1.4rem; }

/* özel imleç (yalnız masaüstü; JS ekler) */
@media (hover: hover) and (pointer: fine) {
  .imlec-var, .imlec-var a, .imlec-var button, .imlec-var summary, .imlec-var label, .imlec-var .kart { cursor: none; }
  .imlec-var input[type="text"], .imlec-var input[type="email"], .imlec-var input[type="tel"], .imlec-var textarea, .imlec-var select { cursor: auto; }
  .imlec, .imlec-nokta { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; opacity: 0; transition: opacity .3s; }
  .imlec { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--kagit); border-radius: 50%; mix-blend-mode: difference; transition: opacity .3s, scale .3s var(--e); }
  .imlec-nokta { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--kirmizi); }
  .imlec-gorunur .imlec, .imlec-gorunur .imlec-nokta { opacity: 1; }
  .imlec-ustte .imlec { scale: 1.9; }
}

/* ---- hareket: yalnız JS var ve kullanıcı hareketi kısmadıysa ---- */
@media (prefers-reduced-motion: no-preference) {
  .vurgu::after { transform: scaleX(0); animation: ciz .9s var(--e) 1.6s forwards; }
  .hero::before { animation: ag 16s linear infinite; }
  .serit-ic { animation: serit 40s linear infinite; }
  .serit:hover .serit-ic { animation-play-state: paused; }
  /* sayfa geçişi: koyu perde açılır; bağlantıya tıklayınca kapanır */
  .js::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--murekkep); border-bottom: 10px solid var(--kirmizi); transform: translateY(100%); animation: gecis-ac .85s var(--e) .05s both; }
  .js.cikis::after { animation: gecis-kapa .45s var(--e) forwards; }

  .js .hero h1 { opacity: 0; }
  .js.hazir .hero h1 { opacity: 1; }
  .kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
  .k { display: inline-block; }
  .c { display: inline-block; animation: kelime .9s var(--e) backwards; animation-delay: calc(var(--i, 0) * 26ms + 550ms); }
  .js main > .hero > :not(h1) { animation: gir .9s var(--e) backwards; animation-delay: 1.15s; }
  .js main > .hero > .ust-yazi { animation-delay: .5s; }
  .js main > .hero > .dugme { animation-delay: 1.4s; }

  .js :is(main .blok > *:not(.kartlar, .adimlar, .takvim, .ozet-liste, .iki), main .son > *, .adimlar > li, .takvim > li, .kartlar > li, .ozet-liste > div, .iki > *, .sss, .basvuru form) {
    transition: opacity .9s var(--e) calc(var(--s, 0) * 90ms), transform .9s var(--e) calc(var(--s, 0) * 90ms), clip-path .9s var(--e) calc(var(--s, 0) * 90ms);
  }
  .js :is(main .blok > *:not(.kartlar, .adimlar, .takvim, .ozet-liste, .iki), main .son > *, .adimlar > li, .takvim > li, .kartlar > li, .ozet-liste > div, .iki > *, .sss, .basvuru form):not(.gorunur) {
    opacity: 0; transform: translateY(2.75rem); clip-path: inset(0 0 45% 0);
  }
  .js :is(.gorunur) { clip-path: inset(-1rem); }
  .js .bitti { clip-path: none; transition-delay: 0s; }
  .js .kart.bitti { transition: transform .3s var(--e), box-shadow .3s var(--e); }
  .js .adimlar, .js .takvim { --ilerleme: 0; }
}
@keyframes ciz { to { transform: scaleX(1); } }
@keyframes ag { to { transform: translate3d(64px, 64px, 0); } }
@keyframes serit { to { transform: translateX(-50%); } }
@keyframes gecis-ac { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes gecis-kapa { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes kelime { from { transform: translateY(110%) rotate(5deg); } }
@keyframes gir { from { opacity: 0; transform: translateY(1.5rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .serit-ic { width: auto; flex-wrap: wrap; }
  .serit-ic > div:nth-child(2) { display: none; }
}

@media (max-width: 30em) {
  h1 { font-size: clamp(2rem, 10.5vw, 2.7rem); }
  .hero { padding-block: 1.5rem 2rem; }
  .salter { opacity: .75; right: 4%; bottom: 1.5rem; width: 9.5rem; }
  .ust-yazi { margin-bottom: .5rem; }
  .adimlar, .takvim { padding-left: 1.5rem; }
}

/* ---- sahne: Lenis, sabit hikâye, yatay bölüm, dev yazı, ters üst çubuk ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

.bolum-koyu { background: var(--murekkep); color: var(--kagit); }
.bolum-koyu a { color: var(--kagit); }
.bolum-koyu .madde li::before { color: var(--kirmizi); }
.hikaye .blok { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.hikaye .madde { max-width: 54rem; margin: 0; }
.hikaye .madde li { font-size: clamp(1.5rem, 4.2vw, 3.1rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; padding-left: 2.6rem; margin-bottom: 1.4rem; }
.hikaye .madde li::before { font-size: .7em; top: .35em; }
.hikaye.pinli { min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hikaye.pinli > .blok { width: 100%; }
.sayac { position: absolute; right: var(--bosluk); top: clamp(1rem, 3vw, 2rem); font: 700 clamp(1rem, 2vw, 1.4rem) var(--mono); color: var(--gri-acik); }
.sayac span:first-child { color: var(--kirmizi); font-size: 2.2em; font-weight: 800; line-height: 1; }
.sayac .cubuk { display: block; height: 4px; margin-top: .6rem; background: var(--kirmizi); transform-origin: left; }

.yatay-aday.yatay .kartlar { display: flex; flex-wrap: nowrap; width: max-content; gap: 1.75rem; margin-top: 2.5rem; padding-bottom: 1rem; will-change: transform; }
.yatay-aday.yatay .kartlar > li { width: min(27rem, 36vw); flex: none; }
.yatay-aday.yatay { padding-bottom: 3rem; }

.sticky-bolum:not(.koyu) .adimlar::before, .sticky-bolum:not(.koyu) .takvim::before { background: rgba(21, 21, 21, .14); }
.koyu .ozet-liste div { border-color: rgba(238, 237, 233, .2); }
.koyu .ozet-liste dd { color: var(--kagit); }

.ust { transition: background-color .3s ease, border-color .3s ease; }
.ust.ters { background: var(--murekkep); border-color: rgba(238, 237, 233, .25); }
.ust.ters a:not(.dugme) { color: var(--kagit); }
.ust.ters .logo img { filter: invert(1) hue-rotate(180deg); }
.ust.ters .dugme { background: var(--kagit); color: var(--murekkep); border-color: var(--kagit); }
.ust.ters :focus-visible { outline-color: var(--kagit); box-shadow: 0 0 0 6px var(--murekkep); }

.alt-ic { display: flex; flex-direction: column; }
.dev-ad { order: 9; margin: 2rem 0 0; padding-top: .12em; font-size: clamp(3rem, 20.5vw, 21rem); font-weight: 900; line-height: .95; letter-spacing: -.05em; color: var(--kagit); white-space: nowrap; overflow: hidden; max-width: none; user-select: none; }
.dev-ad .h { display: inline-block; }
.dev-ad .h:last-child { color: var(--kirmizi); }
.alt .telif { order: 8; }
@media (prefers-reduced-motion: no-preference) {
  .js .dev-ad .h { transform: translateY(110%); }
  .js .dev-ad.gorunur .h { transform: none; transition: transform 1.1s var(--e) calc(var(--i, 0) * 70ms); }
}
@media (max-width: 48em) { .ust { position: static; } html { scroll-padding-top: 1rem; } }
.yatay-aday.yatay { padding-top: 1.5rem; }