/* 07-tarcin.css — bölüm 7: sohbet kartı + konuşma balonları sırayla
   belirir (`.goruldu`, sahneler/tarcin.js); ad girişi üstte, balonlardaki
   Tarçın etiketini canlı günceller. */

.sahne-tarcin {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: 120px clamp(16px, 7vw, 120px) 100px;
  max-width: 1280px; margin: 0 auto;
}

.rozet-pro {
  font: 700 10px var(--govde-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e1a16; background: var(--altin); padding: 2px 8px; border-radius: 999px;
}

.tarcin-ad-alani { margin: 22px 0 6px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--cizgi); max-width: 360px; }
.tarcin-ad-alani label { display: block; font: 700 13px var(--govde-font); margin-bottom: 8px; }
.tarcin-ad-alani input {
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid var(--cizgi); background: var(--zemin); color: var(--metin);
  font: 500 15px var(--govde-font);
}
.tarcin-ad-alani input:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }
.tarcin-ad-notu { font-size: 12px; color: var(--metin-ikincil); margin: 8px 0 0; }

.tarcin-liste { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tarcin-liste li { display: flex; gap: 14px; align-items: flex-start; }
.tarcin-simge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--kor) 12%, transparent); color: var(--kor);
}
.tarcin-liste-metin { display: flex; flex-direction: column; gap: 3px; }
.tarcin-liste-metin b { font: 700 15.5px var(--govde-font); }
.tarcin-liste-metin > span:not(.rozet-pro) { font-size: 14px; line-height: 1.5; color: var(--metin-ikincil); }

.tarcin-sohbet { display: flex; justify-content: center; }
.tarcin-sohbet-karti { width: min(340px, 84vw); display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; }

.tarcin-balon {
  max-width: 82%; padding: 10px 14px; border-radius: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s var(--yay);
}
.tarcin-balon.goruldu { opacity: 1; transform: none; }
.tarcin-balon p { margin: 0; font-size: 14px; line-height: 1.45; }
.tarcin-balon-ai { align-self: flex-start; background: color-mix(in srgb, var(--kor) 10%, var(--kart-zemin)); border-bottom-left-radius: 4px; }
.tarcin-balon-kullanici { align-self: flex-end; background: var(--kart-zemin); border-bottom-right-radius: 4px; }
.tarcin-ad-etiketi { display: block; font: 700 11px var(--govde-font); color: var(--kor); margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tarcin-balon { transition: none; }
}

@media (max-width: 760px) {
  .sahne-tarcin { grid-template-columns: 1fr; padding-top: 100px; }
  .tarcin-sohbet { order: -1; margin-bottom: 20px; }
}

/* Ad alanı boşken hafif nabız: "buraya yazabilirsin" (24 Eyl geri bildirimi:
   etkileşimli yerler belli değildi). Yazınca ya da odaklanınca durur. */
.tarcin-ad-alani input:placeholder-shown:not(:focus) { animation: adNabiz 2.4s ease-in-out infinite; }
@keyframes adNabiz {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kor) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kor) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tarcin-ad-alani input:placeholder-shown:not(:focus) { animation: none; }
}