/* talep-kutusu.css · Talep kutusu 1A (3 Kas 2026). Kâğıt yaprak üstünde balonlar, yazılan mürekkebe döner, basışın cevabı yaprağın arka yüzü.
   Renk, boşluk ve süre yalnız tokens.css'ten. Hareket yalnız transform ve opacity; iç kaydırma yok: kutu sayfayla birlikte akar.
   Reddedilen hareketler: üç nokta ve harf harf soru (hukuk: «yazıyor» görünüşü 0, kişi yazıyor sanılır) · kaydırmayla açılan balon (kaydırmayı bağlar) ·
   tam ekran yapışkan sahne (telefon kaydırmasını keser) · yuvarlak ripple (stok; taşkın canvas'ta düzensiz kenarla). */

.talep-kutu[hidden],
.talep-kutu [hidden],
.talep-geri[hidden] {
  display: none !important;
}

/* Form yalnız kutu gerçekten açıldıysa çekilir: betik hatası, JS kapalı, hareket azaltma ve EN kipte bugünkü gibi durur. */
:root[lang="tr"][data-talep="hazir"]:not([data-talep-form]) #contact-form {
  display: none;
}

:root[data-talep-form] .talep-kutu {
  display: none;
}

.talep-kutu {
  --talep-zemin: var(--tarife-kagit);
  --talep-soru-zemin: var(--kagit);
  --talep-alan-zemin: var(--tarife-kagit-secili);
  grid-column: 6 / 13;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: var(--space-0);
  margin-top: var(--contact-form-offset);
  padding: var(--space-6);
  overflow: hidden;
  border: var(--border-width) solid var(--cizgi);
  background: var(--talep-zemin);
  box-shadow: var(--golge-levha);
  color: var(--text);
}

.talep-kutu[data-register="arka-yuz"] {
  --talep-zemin: var(--arka-yuz);
  --talep-soru-zemin: var(--talep-arka-soru);
  --talep-alan-zemin: var(--talep-arka-soru);
}

/* ── Baş ── */
.talep-bas {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: opacity var(--sure-gerilim) var(--egri-senet);
}

.dunya .talep-ad {
  margin: var(--space-0);
  font-size: var(--text-lede);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-dunya-baslik);
}

.dunya .talep-ozet,
.dunya .talep-guvence,
.dunya .talep-ipucu,
.dunya .talep-uyari,
.dunya .talep-hata,
.dunya .talep-durum {
  font-size: var(--text-base);
  line-height: var(--leading-dunya-lede);
}

.talep-ozet,
.talep-guvence,
.talep-ipucu {
  color: var(--muted);
}

/* ── Akış ── */
.talep-akis {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.talep-kutu:not([data-geldi]) .talep-akis {
  opacity: 0;
}

.talep-tur {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: var(--space-0);
  transition: opacity var(--sure-gerilim) var(--egri-senet);
}

.dunya .talep-balon {
  display: block;
  width: fit-content;
  max-width: var(--talep-balon-en);
  margin: var(--space-0);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--talep-yaricap);
  font-size: var(--text-lede);
  line-height: var(--leading-dunya-lede);
  overflow-wrap: anywhere;
  transition: opacity var(--sure-gerilim) var(--egri-senet);
}

/* Tek hedefe daralma: metin hazır olunca önceki balonlar söner, kontrast 6,2:1'in altına inmez (tokens). Yalnız balon: Düzelt ve güvence satırı tam kontrastta kalır. */
.talep-kutu[data-asama="hazir"] .talep-tur:not([data-tur="hazir"]) .talep-balon {
  opacity: var(--talep-sonuk);
}

.talep-soru {
  align-self: flex-start;
  border-end-start-radius: var(--talep-kuyruk);
  background: var(--talep-soru-zemin);
  color: var(--text);
  transform-origin: 0 100%;
}

/* backwards: animasyon bitince dolgu kalmaz, sönme kuralı balona işler. */
.talep-kutu[data-geldi] .talep-soru {
  animation: talep-balon var(--sure-balon) var(--egri-balon) backwards;
}

.talep-kutu[data-geldi] :is(.talep-yazi, .talep-secenek, .talep-uyari, .talep-mektup, .talep-tur > .talep-gonder) {
  animation: talep-gel var(--sure-reveal) var(--egri-senet) both;
  animation-delay: var(--sure-balon-ara);
}

.talep-kutu[data-geldi] .talep-tur > .talep-gonder {
  animation-delay: calc(var(--sure-balon-ara) * 2);
}

/* ── Yazı alanı: boş alan bekler ── */
.talep-yazi {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--talep-yaricap);
  background: var(--talep-alan-zemin);
}

.talep-yazi:hover {
  border-color: var(--text);
}

/* Yazarken alan hep odakta: sitenin 3 px altın halkası burada sürekli durur ve mürekkep çizgisini boğar. Kenar 2 px'e kalınlaşır, çizgi ondan koyu kalır. Kontrast kâğıtta ≥ 3:1. */
.talep-yazi:has(.talep-alan:focus) {
  outline: var(--talep-ince) solid var(--muted);
  outline-offset: calc(var(--border-width) * -1);
}

@supports not selector(:has(*)) {
  .talep-yazi:focus-within {
    outline: var(--talep-ince) solid var(--muted);
    outline-offset: calc(var(--border-width) * -1);
  }
}

.talep-yazi[data-gecersiz] {
  border-color: var(--status-error);
  box-shadow: inset var(--focus-width) 0 0 0 var(--status-error);
}

.talep-yazi-uzun {
  flex-wrap: wrap;
  padding-right: var(--space-3);
}

.dunya .talep-alan {
  flex: 1 1 auto;
  width: var(--size-full);
  min-width: var(--space-0);
  min-height: var(--talep-ilet);
  padding: var(--space-0);
  border: var(--space-0);
  border-radius: var(--radius-none);
  outline: none;
  background: var(--transparent);
  color: var(--text);
  caret-color: var(--text);
  font-size: var(--text-lede);
  line-height: var(--leading-dunya-lede);
}

.talep-alan::placeholder {
  color: var(--muted);
  opacity: 1;
}

textarea.talep-alan {
  display: block;
  field-sizing: content;
  flex-basis: var(--size-full);
  max-height: var(--talep-metin-tavan);
  padding-block: var(--space-2);
  resize: none;
}

/* Yanıp sönen imleç: odaksız boş alanda da "sıra sizde" der; klavyeyi açmaz, sayfayı kaydırmaz. */
.talep-imlec {
  position: absolute;
  top: calc(var(--space-2) + (var(--talep-ilet) - var(--leading-dunya-lede) * 1em) / 2);
  left: calc(var(--space-4) - var(--talep-ince));
  width: var(--talep-ince);
  height: calc(var(--leading-dunya-lede) * 1em);
  background: var(--text);
  font-size: var(--text-lede);
  opacity: 0;
  pointer-events: none;
}

.talep-yazi-uzun .talep-imlec {
  top: calc(var(--space-2) + var(--space-2));
}

.talep-kutu[data-ekranda] .talep-imlec {
  animation: talep-imlec var(--sure-imlec) steps(1) infinite;
}

.talep-yazi:not([data-bos]) .talep-imlec,
.talep-yazi:focus-within .talep-imlec {
  display: none;
}

/* Mürekkep çizgisi yazanı izler: uzunluğa göre uzar, tek öğe, transform. */
.talep-cizgi {
  position: absolute;
  right: var(--talep-yaricap);
  bottom: calc(var(--border-width) * -1);
  left: var(--talep-yaricap);
  height: var(--talep-ince);
  background: var(--text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--sure-mikro) var(--egri-senet);
  pointer-events: none;
}

.talep-ilet {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--talep-ilet);
  height: var(--talep-ilet);
  padding: var(--space-0);
  border: var(--border-width) solid var(--muted);
  border-radius: 50%;
  background: var(--transparent);
  color: var(--muted);
  touch-action: manipulation;
  transition: background-color var(--sure-mikro) ease-out, border-color var(--sure-mikro) ease-out, color var(--sure-mikro) ease-out, transform var(--sure-basma) var(--egri-senet);
}

.talep-ilet svg {
  width: var(--space-5);
  height: var(--space-5);
}

.talep-yazi[data-dolu] .talep-ilet {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.talep-eylem {
  flex: 1 0 var(--size-full);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-1);
}

.talep-ipucu {
  display: none;
  margin-right: auto;
}

@media (hover: hover) and (pointer: fine) {
  .talep-ipucu {
    display: block;
  }
}

.talep-hazirla {
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--talep-yaricap);
  background: var(--transparent);
  color: var(--text);
  font-weight: var(--weight-heavy);
  touch-action: manipulation;
  transition: background-color var(--sure-mikro) ease-out, border-color var(--sure-mikro) ease-out, color var(--sure-mikro) ease-out, transform var(--sure-basma) var(--egri-senet);
}

.talep-yazi[data-dolu] .talep-hazirla {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.talep-secenek {
  align-self: flex-start;
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--talep-yaricap);
  background: var(--transparent);
  color: var(--text);
  touch-action: manipulation;
  transition: border-color var(--sure-mikro) ease-out, transform var(--sure-basma) var(--egri-senet);
}

.talep-uyari {
  color: var(--text);
}

.talep-hata {
  padding-left: var(--space-3);
  border-left: var(--focus-width) solid var(--status-error);
  color: var(--status-error);
}

/* ── Yanıt: yazılan mürekkebe döner, küçük bir damla bırakır ── */
.talep-yanit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: var(--space-0);
}

.dunya .talep-yanit-balon {
  position: relative;
  margin-right: var(--space-3);
  border-end-end-radius: var(--talep-kuyruk);
  background: var(--text);
  color: var(--surface);
  transform-origin: 100% 100%;
  white-space: pre-wrap;
}

.talep-yanit-balon::after {
  content: "";
  position: absolute;
  right: calc(var(--talep-damla) * -1.5);
  bottom: var(--space-hairline);
  width: var(--talep-damla);
  height: var(--talep-damla);
  border-radius: 50%;
  background: var(--text);
}

.talep-kutu[data-geldi] .talep-yanit-balon::after {
  animation: talep-damla var(--sure-reveal) var(--egri-balon) both;
  animation-delay: var(--sure-balon-ara);
}

/* Hazır aşamada metnin tamamı mektupta: balon dört satırda kısılır. Kısıt görünüşte; metin DOM'da tam kalır. */
.talep-kutu[data-asama="hazir"] .talep-yanit-balon [data-yanit-metin] {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.talep-duzelt,
.talep-gec {
  min-height: var(--control-min-height);
  padding: var(--space-0);
  border: var(--space-0);
  background: var(--transparent);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  touch-action: manipulation;
}

.talep-duzelt {
  flex: none;
  padding-inline: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .talep-duzelt:hover,
  .talep-gec:hover,
  .talep-secenek:hover {
    color: var(--text);
    border-color: var(--text);
  }
}

/* ── Mektup: hazır metin ── */
.talep-mektup {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--cizgi);
  background: var(--talep-alan-zemin);
}

.talep-kunye {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-0);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--cizgi);
}

.talep-kunye div {
  display: flex;
  gap: var(--space-3);
  min-width: var(--space-0);
}

.dunya .talep-kunye :is(dt, dd) {
  margin: var(--space-0);
  font-size: var(--text-base);
  line-height: var(--leading-dunya-lede);
}

.talep-kunye dt {
  flex: none;
  width: 3.5ch;
  color: var(--muted);
}

.talep-kunye dd {
  min-width: var(--space-0);
  overflow-wrap: anywhere;
}

.dunya .talep-govde {
  font-size: var(--text-body);
  line-height: var(--leading-dunya-lede);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

/* ── Gönder: tek hedef, üzerine gelinince dolar, basış üç kare ── */
.talep-gonder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.dunya .talep-ac {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--talep-cta);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--talep-yaricap);
  background: var(--text);
  color: var(--surface);
  font-size: var(--text-lede);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-dunya-baslik);
  scroll-margin-block: calc(var(--header-height) + var(--space-4)) var(--space-6);
  touch-action: manipulation;
  transition: transform var(--sure-basma) var(--egri-senet);
}

.talep-ac span {
  font-weight: var(--weight-heavy);
}

.talep-ac svg {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  transition: transform var(--sure-gerilim) var(--egri-senet);
}

/* Flaş, yani basışın parıltısı. */
.talep-ac::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  z-index: -1;
  border-radius: inherit;
  background: var(--surface);
  opacity: 0;
  transition: opacity var(--sure-mikro) ease-out;
}

/* Basmadan önceki gerilim: altın halka düğmenin üstüne kapanır, ok öne kayar. Düğme baştan tam mürekkep: söndürülen balonlarla karışmasın, tek hedef kalsın.
   Dokunmatikte üzerine gelme yok: halka düğme belirince bir kez kapanır ve kalır. Klavyede odak halkası aynı işi görür. */
.talep-ac::before {
  content: "";
  position: absolute;
  inset: calc(var(--talep-halka) * -1);
  z-index: -1;
  border: var(--talep-ince) solid var(--gold-koyu);
  border-radius: calc(var(--talep-yaricap) + var(--talep-halka));
  opacity: 0;
  transform: scale(var(--talep-halka-olcek));
  transition: opacity var(--sure-gerilim) ease-out, transform var(--sure-gerilim) var(--egri-senet);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .talep-ac:hover::before {
    opacity: 1;
    transform: none;
  }

  .talep-ac:is(:hover, :focus-visible) svg {
    transform: translateX(var(--ok-kayma));
  }
}

@media (hover: none) {
  .talep-kutu[data-geldi] .talep-ac::before {
    animation: talep-halka var(--sure-gerilim) var(--egri-senet) both;
    animation-delay: calc(var(--sure-balon) + var(--sure-balon-ara));
  }
}

.talep-ac:focus-visible {
  outline-offset: var(--focus-offset);
}

:is(.talep-ac, .talep-ilet, .talep-hazirla, .talep-secenek):active {
  transform: scale(var(--basma-olcek));
  transition-duration: var(--sure-basis);
}

.talep-ac:active::after {
  opacity: var(--talep-flas);
  transition-duration: var(--sure-basis);
}

.talep-ikincil {
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--muted);
  border-radius: var(--talep-yaricap);
  background: var(--transparent);
  color: var(--text);
  touch-action: manipulation;
}

.talep-durum:empty {
  display: none;
}

/* ── Taşkın: basışın cevabı. Canvas yalnız 560 ms var, sonra silinir. ── */
.talep-taskin {
  position: absolute;
  inset: var(--space-0);
  z-index: var(--layer-content);
  width: var(--size-full);
  height: var(--size-full);
  max-width: none;
  pointer-events: none;
}

/* ── Son: yaprağın arka yüzü ── */
.talep-kutu[data-asama="son"] .talep-ozet {
  display: none;
}

.talep-kutu[data-asama="son"] > * {
  animation: talep-belir var(--sure-reveal) ease-out both;
}

/* Yaprağın altına oturur: basılan düğme de oradaydı, göz yer değiştirmez. Uzun metinde yaprak uzasa da cevap ekranda kalır. */
.talep-son {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}

.dunya .talep-son-baslik {
  font-size: var(--text-durak);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-dunya-baslik);
}

.dunya .talep-son-not {
  max-width: var(--measure-small);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-dunya-lede);
  overflow-wrap: anywhere;
}

/* ── Ayak: güvence satırı aydınlatma metniyle aynı cümle; form her zaman bir tık ── */
.talep-ayak {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--cizgi);
}

.talep-geri {
  grid-column: 6 / 13;
  min-width: var(--space-0);
}

.talep-yazi .talep-alan:focus-visible {
  outline: none;
}

@keyframes talep-balon {
  from {
    opacity: 0;
    transform: translateY(var(--space-3)) scale(var(--muhur-anticipation));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes talep-gel {
  from {
    opacity: 0;
    transform: translateY(var(--giris-mesafe));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes talep-belir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes talep-halka {
  from {
    opacity: 0;
    transform: scale(var(--talep-halka-olcek));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes talep-damla {
  from {
    opacity: 0;
    transform: translate(calc(var(--talep-damla) * -1), calc(var(--talep-damla) * -0.5)) scale(var(--muhur-anticipation));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes talep-imlec {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Telefon: yaprak ekranın kenarına dayanır, mesajlaşma ekranı gibi; kaydırma sayfanın. */
@media (max-width: 768px) {
  .talep-kutu {
    margin-top: var(--space-7);
    margin-inline: calc(var(--space-gutter) * -1);
    padding: var(--space-6) var(--space-gutter);
    border-inline: var(--space-0);
  }

  .dunya .talep-ac {
    width: var(--size-full);
  }

  .talep-geri {
    margin-top: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .talep-kutu *,
  .talep-kutu *::before,
  .talep-kutu *::after {
    animation: none !important;
    transition-duration: var(--sure-anlik) !important;
  }

  .talep-kutu .talep-imlec {
    opacity: 1;
  }
}