/* ============================================================
   Yapay Zeka Sohbetleri — bağımsız ürün sayfası.
   Site başlığı/altbilgisi yoktur; kendi üst logosu ve UTOPYAI
   wordmark'ıyla ayrı bir site gibi durur. site.js'in enjekte
   ettiği TR/EN ve tema anahtarları korunur.

   Renkler token üzerinden verilir: aydınlık palet .yzs üzerinde,
   karanlık palet dosyanın sonundaki tek override bloğunda.
   ============================================================ */

.yzs {
  /* yüzeyler */
  --paper: #FAF6EF;
  --paper-deep: #F3EDE2;
  --card: #FFFFFF;
  --card-soft: #FFFDF9;

  /* çizgiler */
  --line: #E7E0D3;
  --line-soft: rgba(46, 42, 36, .1);
  --hairline: rgba(46, 42, 36, .08);

  /* metin */
  --ink: #2E2A24;
  --ink-dim: #6B655C;

  /* vurgu */
  --clay: #BC7048;
  --clay-text: #A2603E;   /* 11px altı metin için: kağıtta 4.5+ */
  --clay-deep: #A2603E;
  --clay-hover: #8F5435;
  --on-clay: #FFF9F2;
  --avatar: #B8815C;

  /* konuşma akışı — soluk ses renkleri */
  --voice-a: #6E7F63;
  --voice-b: #77708C;
  --voice-c: #A17B45;
  --voice-a-text: #5F6E55;
  --voice-b-text: #6A6480;
  --voice-c-text: #8E6C3B;
  --tint-a: #F1F3EC;
  --tint-b: #F1F0F5;
  --tint-c: #F7F1E5;
  --turn-line: rgba(46, 42, 36, .08);
  --turn-line-on: rgba(184, 129, 92, .36);
  --turn-shadow: 0 3px 10px rgba(46, 42, 36, .02);
  --turn-shadow-on: 0 10px 22px rgba(46, 42, 36, .06);
  --track: #EDE6D9;

  /* özellik kartları — tasarımda doygun renkler kullanılıyor */
  --feat-a: #0F6E56;
  --feat-b: #534AB7;
  --feat-c: #B45309;

  --split-a: rgba(110, 127, 99, .06);
  --split-b: rgba(119, 112, 140, .06);

  /* gölgeler */
  --shadow-card: 0 18px 44px rgba(46, 42, 36, .07);
  --shadow-letter: 0 16px 40px rgba(46, 42, 36, .06);
  --shadow-btn: 0 8px 18px rgba(46, 42, 36, .1);
  --shadow-btn-hover: 0 10px 22px rgba(46, 42, 36, .1);

  /* kapanış paneli */
  --cta-grad: linear-gradient(135deg, #2E2A24, #3B3223);
  --shadow-cta: 0 18px 44px rgba(46, 42, 36, .16);

  /* arka plan örgüsü */
  --mesh-1: rgba(188, 112, 72, .1);
  --mesh-2: rgba(15, 110, 86, .08);
  --mesh-3: rgba(83, 74, 183, .05);

  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Sayfa gövdesi de kağıt renginde; site temasının mavisi görünmez. */
body.yzs-page { background: #FAF6EF; }
[data-theme="dark"] body.yzs-page { background: #13100C; }

/* Sitenin mavi arka plan katmanı bu sayfada kullanılmaz. */
body.yzs-page .viewport-bg,
body.yzs-page .noise-texture { display: none; }

.yzs-mesh {
  position: absolute;
  inset: -25% -25% auto -25%;
  height: 150%;
  filter: blur(80px);
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 22%, var(--mesh-1), transparent 42%),
    radial-gradient(circle at 82% 12%, var(--mesh-2), transparent 40%),
    radial-gradient(circle at 50% 60%, var(--mesh-3), transparent 55%);
  animation: yzsMesh 20s infinite alternate ease-in-out;
}

/* :where() özgüllük eklemez — bileşen sınıfları kendi renklerini uygulayabilir. */
.yzs a { text-decoration: none; }
.yzs :where(a) { color: inherit; }
.yzs em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
}
.yzs p { margin: 0; text-wrap: pretty; }

.yzs-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* --- Üst logo şeridi --- */
.yzs-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  padding-top: 10px;
}
.yzs-brand {
  display: block;
  width: 278px;
  height: 55px;
  max-width: calc(100% - 40px);
  background: url('../images/yzs-logo.png') center/contain no-repeat;
}

.yzs-main { position: relative; z-index: 1; padding: 0 0 96px; }
.yzs-section { padding: 78px 0 0; }
.yzs-section-cta { padding-top: 124px; }

/* --- Tipografi --- */
.yzs h1 {
  margin: 0 0 30px;
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.yzs h2 {
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.03em;
}
.yzs h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.yzs-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--clay-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

/* --- Hero: başlık + kurucu mektubu --- */
.yzs-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  padding: 34px 0 120px;
  animation: yzsFade .9s .05s both;
}
.yzs-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.yzs-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.yzs-letter-wrap { justify-self: end; width: 100%; max-width: 496px; }
.yzs-letter {
  margin: 0;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-soft), var(--paper));
  box-shadow: var(--shadow-letter);
}
.yzs-letter p { margin: 0 0 10px; color: var(--ink-dim); font-size: 11.9px; line-height: 1.58; }
.yzs-letter-lead {
  margin-bottom: 12px !important;
  color: var(--ink) !important;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}
.yzs-letter-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.yzs-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--clay-deep);
  color: var(--on-clay);
  font-size: 13px;
  font-weight: 800;
}
.yzs-author { display: grid; gap: 2px; }
.yzs-author strong { font-size: 13px; letter-spacing: -.01em; }
.yzs-author > span { color: var(--ink-dim); font-size: 11.5px; }

/* --- Butonlar --- */
.yzs-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.yzs-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
.yzs-btn-primary {
  border-color: transparent;
  background: var(--clay-deep);
  color: var(--on-clay);
  box-shadow: var(--shadow-btn);
}
.yzs-btn-primary:hover { background: var(--clay-hover); }
.yzs-btn-sm {
  min-height: 0;
  padding: 7px 13px;
  font-size: 10px;
  white-space: nowrap;
}
.yzs-btn-sm:hover { transform: none; box-shadow: none; background: var(--paper); }

/* --- 01 · Sohbetler --- */
.yzs-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding: 36px clamp(24px, 4vw, 54px) 44px;
  border: 1px solid var(--line-soft);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--split-a), var(--card-soft) 54%, var(--split-b));
  backdrop-filter: blur(16px);
}
.yzs-split-lead { margin-bottom: 26px; color: var(--ink-dim); font-size: 1rem; line-height: 1.75; }

.yzs-steps { display: grid; gap: 12px; }
.yzs-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.6;
}
.yzs-step > i { padding-top: 3px; font-size: 11px; font-style: normal; font-weight: 800; }
.yzs-step span { color: var(--ink-dim); }
.yzs-step-1 > i { color: var(--voice-a); }
.yzs-step-2 > i { color: var(--voice-b); }
.yzs-step-3 > i { color: var(--voice-c); }
.yzs-step-4 > i { color: var(--avatar); }

/* --- Konuşma akışı kartı --- */
.yzs-stage {
  justify-self: end;
  width: 100%;
  max-width: 344px;
  margin-top: clamp(0px, 1vw, 10px);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.yzs-stage-head,
.yzs-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yzs-stage-head { color: var(--ink-dim); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; }
.yzs-stage-head b { color: var(--voice-a); font-weight: 800; }
.yzs-stage-foot { margin-top: 13px; }
.yzs-stage-foot > span { color: var(--ink-dim); font-size: 10px; line-height: 1.5; }

.yzs-question {
  display: grid;
  gap: 4px;
  margin: 13px 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.yzs-question small { color: var(--clay-text); font-size: 8.5px; font-weight: 800; letter-spacing: .14em; }
.yzs-question strong { font-size: 12.5px; line-height: 1.45; }

.yzs-turns { display: grid; gap: 9px; }
.yzs-turn {
  padding: 12px 13px;
  border: 1px solid var(--turn-line);
  border-radius: 16px;
  opacity: .32;
  transform: translateY(6px) scale(.99);
  box-shadow: var(--turn-shadow);
  transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.yzs-turn.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: var(--turn-line-on);
  box-shadow: var(--turn-shadow-on);
}
.yzs-turn-a { background: var(--tint-a); }
.yzs-turn-b { background: var(--tint-b); }
.yzs-turn-c { background: var(--tint-c); }
.yzs-turn p { margin: 8px 0 0; font-size: 12px; line-height: 1.58; color: var(--ink); }

.yzs-voice { display: flex; align-items: center; gap: 9px; }
.yzs-voice b {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}
.yzs-voice small { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; }
.yzs-turn-a .yzs-voice b { background: var(--voice-a); }
.yzs-turn-b .yzs-voice b { background: var(--voice-b); }
.yzs-turn-c .yzs-voice b { background: var(--voice-c); }
.yzs-turn-a .yzs-voice small { color: var(--voice-a-text); }
.yzs-turn-b .yzs-voice small { color: var(--voice-b-text); }
.yzs-turn-c .yzs-voice small { color: var(--voice-c-text); }

.yzs-progress {
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.yzs-progress > i {
  display: block;
  height: 100%;
  width: 33%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--voice-a), var(--voice-b) 60%, var(--voice-c));
  transition: width .6s ease;
}

/* --- Özellik kartları --- */
.yzs-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.yzs-features article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
}
.yzs-features article > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.yzs-features article:nth-child(1) > span { color: var(--feat-a); }
.yzs-features article:nth-child(2) > span { color: var(--feat-b); }
.yzs-features article:nth-child(3) > span { color: var(--feat-c); }
.yzs-features h3 { margin: 16px 0 10px; }
.yzs-features p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; }

/* --- Kapanış CTA (her iki temada da koyu panel) --- */
.yzs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(30px, 4vw, 46px);
  border-radius: 32px;
  background: var(--cta-grad);
  box-shadow: var(--shadow-cta);
}
.yzs-cta > div:first-child { max-width: 640px; }
.yzs-cta span.yzs-kicker { color: #E29A62; text-transform: uppercase; letter-spacing: .12em; }
.yzs-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
.yzs-cta p { color: rgba(255, 255, 255, .76); font-size: 15px; line-height: 1.65; }
.yzs-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.yzs-cta-actions > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.yzs-cta-actions > a:first-child { border-color: rgba(255, 255, 255, .55); background: none; }
.yzs-cta-actions > span {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .4);
  background: none;
  color: rgba(255, 255, 255, .8);
}

/* --- Altbilgi: uyarı + UTOPYAI wordmark --- */
.yzs-footer { position: relative; z-index: 1; padding: 0 20px 46px; }
.yzs-footer-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.yzs-disclaimer { color: var(--ink-dim); font-size: 11.5px; line-height: 1.6; text-align: center; }
.yzs-wordmark {
  display: block;
  width: 140px;
  height: 40px;
  margin: -9px 0;
  background: url('../images/utopyai-logo.svg') center/contain no-repeat;
  opacity: .58;
  transition: opacity .3s ease;
}
.yzs-wordmark:hover { opacity: 1; }

/* ============================================================
   Karanlık palet — sitenin [data-theme="dark"] anahtarına bağlı.
   Yalnızca token'lar değişir.
   ============================================================ */
[data-theme="dark"] .yzs {
  --paper: #13100C;
  --paper-deep: #26211A;
  --card: #1B1712;
  --card-soft: #201B15;

  --line: #302A22;
  --line-soft: rgba(255, 255, 255, .09);
  --hairline: rgba(255, 255, 255, .08);

  --ink: #EDE6DA;
  --ink-dim: #A79D8F;

  --clay: #E2A077;
  --clay-text: #E2A077;
  --clay-deep: #C4855F;
  --clay-hover: #D39468;
  --on-clay: #17110A;
  --avatar: #CE9772;

  --voice-a: #94A889;
  --voice-b: #A199BE;
  --voice-c: #C9A063;
  --voice-a-text: #A6BA9A;
  --voice-b-text: #B3ABCD;
  --voice-c-text: #D9B277;
  --tint-a: #1C231A;
  --tint-b: #1E1C26;
  --tint-c: #26200F;
  --turn-line: rgba(255, 255, 255, .07);
  --turn-line-on: rgba(206, 151, 114, .42);
  --turn-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  --turn-shadow-on: 0 10px 22px rgba(0, 0, 0, .55);
  --track: #2A241C;

  --feat-a: #31B792;
  --feat-b: #948BF5;
  --feat-c: #E3A63F;

  --split-a: rgba(148, 168, 137, .07);
  --split-b: rgba(161, 153, 190, .07);

  --shadow-card: 0 18px 44px rgba(0, 0, 0, .5);
  --shadow-letter: 0 16px 40px rgba(0, 0, 0, .45);
  --shadow-btn: 0 8px 18px rgba(0, 0, 0, .55);
  --shadow-btn-hover: 0 10px 22px rgba(0, 0, 0, .55);

  --cta-grad: linear-gradient(135deg, #1F1A13, #2C2419);
  --shadow-cta: 0 18px 44px rgba(0, 0, 0, .65);

  --mesh-1: rgba(226, 160, 119, .12);
  --mesh-2: rgba(49, 183, 146, .1);
  --mesh-3: rgba(148, 139, 245, .07);
}

/* Wordmark koyu lacivert vektör; karanlıkta okunmuyor. */
[data-theme="dark"] .yzs-wordmark { filter: brightness(0) invert(1); opacity: .5; }
[data-theme="dark"] .yzs-wordmark:hover { opacity: .85; }

/* YZS logosu kağıt zemin için tasarlanmış: en büyük parçası çok koyu kahve ve
   karanlık zeminde kayboluyordu. Karanlıkta tonu korunmuş açık varyant kullanılır. */
[data-theme="dark"] .yzs-brand { background-image: url('../images/yzs-logo-dark.png'); }

/* ============================================================
   Yüzen TR/EN ve tema anahtarları.
   site.css bunları sitenin mavi aksanıyla boyuyor; bu sayfa
   ayrı bir marka gibi durduğu için kendi sıcak paletine çekilir.
   ============================================================ */
body.yzs-page .lang-switch,
body.yzs-page .theme-bridge {
  border-color: rgba(46, 42, 36, .12);
  background: rgba(255, 253, 249, .86);
}
body.yzs-page .lang-btn,
body.yzs-page .toggle-btn { color: #6B655C; }
body.yzs-page .lang-btn.active,
body.yzs-page .toggle-btn.active { background: #A2603E; color: #FFF9F2; }
body.yzs-page .lang-btn:hover,
body.yzs-page .toggle-btn:hover { color: #2E2A24; }
body.yzs-page .lang-btn.active:hover,
body.yzs-page .toggle-btn.active:hover { color: #FFF9F2; }

[data-theme="dark"] body.yzs-page .lang-switch,
[data-theme="dark"] body.yzs-page .theme-bridge {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(27, 23, 18, .88);
}
[data-theme="dark"] body.yzs-page .lang-btn,
[data-theme="dark"] body.yzs-page .toggle-btn { color: #A79D8F; }
[data-theme="dark"] body.yzs-page .lang-btn.active,
[data-theme="dark"] body.yzs-page .toggle-btn.active { background: #C4855F; color: #17110A; }
[data-theme="dark"] body.yzs-page .lang-btn:hover,
[data-theme="dark"] body.yzs-page .toggle-btn:hover { color: #EDE6DA; }
[data-theme="dark"] body.yzs-page .lang-btn.active:hover,
[data-theme="dark"] body.yzs-page .toggle-btn.active:hover { color: #17110A; }

/* --- Animasyonlar --- */
@keyframes yzsFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes yzsMesh { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50px, 30px) scale(1); } }

@media (max-width: 800px) {
  .yzs-shell { width: min(100% - 24px, 1160px); }
  .yzs-topbar { min-height: 88px; }
  .yzs-brand { width: 224px; height: 44px; }
  .yzs-hero { padding: 20px 0 72px; }
  .yzs-letter-wrap { justify-self: stretch; max-width: none; }
  .yzs-section { padding: 56px 0 0; }
  .yzs-section-cta { padding-top: 80px; }
  .yzs-main { padding-bottom: 64px; }
  .yzs-split { padding: 26px 20px 32px; border-radius: 26px; }
  .yzs-stage { justify-self: stretch; max-width: none; }
  .yzs-actions .yzs-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .yzs *, .yzs *:before, .yzs *:after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .yzs-turn { opacity: 1; transform: none; }
}