/* Ana sayfa, derin sürüm (K3). Telefon önce; masaüstü 64em ve üstü. Tek koyu zemin, kırmızı yalnız şalter, tek eylem düğmesi ve S4.
   Easing iki eğri: --e-cik (belirme, 900 ms) ve --e-tik (yalnız şalter ve gönder, 180 ms). Yalnız transform, opacity, clip-path canlanır.
   Saat damgaları sistemin tek aralıklı yazı tipi (ek dosya yok). */
:root {
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --e-cik: cubic-bezier(.19, 1, .22, 1);
  --e-tik: cubic-bezier(.34, 1.2, .64, 1);
  --balon-m: #1c1c1c;
  --ust-yuk: 56px;
}
[hidden] { display: none !important; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- üst şerit: logo A, TR / EN, ses ---- */
.ust { background: linear-gradient(rgba(6, 6, 6, .85), rgba(6, 6, 6, 0)); }
.ust.golge { background: rgba(6, 6, 6, .8); }
.ust-ic { padding-block: .35rem; min-height: var(--ust-yuk); flex-wrap: nowrap; }
.logo img { width: 112px; }
.ust nav { display: none; }
.ses { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; background: none; border: 0; color: var(--gri-koyu); min-height: 44px; padding: .5rem; cursor: pointer; }
.ses[aria-pressed="true"], .ses:hover { color: var(--kagit); }
.ust-sag { gap: .4rem; }
.ust .dil { padding-inline: .5rem; }

/* ---- sahne iskeleti ---- */
.s { position: relative; z-index: auto; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(5rem, 14vw, 7rem) clamp(3rem, 8vw, 5rem); }
.s-ic, .s-ic5, .s-ic7 { position: relative; z-index: 2; }
.s-ic { display: grid; gap: clamp(1.5rem, 5vw, 3rem); width: 100%; }
.s h2 { font-size: clamp(1.9rem, 7.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.alt-yazi { color: var(--gri-koyu); font-size: 1.05rem; margin: 1rem 0 0; }
.etiket { display: inline-block; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gri-koyu); border: 1px solid var(--cizgi); border-radius: .4rem; padding: .35rem .55rem; margin-top: 1.2rem; }
.s .dugme { text-transform: none; font: 700 1.2rem/1 var(--yazi); letter-spacing: 0; border-radius: 99px; } /* 19 px kalın = büyük metin (AA 3:1): beyaz/#E5372C 4,0:1 */
.dugme-dolu { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme-dolu::after { display: none; }
.dugme-dolu::before { background: #fff; }

/* ---- tek tuval: masaüstünde sabit tam ekran, telefonda S2 bandında ---- */
.sahne3d { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
.sahne3d canvas { display: block; width: 100%; height: 100%; }
.gl .sahne3d { opacity: 1; }
.sahne3d.uyku { visibility: hidden; }
.s-band .sahne3d { position: absolute; z-index: 1; }

/* ---- S0 ---- */
.s0 .s-ic { align-content: space-between; min-height: calc(100svh - 9rem); }
.s0 h1 { font-size: clamp(2.5rem, 12.5vw, 5.4rem); line-height: .96; letter-spacing: -.035em; margin: 0 0 1.6rem; }
.s0 .ust-yazi { margin-bottom: 1.2rem; }
.s0 .s-gorsel { order: -1; position: relative; }
.p-s0 { display: none; }
.gelen { max-width: 22rem; animation: gir 900ms var(--e-cik) 150ms backwards; }
.gelen .etiket { margin: 0 0 .6rem; }
.balon { background: var(--balon-m); border-radius: 1.25rem; padding: .85rem 1.1rem .6rem; }
.balon p, .m p, .b p { margin: 0; line-height: 1.4; }
.zaman { display: block; text-align: right; font: 400 .7rem/1 var(--mono); color: var(--gri-koyu); margin-top: .4rem; }
.durum-sat { display: flex; align-items: center; gap: .5rem; font: 400 .74rem var(--mono); color: var(--gri-koyu); margin: .7rem 0 0; }
.durum-sat i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--kirmizi); animation: yan 1200ms ease-in-out 1s 3; }
@keyframes gir { from { opacity: 0; transform: translateY(16px); } }
@keyframes yan { 50% { opacity: .2; } }

/* ---- S1: sohbet kaydırmayla ilerler ---- */
.s1 { display: block; padding: 0; min-height: 0; }
.s1-ic { min-height: 100svh; display: flex; align-items: center; padding-block: 5rem 3rem; }
.akis { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 26rem; }
.m { position: relative; max-width: 88%; padding: .8rem 1.05rem .55rem; border-radius: 1.25rem; background: var(--balon-m); }
.m-isletme { justify-self: end; background: var(--kagit); color: #111; }
.m-isletme .zaman { color: #555; }
.s1-saat { font: 400 clamp(3.2rem, 14vw, 9rem)/1 var(--mono); letter-spacing: -.04em; margin: 0 0 1.2rem; color: var(--kagit); }
.s1 .s-ic { align-content: space-between; }
.s1 .s-metin { display: contents; }
.s1 .s1-saat { order: -2; }
.s1 .akis { order: -1; }
.s1 .s-metin h2 { margin-top: 1.5rem; }
.gec { position: absolute; top: -.7rem; right: .8rem; font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; background: var(--kirmizi); color: #fff; padding: .25rem .45rem; border-radius: .35rem; }

/* ---- S2 ---- */
.s2 .s-ic { align-content: center; }
.s-band { position: relative; aspect-ratio: 39 / 32; width: 100%; order: -1; }
.poster-ikili { position: absolute; inset: 0; }
.poster-ikili > span { position: absolute; inset: 0; transition: opacity 300ms ease; }
.poster-ikili img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pa, .pm { opacity: 0; }
.s-band.acik .pk { opacity: 0; } .s-band.acik .pa { opacity: 1; }
.gl .poster-ikili { opacity: 0; transition: opacity 300ms ease; }
.s2-dugme { display: none; position: absolute; inset: 0; z-index: 3; background: transparent; border: 0; cursor: pointer; border-radius: 2rem; }
.js .s2-dugme { display: block; }
.s2-dugme:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: -6px; }
.ipucu { display: none; font: 500 .85rem var(--mono); letter-spacing: .04em; color: var(--gri-koyu); margin: 1.2rem 0 0; }
.js .ipucu { display: block; }

/* ---- S3: canlı gösterim ---- */
.telefon { width: 100%; max-width: 26.5rem; margin-inline: auto; background: #0c0c0d; border: 1px solid var(--cizgi-guclu); border-radius: 2.2rem; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; min-height: 34rem; }
.etiket-kutu { margin: 0; font: 400 .76rem/1.4 var(--yazi); border: 1px dashed var(--cizgi-guclu); border-radius: .6rem; padding: .55rem .7rem; color: var(--kagit); }
.sektorler { display: flex; flex-wrap: wrap; gap: .4rem; }
.sek { font: 500 .8rem/1 var(--yazi); padding: .6rem .85rem; min-height: 44px; border-radius: 99px; border: 1px solid var(--cizgi-guclu); background: none; color: var(--kagit); }
button.sek { cursor: pointer; }
.sek.aktif { background: var(--kagit); color: #111; border-color: var(--kagit); }
.sohbet { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; max-height: 22rem; scrollbar-width: thin; }
.b { max-width: 88%; padding: .75rem 1rem; border-radius: 1.2rem; font-size: .98rem; }
.b-m { align-self: flex-start; background: var(--balon-m); }
.b-a { align-self: flex-end; background: var(--kagit); color: #111; }
.b-a p { min-height: 1.4em; color: #111; }
.m-isletme p { color: #111; }
.yaziyor { margin: 0; font: 400 .74rem var(--mono); color: var(--gri-koyu); }
.cipler { display: none; flex-wrap: wrap; gap: .4rem; }
.js .cipler { display: flex; }
.cip { font: 400 .85rem/1.2 var(--yazi); text-align: left; padding: .6rem .85rem; min-height: 44px; border-radius: 99px; border: 1px solid var(--cizgi-guclu); background: none; color: var(--kagit); cursor: pointer; transition: border-color 200ms var(--e-cik), background 200ms var(--e-cik); }
.cip:hover { border-color: var(--kagit); }
.cipler.vurgu .cip { border-color: var(--kirmizi); background: rgba(229, 55, 44, .12); }
.yaz { display: flex; gap: .5rem; align-items: stretch; }
.yaz input { flex: 1; min-width: 0; font: 400 1rem var(--yazi); color: var(--kagit); background: transparent; border: 1px solid var(--cizgi-guclu); border-radius: 99px; padding: .8rem 1.1rem; min-height: 52px; }
.yaz input:focus { outline: none; border-color: var(--kagit); }
.yaz .dugme { min-height: 52px; padding-inline: 1.2rem; }
.yaz .dugme::before { display: none; }
.yaz .dugme:active { scale: 1; transition: transform 180ms var(--e-tik); transform: scale(.94); }

/* ---- S4: sitenin tek kırmızı zemini ---- */
.s4 { color: #fff; }
.s4::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--kirmizi); }
.s4 .s-ic { align-content: center; }
.s4 h2 { color: #fff; }
.s4-kart { background: #0b0b0b; color: var(--kagit); border-radius: 1.4rem; padding: 1.4rem 1.5rem; max-width: 24rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35); justify-self: start; }
.k-ust { margin: 0; font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kirmizi-koyu); }
.k-baslik { margin: .8rem 0 .3rem; font: 600 1.7rem/1.1 var(--gosterim); letter-spacing: -.02em; }
.k-not { margin: 0; color: var(--gri-koyu); }
.k-alt { display: flex; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0; font: 400 .72rem var(--mono); color: var(--gri-koyu); }

/* ---- S5 ---- */
.s5 { min-height: 80svh; }
.s-ic5 { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.s5 h2 { max-width: 20ch; }
.adim4 { list-style: none; margin: 2.5rem 0 1.2rem; padding: 0; display: grid; gap: .9rem; position: relative; }
.adim4 li { font: 600 1.25rem var(--gosterim); letter-spacing: -.01em; display: flex; align-items: baseline; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--cizgi); }
.adim4 i { font: 400 .72rem var(--mono); font-style: normal; color: var(--kirmizi-koyu); }
.s5 .dugme { margin-top: 1.5rem; }

/* adım gecikmeleri (satır içi stil yok) */
.adim4 li:nth-child(2) { --i: 1; } .adim4 li:nth-child(3) { --i: 2; } .adim4 li:nth-child(4) { --i: 3; }

/* ---- S6: nasıl çalışıyoruz ---- */
.s6 h2 { max-width: 22ch; font-size: clamp(1.8rem, 6.6vw, 3.8rem); }
.s6 .adim4 li { font-size: 1.4rem; }
.s6 .dugme { margin-top: 1.5rem; }

/* ---- S7: mevcut form (sözleşme aynı) ---- */
.s7 { min-height: 0; align-items: flex-start; }
.s-ic7 { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.s7 h2 { margin-bottom: 1.2rem; }

/* ---- telefon: kareye uyum (kart/portre üstte, metin altta; tam genişlik eylem düğmeleri) ---- */
@media (max-width: 63.99em) {
  .s0 .dugme, .s5 .dugme, .s6 .dugme { width: 100%; }
  .s4 .s-ic { align-content: space-between; min-height: calc(100svh - 9rem); }
  .s4 .s4-kart { order: -1; margin-top: 2rem; }
}

/* ---- alt bilgi ---- */
.alt .alt-bag { margin-bottom: .5rem; }

/* ---- hareket (yalnız tercih engellenmemişse): gizli başlangıç durumları ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .r:not(.gorunur):not(.s4) { opacity: 0; transform: translateY(2rem); }
  .js .r { transition: opacity 900ms var(--e-cik), transform 900ms var(--e-cik), clip-path 900ms var(--e-cik); }
    .js .s1 { height: 320svh; }
  .js .s1-ic { position: sticky; top: 0; }
  .js .s3 { display: block; padding: 0; height: calc(100svh + 70svh); }
  .js .s3-ic { position: sticky; top: min(0px, calc(100svh - var(--s3h, 100svh))); min-height: 100svh; display: flex; align-items: center; padding-block: clamp(5rem, 14vw, 7rem) clamp(3rem, 8vw, 5rem); }
  .js .m { opacity: var(--g, 0); transform: translateY(calc((1 - var(--g, 0)) * 14px)); }
  .js .m.soluk { opacity: calc(var(--g, 0) * .4); }
  .js .s4::before { clip-path: circle(0% at 70% 50%); }
  .js .s4.gorunur::before { clip-path: circle(150% at 70% 50%); transition: clip-path 900ms var(--e-cik); }
  .js .s4-kart { opacity: 0; transform: translateY(40px); }
  .js .s4.gorunur .s4-kart { opacity: 1; transform: none; transition: opacity 900ms var(--e-cik) 200ms, transform 900ms var(--e-cik) 200ms; }
  .js .adim4 li { opacity: 0; transform: translateY(1rem); }
  .gorunur .adim4 li, .adim4.gorunur li { opacity: 1; transform: none; transition: opacity 900ms var(--e-cik) calc(var(--i, 0) * 120ms), transform 900ms var(--e-cik) calc(var(--i, 0) * 120ms); }
}
@media (prefers-reduced-motion: reduce) { .gelen { animation: none; } .sahne3d { display: none; } }

/* ---- masaüstü ---- */
@media (min-width: 64em) {
  .ust nav { display: block; }
  .ust-ic { padding-block: .5rem; }
  .ust .menu a { font-size: .72rem; color: var(--gri-koyu); }
  .ust .menu a:hover { color: var(--kagit); }
  .s-ic { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; column-gap: 4rem; }
  .s h2 { font-size: clamp(2.2rem, 3.9vw, 4.2rem); }
  .s0 .s-ic { min-height: 0; align-content: center; }
  .s0 h1 { font-size: clamp(3rem, 5.3vw, 5.6rem); }
  .s0 .s-gorsel { order: 0; align-self: stretch; min-height: 70svh; }
  .gelen { position: absolute; top: 14svh; left: 18%; }
  .s0 { overflow: hidden; }
  .p-s0 { display: block; position: absolute; z-index: 0; left: 73%; top: 62%; height: 83svh; width: auto; max-width: none; translate: -50% -50%; opacity: 1; transition: opacity 300ms ease; pointer-events: none; }
  .gl .p-s0 { opacity: 0; }
  .s1-ic .s-ic { align-items: center; }
  .akis { max-width: 27rem; justify-self: center; }
  .s1 .s-ic { align-content: center; }
  .s1 .akis { order: 0; align-self: start; margin-top: 4svh; }
  .s1 .s-metin { display: flex; align-self: stretch; flex-direction: column; justify-content: space-between; min-height: 70svh; }
  .s-band { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 70svh; order: 0; }
  .s2 .s-metin { grid-column: 1; grid-row: 1; }
  .pk, .pa { display: none; }
  .pm { opacity: 1; }
  .pm img { object-fit: contain; }
  .telefon { margin: 0; grid-column: 2; min-height: 44rem; max-width: 27.5rem; justify-self: center; }
  .s3 .s-metin { grid-column: 1; }
  .s3 .s-ic { grid-template-columns: minmax(0, 36%) minmax(0, 1fr) minmax(0, 24%); }
  .s3 .telefon { grid-column: 2; }
  .s4 .s-ic { align-content: center; }
  .s4-kart { grid-column: 2; align-self: start; margin-top: -14svh; justify-self: center; }
  .adim4 { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .adim4::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--kirmizi); transform: scaleX(var(--g, 1)); transform-origin: left; }
  .adim4 li { flex-direction: column; gap: .5rem; border-top: 0; padding-top: 1.2rem; font-size: 1.6rem; }
}