/* enisakarsu.com — AI Agent (yalnızca Türkçe ana sayfa ve eğitim sayfaları yükler; site.css'ten sonra gelir)
   Giriş ekranı, eğitim sayfasındaki kutu, üst menü düğmesi, yazışma penceresi. Renk ve yazı site.css tokenlarından.
   Bu dosya yüklendiğinde girişin yerleşimi de değişir (başlık ortalı, asistan altında); İngilizce sayfalar etkilenmez. */
:root { --field: #FFFFFF; --ok: #2F9E60; --ok-ink: #2B7A4B; --z-asistan: 80; }

/* ---------- Asistan işareti: sitenin kendi "e." işareti ----------
   Favicon ve logodaki "e" ile turuncu nokta. "e" tek çizgidir (sitenin çizim dili: stroke-dashoffset ile çizilir, silinir);
   canlı öğe noktadır: düşünürken zıplar, yazarken üçe çoğalır. Degrade, hale, top yok.
   Yazma zamanlaması prompt-kit (MIT) Loader "typing" (1 sn, 250 ms arayla); akış imleci "pulse-dot" (1,2 sn). */
.ai-mark { --s: 18px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); color: var(--ink); }
.ai-mark svg { width: 100%; height: 100%; overflow: visible; }
/* Çizgi boyu 100'e eşitlenir (pathLength). 101 dolu + 200 boş: silinmiş hâlde uçta kırıntı kalmaz. */
.ai-mark .mk-e { stroke-dasharray: 101 200; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s var(--ease-io); }
.ai-mark .mk-n { transition: transform 0.4s var(--ease-out), opacity 0.18s linear; }
.ai-mark .mk-n circle { fill: var(--orange); transform-box: fill-box; transform-origin: center; }
.ai-mark .mk-n--b, .ai-mark .mk-n--c { opacity: 0; }

/* Karşılama: "e" çizilir, nokta yerine konur */
.ai-mark.is-hello .mk-e { animation: mk-ciz 0.7s var(--ease-io) both; }
.ai-mark.is-hello .mk-n--a circle { animation: mk-konur 0.42s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both; }
@keyframes mk-ciz { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }
@keyframes mk-konur { from { transform: scale(0); } to { transform: scale(1); } }

/* Düşünüyor: nokta zıplar, iki sekme (1,2 sn) */
.ai-mark.is-thinking .mk-n--a circle { animation: mk-zipla 1.2s infinite; }
@keyframes mk-zipla {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  30% { transform: translateY(-10px); animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35); }
  56% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  70% { transform: translateY(-3.5px); animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35); }
  84%, 100% { transform: translateY(0); }
}

/* Yazıyor: "e" silinir, nokta üçe ayrışır ve soldan sağa sırayla kalkar */
.ai-mark.is-writing .mk-e { stroke-dashoffset: 102; transition-duration: 0.3s; }
.ai-mark.is-writing .mk-n--a { transform: translate(-1.9px, -5.3px); }
.ai-mark.is-writing .mk-n--b { opacity: 1; transform: translate(-8.4px, -5.3px); }
.ai-mark.is-writing .mk-n--c { opacity: 1; transform: translate(-14.9px, -5.3px); }
.ai-mark.is-writing .mk-n circle { animation: mk-yaz 1s 0.35s infinite; }
.ai-mark.is-writing .mk-n--b circle { animation-delay: 0.6s; }
.ai-mark.is-writing .mk-n--a circle { animation-delay: 0.85s; }
@keyframes mk-yaz { 0%, 100% { transform: translateY(1.2px); opacity: 0.6; } 50% { transform: translateY(-2.6px); opacity: 1; } }

/* Sürekli döngü (üst menü düğmesi, giriş kimliği, pencere başlığı): üç hâl art arda, 7 sn.
   "e" çizilir, nokta vurgulanır → durur → nokta zıplar → durur → "e" silinir, nokta üçe çoğalıp yazar → tek noktaya toplanır.
   Nokta hiç kaybolmaz; kutu hiçbir an boş kalmaz. */
.ai-mark.is-live .mk-e { animation: canli-e 7s var(--ease-io) infinite; }
.ai-mark.is-live .mk-n--a { animation: canli-a 7s var(--ease-out) infinite; }
.ai-mark.is-live .mk-n--b { animation: canli-b 7s var(--ease-out) infinite; }
.ai-mark.is-live .mk-n--c { animation: canli-c 7s var(--ease-out) infinite; }
.ai-mark.is-live .mk-n--a circle { animation: canli-an 7s infinite; }
.ai-mark.is-live .mk-n--b circle { animation: canli-bn 7s infinite; }
.ai-mark.is-live .mk-n--c circle { animation: canli-cn 7s infinite; }
@keyframes canli-e { 0% { stroke-dashoffset: 102; } 10%, 62% { stroke-dashoffset: 0; } 67%, 100% { stroke-dashoffset: 102; } }
@keyframes canli-a { 0%, 62% { transform: translate(0, 0); } 67%, 90% { transform: translate(-1.9px, -5.3px); } 95%, 100% { transform: translate(0, 0); } }
@keyframes canli-b { 0%, 62% { transform: translate(0, 0); opacity: 0; } 63% { opacity: 1; } 67%, 90% { transform: translate(-8.4px, -5.3px); opacity: 1; } 95% { transform: translate(0, 0); opacity: 1; } 96%, 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes canli-c { 0%, 62% { transform: translate(0, 0); opacity: 0; } 63% { opacity: 1; } 67%, 90% { transform: translate(-14.9px, -5.3px); opacity: 1; } 95% { transform: translate(0, 0); opacity: 1; } 96%, 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes canli-an {
  0%, 9% { transform: translateY(0) scale(1); }
  12% { transform: translateY(0) scale(1.3); }
  15%, 32% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  37.5% { transform: translateY(-10px) scale(1); animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35); }
  43% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  46% { transform: translateY(-3.5px) scale(1); animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35); }
  49%, 73% { transform: translateY(0) scale(1); }
  76.5% { transform: translateY(-3px) scale(1); }
  80%, 83% { transform: translateY(0) scale(1); }
  86.5% { transform: translateY(-3px) scale(1); }
  90%, 100% { transform: translateY(0) scale(1); }
}
@keyframes canli-bn { 0%, 70% { transform: translateY(0); } 73.5% { transform: translateY(-3px); } 77%, 80% { transform: translateY(0); } 83.5% { transform: translateY(-3px); } 87%, 100% { transform: translateY(0); } }
@keyframes canli-cn { 0%, 67% { transform: translateY(0); } 70.5% { transform: translateY(-3px); } 74%, 77% { transform: translateY(0); } 80.5% { transform: translateY(-3px); } 84%, 100% { transform: translateY(0); } }

/* İşaretin kutusu: koyu zeminli küçük kare, favicon gibi */
.ai-av { --a: 28px; flex: none; width: var(--a); height: var(--a); display: grid; place-items: center; border-radius: 30%; background: var(--ink); }
.ai-av .ai-mark { --s: calc(var(--a) * 0.68); color: var(--cream); }
.ai-av--xs { --a: 21px; }
.ai-av--sm { --a: 25px; }
.ai-av--md { --a: 38px; }
.ai-av--lg { --a: 60px; box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--ink) 70%, transparent); }

/* Yazıyor göstergesi: üç nokta (1 sn, 250 ms arayla) */
.ai-typing { display: inline-flex; align-items: center; gap: 4px; height: 1.25em; vertical-align: middle; }
.ai-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: ai-typing 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: 250ms; }
.ai-typing i:nth-child(3) { animation-delay: 500ms; }
@keyframes ai-typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-2px); opacity: 1; } }
/* Akan yanıtın ucundaki imleç: işaretin noktası (1,2 sn) */
.ai-cursor { display: inline-block; width: 0.46em; height: 0.46em; margin-left: 0.32em; border-radius: 50%; background: var(--orange); animation: ai-pulse-dot 1.2s ease-in-out infinite; }
@keyframes ai-pulse-dot { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.5); opacity: 1; } }

.ai-status { display: inline-flex; align-items: center; gap: 0.38rem; font-size: var(--fs-micro); font-weight: 600; color: var(--ok-ink); white-space: nowrap; }
.ai-status > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.ai-status.is-busy { color: var(--orange-ink); }

/* ---------- C · Üst menü düğmesi ---------- */
.nav-main { margin-left: auto; }
.ask-open {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 var(--fs-small)/1 var(--font-body); color: var(--ink);
  background: var(--field); border: 1px solid var(--rule); border-radius: 999px;
  padding: 0.36rem 0.95rem 0.36rem 0.42rem; cursor: pointer; white-space: nowrap;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ask-open:hover { border-color: color-mix(in srgb, var(--orange) 60%, var(--rule)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 12%, transparent); }
body.hero-dark .site-header:not(.is-stuck) .ask-open { background: color-mix(in srgb, var(--on-dark) 10%, transparent); color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 30%, transparent); }

/* ---------- A · Ana sayfa girişi: asistan bloğu ---------- */
.ai { max-width: 940px; position: relative; isolation: isolate; }
/* Giriş (Enis'in tarifi, 2026-10-12): sırayla üst menü, başlık, kimlik satırı + istem kartı. Üst etiket yok; şerit
   ekranın dibinde. Kolon sayfada ortalı; başlık metni de ortalı.
   Dikey yerleşim: ilk ekrandaki boş alan dörde bölünür. Bir payı üst menü ile başlık arasında, bir payı başlık ile
   asistan arasında (başlık bu ikisinin tam ortasında durur), iki payı asistanın altında. İstem kartı kendi boyutunda.
   İlk mesajdan sonra bu yerleşim yazışma alanına dönüşür: dosyanın sonundaki "istem kartı yazışma alanına büyür". */
main > section.hero { min-height: 100svh; display: flex; padding-block: 65px clamp(1.1rem, 2.4vw, 1.9rem); } /* 65px: üst menünün yüksekliği */
.hero > .shell { flex: 1; display: flex; flex-direction: column; }
.hero-copy { flex: 1; width: 100%; max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; }
.hero-copy::before { content: ''; flex: 1 1 0; }
.hero h1 { max-width: none; font-size: clamp(1.85rem, 0.9rem + 3.6vw, 3.75rem); line-height: 1.12; letter-spacing: -0.028em; margin-block: clamp(1.2rem, 3vh, 2rem); text-wrap: balance; text-align: center; }
/* Vurgulu kelimeler aynı satırda kalır (altındaki fırça çizgisi bölünmesin); dar telefonda serbest */
@media (min-width: 620px) { .hero h1 .hl-grup { white-space: nowrap; } }
.hero .ai { max-width: none; flex: 3 1 auto; display: flex; flex-direction: column; }
.hero .ai::before { content: ''; flex: 1 1 0; }
.hero .ai::after { content: ''; flex: 2 1 0; }
/* Öneriler 2 × 2: etiketler tek satırda kalır */
@media (min-width: 561px) { .hero .ai-sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-strip { margin-top: clamp(1rem, 2vw, 1.6rem); justify-content: center; }
.ai-id { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.65rem; margin-bottom: 0.8rem; font-size: var(--fs-small); color: var(--ink-muted); }
.ai-id b { color: var(--ink); font-weight: 700; }

.ai-composer {
  position: relative; background: var(--field); border: 1px solid var(--rule); border-radius: 22px;
  padding: 0.3rem 0.5rem 0.5rem;
  box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--ink) 34%, transparent);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ai-composer::before {
  content: ''; position: absolute; inset: 14% 5% -12%; z-index: -1; border-radius: inherit;
  background: radial-gradient(60% 85% at 50% 100%, color-mix(in srgb, var(--orange) 38%, transparent), transparent 72%);
  filter: blur(30px); opacity: 0.7; transition: opacity 0.4s var(--ease-out);
}
.ai-composer:focus-within { border-color: color-mix(in srgb, var(--orange) 65%, var(--rule)); box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--ink) 34%, transparent), 0 0 0 4px color-mix(in srgb, var(--orange) 15%, transparent); }
.ai-composer:focus-within::before { opacity: 0.95; }
.ai-composer textarea {
  display: block; width: 100%; border: 0; background: transparent; resize: none;
  font: 400 1.08rem/1.5 var(--font-body); color: var(--ink);
  padding: 0.85rem 0.9rem 0.3rem; min-height: calc(3em + 1.15rem); max-height: 11em;
}
.ai-composer textarea:focus { outline: none; }
.ai-composer textarea::placeholder { color: #7A756B; }
.ai-tools { display: flex; align-items: center; gap: 0.55rem; padding: 0.15rem 0.1rem 0 0.35rem; }
.ai-modes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-right: auto; }
.ai-mode {
  display: inline-flex; align-items: center; gap: 0.38rem;
  font: 600 0.82rem/1 var(--font-body); color: var(--ink-body);
  background: var(--cream); border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 0.78rem; cursor: pointer;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.ai-mode svg { width: 14px; height: 14px; }
.ai-mode:hover { border-color: var(--ink); }
.ai-mode[aria-pressed='true'] { background: var(--orange-soft); border-color: color-mix(in srgb, var(--orange) 55%, transparent); color: var(--orange-ink); }
.ai-kbd { font-size: var(--fs-micro); color: var(--ink-muted); white-space: nowrap; }
.ai-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: var(--orange); box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--orange) 80%, transparent);
  transition: transform 0.2s var(--ease-out), background-color 0.3s var(--ease-out);
}
.ai-send svg { width: 17px; height: 17px; }
.ai-send:hover { background: color-mix(in srgb, var(--orange) 86%, var(--ink)); }
.ai-send:active { transform: scale(0.94); }
.ai-send:disabled { background: var(--cream-deep); color: var(--ink-muted); box-shadow: none; cursor: default; }

/* Öneri kartları */
.ai-sugs { list-style: none; padding: 0; margin: 0.85rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.ai-sug {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; align-items: center; height: 100%; text-decoration: none; text-align: left; width: 100%;
  background: color-mix(in srgb, #fff 72%, var(--cream)); border: 1px solid var(--rule); border-radius: 16px;
  padding: 0.75rem 0.85rem 0.8rem; cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ai-sug:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--rule)); transform: translateY(-2px); box-shadow: 0 14px 24px -18px color-mix(in srgb, var(--ink) 45%, transparent); }
.ai-sug-ic { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange-ink); }
.ai-sug-ic svg { width: 16px; height: 16px; }
.ai-sug-t { font-size: 0.9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ai-sug-d { font-size: 0.79rem; color: var(--ink-muted); line-height: 1.35; }
.ai-sugs--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-sugs--kisa .ai-sug { padding: 0.6rem 0.75rem; }
.ai-sugs--kisa .ai-sug-t { grid-row: 1 / span 2; }
.ai-sugs--kisa .ai-sug-d { display: none; }

/* Sohbet kapalıyken (kota dolu / kapsam dışı ülke): istem kartı yok, öneriler düz bağlantı */
.hero-lede.ask-lede { margin-bottom: 1.1rem; max-width: 56ch; display: none; }
.ask-lede strong { color: var(--ink); font-weight: 700; }
html.ask-off .hero-lede.ask-lede { display: block; }
html.ask-off .ai-id, html.ask-off .ai-composer, html.ask-off .ask-open, html.ask-off .ask-mini, html.ask-off .ask-mini-lead, html.ask-off .ai-ornek { display: none; }
html.ask-off .ai-sugs { margin-top: 0; }
.course-aside .when-off-only { display: none; }
html.ask-off .course-aside .when-off-only { display: block; }
html.ask-off .course-aside a.when-off-only { display: flex; }

/* ---------- B · Paket sayfası kutusu ---------- */
@media (min-width: 980px) {
  .course-body:has(.ai-aside) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(2rem, 4vw, 4rem); }
}
.course-aside.ai-aside { border-radius: 22px; padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.ai-aside h3 { font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.015em; margin-bottom: 0.55rem; }
.ai-aside .ask-mini-lead { font-size: 1rem; line-height: 1.5; margin-bottom: 1.1rem; }
.ai-aside .ai-id { font-size: 0.95rem; }
.ai-aside .ai-av--sm { --a: 30px; }
.ai-aside .ai-id { margin-bottom: 0.9rem; }
.ask-mini.ai-composer { border-radius: 20px; padding: 0.3rem 0.5rem 0.5rem; margin-bottom: 0.8rem; isolation: isolate; }
.ask-mini.ai-composer::before { display: none; }
.ask-mini.ai-composer textarea { font-size: 1.06rem; padding: 0.9rem 0.85rem 0.3rem; min-height: 6.6em; }
.ask-mini .ai-tools { justify-content: flex-end; }
.ask-mini .ai-send { width: 42px; height: 42px; }
.ai-ornek { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.3rem; }
.ai-ornek .ai-mode { background: var(--field); font-size: 0.9rem; padding: 0.55rem 0.9rem; }
.course-aside p.ask-mini-alt { margin: 0.9rem 0 0; font-size: var(--fs-small); }
.ask-mini-alt a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--orange); }

/* ---------- Yazışma penceresi ---------- */
.ap { position: fixed; inset: 0; z-index: var(--z-asistan); display: grid; place-items: center; padding: 1rem; visibility: hidden; pointer-events: none; transition: visibility 0s 0.32s; }
.ap.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ap-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.ap.is-open .ap-backdrop { opacity: 1; }
.ap-win {
  position: relative; width: min(800px, 100%); height: min(88vh, 860px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream); border: 1px solid color-mix(in srgb, #fff 60%, var(--rule)); border-radius: 26px;
  box-shadow: 0 50px 120px -40px rgba(24, 21, 17, 0.6), 0 0 0 1px rgba(24, 21, 17, 0.04);
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity 0.26s var(--ease-out), transform 0.32s var(--ease-out);
}
.ap.is-open .ap-win { opacity: 1; transform: none; }
body.ap-lock { overflow: hidden; }

.ap-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem 0.85rem 1.15rem; border-bottom: 1px solid var(--rule-soft); background: color-mix(in srgb, #fff 55%, var(--cream)); }
.ap-title { margin-right: auto; min-width: 0; }
.ap-title b { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; color: var(--ink); }
.ap-title span.ap-sub { display: block; font-size: var(--fs-micro); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-icon { appearance: none; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid transparent; color: var(--ink-body); cursor: pointer; transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.ap-icon svg { width: 16px; height: 16px; }
.ap-icon:hover { background: var(--cream-sub); border-color: var(--rule); }
.ap-context { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.15rem; font-size: var(--fs-micro); color: var(--ink-muted); background: var(--orange-soft); border-bottom: 1px solid color-mix(in srgb, var(--orange) 22%, transparent); }
.ap-context[hidden] { display: none; }
.ap-context strong { color: var(--ink); font-weight: 600; }
.ap-context > svg { width: 13px; height: 13px; color: var(--orange-ink); }

.ap-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem clamp(1rem, 4vw, 2.2rem) 1.2rem; display: flex; flex-direction: column; gap: 1.15rem; }
.ap-hello { margin: auto 0; padding: 0.6rem 0 0.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-hello h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.15; margin: 1.25rem 0 0.45rem; }
.ap-hello p { color: var(--ink-muted); font-size: 0.98rem; max-width: 44ch; }
.ap-hello .ai-sugs { width: 100%; max-width: 560px; margin-top: 1.4rem; text-align: left; }

.msg { font-size: 0.97rem; line-height: 1.55; }
/* Ziyaretçinin yazdığı: siyah değil, saydam turuncu zemin + mürekkep yazı (Enis'in kararı, 2026-10-12) */
.msg--user { align-self: flex-end; max-width: 78%; background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--ink); padding: 0.62rem 0.95rem; border-radius: 18px 18px 5px 18px; }
.msg--bot { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.msg-c { min-width: 0; color: var(--ink-body); padding-top: 0.18rem; }
.msg-c > .ai-typing { color: var(--ink-muted); }
.msg-c > p + p { margin-top: 0.5rem; }
.msg-c > * + .pcs, .msg-c > * + .flow, .msg-c > * + .qr, .msg-c > * + .cta, .msg-c > * + .yol, .msg-c > * + .devam { margin-top: 0.75rem; }
.msg-c > * + .pts { margin-top: 0.6rem; }
/* Yanıtın parçaları sırayla belirir */
.pts, .pcs, .yol, .devam, .cta { animation: ai-gel 0.4s var(--ease-out) both; }
@keyframes ai-gel { from { opacity: 0; transform: translateY(6px); } }

/* Metnin altındaki somut noktalar: işaretin noktasıyla */
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.38rem; }
.pts li { position: relative; padding-left: 1.1rem; line-height: 1.5; color: var(--ink-body); }
.pts li::before { content: ''; position: absolute; left: 0.15rem; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
/* Önerilen yol: numaralı adımlar */
.yol { background: var(--field); border: 1px solid var(--rule); border-radius: 14px; padding: 0.75rem 0.9rem 0.85rem; }
.yol > b { display: block; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-muted); margin-bottom: 0.55rem; }
.yol ol { list-style: none; margin: 0; padding: 0; counter-reset: yol; display: grid; gap: 0.45rem; }
.yol li { counter-increment: yol; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.yol li::before { content: counter(yol); width: 22px; height: 22px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); font: 700 0.74rem/22px var(--font-body); text-align: center; }
/* Takip sorusu: yanıtın sonunda asistanın sorduğu soru */
.msg-c > * + .takip { margin-top: 0.8rem; }
.takip { font-weight: 600; color: var(--ink); }
.takip + .qr { margin-top: 0.5rem; }
/* Devam soruları */
.devam > span { display: block; font-size: var(--fs-micro); color: var(--ink-muted); margin-bottom: 0.4rem; }

.steps { display: grid; gap: 0.22rem; margin-bottom: 0.5rem; }
.step { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-micro); color: var(--ink-muted); }
.step-ic { width: 14px; height: 14px; flex: none; display: grid; place-items: center; }
.step-ic::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--orange) 30%, transparent); border-top-color: var(--orange); animation: ai-spin 0.7s linear infinite; }
.step.is-done .step-ic::before { display: none; }
.step.is-done .step-ic svg { width: 13px; height: 13px; color: var(--ok); }
.step:not(.is-done) .step-ic svg { display: none; }
.step:not(.is-done) .step-t { background: linear-gradient(90deg, var(--ink-muted) 35%, var(--ink) 50%, var(--ink-muted) 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 1.3s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }

.qr { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.qr button { font: 500 0.88rem/1.25 var(--font-body); color: var(--ink); background: var(--field); border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer; transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out); }
.qr button:hover { border-color: color-mix(in srgb, var(--orange) 60%, var(--rule)); background: var(--orange-soft); }

.pcs { display: grid; gap: 0.55rem; }
.pc { display: block; background: var(--field); border: 1px solid var(--rule); border-radius: 14px; padding: 0.8rem 0.9rem; text-decoration: none; color: var(--ink-body); transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.pc:hover { border-color: color-mix(in srgb, var(--orange) 55%, var(--rule)); transform: translateY(-2px); }
.pc b { display: block; color: var(--ink); font-size: 0.96rem; line-height: 1.3; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.42rem 0 0.45rem; }
.pc-tags span { font-size: 0.72rem; font-weight: 600; color: var(--ink-body); background: var(--cream-sub); border-radius: 999px; padding: 0.22rem 0.52rem; }
.pc-n { display: block; font-size: 0.86rem; line-height: 1.45; }
.pc-k { display: grid; gap: 0.24rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--rule-soft); }
.pc-k > span { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 0.42rem; align-items: start; font-size: 0.82rem; line-height: 1.4; color: var(--ink-body); }
.pc-k svg { width: 13px; height: 13px; margin-top: 0.2em; color: var(--ok); }
.pc-k i { font-style: normal; }
.pc-go { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--orange-ink); }
.pc-go svg { width: 13px; height: 13px; }

.flow { list-style: none; margin: 0; padding: 0.25rem 0.9rem; background: var(--field); border: 1px solid var(--rule); border-radius: 14px; }
.flow li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.9rem; }
.flow li:last-child { border-bottom: 0; }
.flow li span:last-child { flex: none; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.flow li.is-atolye { margin: 0.25rem -0.55rem; padding-inline: 0.55rem; background: var(--orange-soft); border-radius: 9px; border-bottom: 0; }
.flow li.is-atolye span:first-child { color: var(--ink); font-weight: 600; }
.flow li.is-atolye span:last-child { color: var(--orange-ink); font-weight: 600; }

/* Kapanış: her konuşmanın son bloğu — randevu ya da e-posta */
.cta { background: var(--orange-soft); border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent); border-radius: 16px; padding: 0.9rem; }
.cta p { font-size: 0.93rem; color: var(--ink); margin-bottom: 0.7rem; }
.cta-b { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cta-b a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: 600 0.9rem/1 var(--font-body); text-decoration: none; border-radius: 999px; padding: 0.8rem 0.8rem; transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.cta-b svg { width: 15px; height: 15px; }
.cta-go { background: var(--orange); color: #fff; }
.cta-go:hover { background: color-mix(in srgb, var(--orange) 86%, var(--ink)); }
.cta-mail { background: var(--field); color: var(--ink); border: 1px solid var(--rule); }
.cta-mail:hover { border-color: var(--ink); }

/* Pencere içi istem kartı */
.ap-compose { padding: 0.2rem clamp(0.8rem, 3vw, 1.6rem) 0; }
.ap-compose .ai-composer { border-radius: 20px; box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
.ap-compose .ai-composer::before { display: none; }
.ap-compose textarea { font-size: 1rem; min-height: calc(1.5em + 1.15rem); max-height: 8.5em; padding-top: 0.75rem; }
.ap-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-right: auto; }
.ap-quick a { display: inline-flex; align-items: center; gap: 0.38rem; font: 600 0.8rem/1 var(--font-body); color: var(--ink-body); text-decoration: none; background: var(--cream); border: 1px solid var(--rule); border-radius: 999px; padding: 0.48rem 0.72rem; transition: border-color 0.25s var(--ease-out); }
.ap-quick a:hover { border-color: var(--ink); }
.ap-quick svg { width: 13px; height: 13px; }
.ap-foot { text-align: center; font-size: 0.74rem; color: var(--ink-muted); padding: 0.5rem 1rem 0.7rem; }

/* ---------- Ana sayfa: istem kartı yazışma alanına büyür ----------
   Enis'in tarifi (2026-10-13): ilk mesajdan sonra ayrı pencere açılmaz. Başlık yukarı kayarak kaybolur; istem kartı
   boşalan yere ve aşağı doğru büyüyüp yazışma alanı olur; altındaki dört öneri kartı kendi boyutunda aşağı iner.
   Tek hareket (0,95 sn), hiçbir şey birden açılmaz. Durum sınıfı .hero.is-chat (asistan.js: genislet / daralt).
   Yükseklikler ölçülmez: boş alan payları (flex-grow) ve başlığın 1fr → 0fr ızgara satırı geçişle değişir. */
.hero { --chat-t: 0.95s; --chat-e: cubic-bezier(0.5, 0, 0.15, 1); } /* yavaş başlar, uzun ve yumuşak yerleşir */
.hero-h { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--chat-t) var(--chat-e); }
/* Başlık kutunun dibine yaslı: kutu kısalırken yazı üst kenarın altına doğru kayar */
.hero-h-i { min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-h h1 { flex: none; transition: opacity 0.5s var(--ease-out) 0.12s, transform var(--chat-t) var(--chat-e); }
.hero-copy::before, .hero .ai, .hero .ai::before, .hero .ai::after { transition: flex-grow var(--chat-t) var(--chat-e); }
/* Büyüme payı 4 × (1 + r): r = başlığın yüksekliği / boş alan (asistan.js oranYaz). Bu payla boşluklar, başlık ve
   yazışma kaydı aynı eğriyle değişir; istem kartı baştan sona tek yönde (aşağı) hareket eder. */
.hero.is-chat .ai { flex-grow: calc(4 * (1 + var(--chat-r, 1))); }
.hero.is-chat .hero-h { grid-template-rows: 0fr; }
.hero.is-chat .hero-h h1 { opacity: 0; transform: translateY(-1.5rem); transition-delay: 0s; transition-duration: 0.32s, var(--chat-t); }
.hero.is-chat .hero-copy::before, .hero.is-chat .ai::before, .hero.is-chat .ai::after { flex-grow: 0; }

/* Kutu: kapalıyken görünmez bir sarmalayıcı (çerçeve gölgeyle çizilir ki istem kartı öneri kartlarıyla aynı hizada kalsın) */
.ai-panel {
  position: relative; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 0;
  border-radius: 26px; background-color: transparent; box-shadow: 0 0 0 1px transparent, 0 34px 70px -46px transparent;
  transition: flex-grow var(--chat-t) var(--chat-e), min-height var(--chat-t) var(--chat-e), margin-top var(--chat-t) var(--chat-e),
    background-color var(--chat-t) var(--chat-e), box-shadow var(--chat-t) var(--chat-e);
}
.hero.is-chat .ai-panel {
  flex-grow: calc(4 * (1 + var(--chat-r, 1))); min-height: 30rem; margin-top: 0.9rem;
  background-color: color-mix(in srgb, #fff 62%, var(--cream));
  box-shadow: 0 0 0 1px var(--rule), 0 34px 70px -46px rgba(24, 21, 17, 0.5);
}
/* Kimlik satırı yazışma alanının başlığı olur */
.ai-panel .ai-id {
  position: relative; padding: 0; margin-bottom: 0.8rem; border-radius: 26px 26px 0 0;
  background-color: transparent; box-shadow: inset 0 -1px 0 transparent;
  transition: padding var(--chat-t) var(--chat-e), margin-bottom var(--chat-t) var(--chat-e), background-color var(--chat-t) var(--chat-e), box-shadow var(--chat-t) var(--chat-e);
}
.hero.is-chat .ai-panel .ai-id { padding: 0.8rem 6rem 0.8rem 1.15rem; margin-bottom: 0; background-color: color-mix(in srgb, #fff 82%, var(--cream)); box-shadow: inset 0 -1px 0 var(--rule-soft); }
.ai-acts { position: absolute; top: 50%; right: 0.6rem; display: flex; gap: 0.1rem; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), visibility 0s 0.25s; }
.hero.is-chat .ai-acts { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out) 0.3s, visibility 0s; }
/* Yazışma kaydı: kapalıyken sıfır yükseklik; kutunun büyüyen payını o alır. Kaydırma geçiş bitince açılır (is-chat-hazir). */
.ai-panel .ap-log { flex: 1 1 0px; min-height: 0; overflow: hidden; padding-block: 0; opacity: 0; transition: padding var(--chat-t) var(--chat-e), opacity 0.3s var(--ease-out); }
.hero.is-chat .ai-panel .ap-log { padding-block: 1.4rem 1.2rem; opacity: 1; transition: padding var(--chat-t) var(--chat-e), opacity 0.5s var(--ease-out) 0.15s; }
.hero.is-chat-hazir .ai-panel .ap-log { overflow-y: auto; }
/* İstem kartı kutunun dibinde kalır; konu çiplerinin yerini randevu ve e-posta alır (penceredeki gibi) */
.ai-panel .ai-composer { margin: 0; transition: margin var(--chat-t) var(--chat-e), border-radius var(--chat-t) var(--chat-e), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.hero.is-chat .ai-panel .ai-composer { margin: 0.2rem clamp(0.8rem, 3vw, 1.6rem) 0; border-radius: 20px; box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
.hero.is-chat .ai-panel .ai-composer:focus-within { box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--ink) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--orange) 15%, transparent); }
.hero.is-chat .ai-panel .ai-composer::before { opacity: 0; }
.ai-panel .ap-quick { display: none; }
.hero.is-chat .ai-panel .ai-modes, .hero.is-chat .ai-panel .ai-kbd { display: none; }
.hero.is-chat .ai-panel .ap-quick { display: flex; animation: ai-belir 0.5s var(--ease-out) 0.1s both; }
@keyframes ai-belir { from { opacity: 0; } }
.ai-panel .ap-foot { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; transition: max-height var(--chat-t) var(--chat-e), padding var(--chat-t) var(--chat-e), opacity 0.3s var(--ease-out); }
.hero.is-chat .ai-panel .ap-foot { max-height: 4.5rem; padding-block: 0.5rem 0.7rem; opacity: 1; }

@media (min-width: 700px) { .pcs--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 761px) and (max-width: 900px) {
  .header-inner { gap: 1rem; }
  .nav-main, .nav-main ul { gap: 0.9rem; }
}
@media (max-width: 900px) { .ai-sugs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ask-open { margin-left: auto; }
  body.menu-open .ask-open { visibility: hidden; }
  .ap { padding: 0; }
  .ap-win { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .msg--user { max-width: 86%; }
  /* Ana sayfada yazışma alanı ilk ekranı doldurur; öneri kartları hemen altında kalır */
  .hero.is-chat .ai-panel { min-height: calc(100svh - 65px - 1.6rem); margin-top: 0.5rem; }
  .hero.is-chat .ai-panel .ai-id { padding-right: 5.6rem; }
}
@media (max-width: 560px) {
  .ai-kbd, .ai-id-d { display: none; }
  .ai-modes { flex-wrap: nowrap; }
  .ai-modes .ai-mode svg { display: none; }
  .cta-b { grid-template-columns: 1fr; }
  .ai-sugs, .ai-sugs--rows { grid-template-columns: 1fr; }
  .ap-sub { max-width: 52vw; }
  /* Randevu ve e-posta tek satırda kalsın; istem kartı uzamasın */
  .ap-quick { flex-wrap: nowrap; }
  .ap-quick a svg { display: none; }
}
/* Dar telefonda düğme "AI Agent" olarak kısalır; menü simgesi sıkışmaz */
@media (max-width: 480px) {
  .ask-ek { display: none; }
  .nav-toggle { flex: none; }
}
@media (max-width: 420px) {
  .header-inner { gap: 0.55rem; }
  .ask-open { gap: 0.4rem; padding: 0.3rem 0.65rem 0.3rem 0.34rem; font-size: 0.8rem; }
}
@media (pointer: coarse) {
  .ask-open, .ai-mode, .qr button, .ap-quick a { min-height: 44px; }
  .ai-send { width: 44px; height: 44px; }
  .ap-icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap, .ap-win, .ap-backdrop, .ai-sug, .pc { transition: none; }
  .pts, .pcs, .yol, .devam, .cta { animation: none; }
  .hero-h, .hero-h h1, .hero-copy::before, .hero .ai::before, .hero .ai::after, .ai-panel, .ai-panel .ai-id, .ai-acts,
  .hero .ai, .ai-panel .ap-log, .ai-panel .ai-composer, .ai-panel .ap-foot { transition: none !important; }
  .hero.is-chat .ai-panel .ap-quick { animation: none; }
  .ai-mark *, .ai-typing i, .ai-cursor, .step-ic::before, .step:not(.is-done) .step-t { animation: none !important; }
  .ai-mark .mk-e, .ai-mark .mk-n { transition: none; }
  .step:not(.is-done) .step-t { color: var(--ink-muted); background: none; }
}
/* Ekran görüntüsü yardımcısı (?duz) */
html.wf-duz .reveal { opacity: 1 !important; transform: none !important; }
html.wf-duz .ai-mark.is-live * { animation: none !important; }