/* Bölüm: panel AI Asistanı.

   SOLDA sohbet penceresi — adımlar sırayla belirir ve döngüye girer.
   SAĞDA küçük görsel, başlık, açıklama ve ikonlu kullanım kutucukları.

   Varsayılan zemin AÇIK; koyu zemin seçilirse en alttaki .section--deep
   kuralları devreye girer.

   Canlandırma yalnızca opacity + transform ile yapılır: mesajlar en baştan
   yer kapladığı için pencere büyüyüp küçülmez, sayfa zıplamaz. */

.ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 4vw, var(--sp-12));
    align-items: center;
}

/* ------------------------------------------------------------ Sohbet penceresi */

.ai-window {
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.ai-window__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-4);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.ai-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.12);
    color: var(--brand-700);
}

.ai-window__title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.ai-window__note {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-500);
}

.ai-thread {
    display: grid;
    gap: 10px;
    padding: var(--sp-4);
}

/* --------------------------------------------------------------- Mesajlar */

.ai-msg {
    display: grid;
    gap: 6px;
    justify-items: start;
    max-width: 88%;
}

.ai-msg--user {
    justify-items: end;
    justify-self: end;
    text-align: right;
}

.ai-bubble {
    padding: 8px 12px;
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.ai-msg--bot .ai-bubble {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
    color: var(--ink-800);
}

.ai-msg--user .ai-bubble {
    background: var(--brand-700);
    border-bottom-right-radius: 5px;
    color: #fff;
}

/* Yönlendirme rozeti — bağlantı DEĞİL, panel içindeki ekranı anlatır */
.ai-jump {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(6, 182, 212, 0.09);
    border: 1px solid rgba(6, 182, 212, 0.32);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--brand-700);
}

/* ---------------------------------------------------------- Adım adım akış

   Her adımın kendi keyframe'i var. Ortak keyframe + farklı gecikme denenmez:
   sonsuz döngüde her öğe kendi fazında kaybolur, eski ve yeni mesajlar iç içe
   girerdi. Burada hepsi 18 sn'lik AYNI takvimi paylaşır; sırayla belirir,
   birlikte kaybolur. */

.ai-msg {
    animation-duration: 18s;
    animation-timing-function: var(--ease);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.ai-msg:nth-child(1) { animation-name: ai-s1; }
.ai-msg:nth-child(2) { animation-name: ai-s2; }
.ai-msg:nth-child(3) { animation-name: ai-s3; }
.ai-msg:nth-child(4) { animation-name: ai-s4; }
.ai-msg:nth-child(5) { animation-name: ai-s5; }
.ai-msg:nth-child(6) { animation-name: ai-s6; }

@keyframes ai-s1 {
    0%, 5%      { opacity: 0; transform: translateY(9px); }
    8.1%, 85%   { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes ai-s2 {
    0%, 15.6%   { opacity: 0; transform: translateY(9px); }
    18.6%, 85%  { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes ai-s3 {
    0%, 26.1%   { opacity: 0; transform: translateY(9px); }
    29.2%, 85%  { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes ai-s4 {
    0%, 36.7%   { opacity: 0; transform: translateY(9px); }
    39.7%, 85%  { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes ai-s5 {
    0%, 47.2%   { opacity: 0; transform: translateY(9px); }
    50.3%, 85%  { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes ai-s6 {
    0%, 57.8%   { opacity: 0; transform: translateY(9px); }
    60.8%, 85%  { opacity: 1; transform: none; }
    89.4%, 100% { opacity: 0; transform: translateY(-5px); }
}

/* ----------------------------------------------------------------- Sağ sütun */

/* Ürün işareti: küçük görsel + adı yan yana */
.ai-mark {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--sp-4);
}

.ai-mark__img {
    display: block;
    width: clamp(64px, 6.5vw, 84px);
    height: auto;
    mix-blend-mode: multiply;   /* beyaz kare zemin açık zemine karışsın */
}

.ai-mark__label {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
    color: var(--ink-900);
}

.ai-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--ink-900);
}

.ai-lead {
    margin-top: var(--sp-3);
    max-width: 50ch;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-600);
}

/* Metin yığınını kırmak için: düz liste değil, ikonlu ikili ızgara */
.ai-uses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: clamp(var(--sp-5), 2.5vw, var(--sp-6));
    max-width: 480px;
    list-style: none;
}

.ai-use {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    color: var(--ink-800);
}

.ai-use__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(6, 182, 212, 0.1);
    color: var(--brand-700);
}

/* Kutucuklar örnek; liste bunlarla sınırlı değil */
.ai-uses__note {
    margin-top: var(--sp-3);
    max-width: 480px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink-600);
}

/* ------------------------------------------------------------- Koyu zemin */

.section--deep .ai-window     { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.section--deep .ai-window__bar{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.section--deep .ai-window__title { color: #fff; }
.section--deep .ai-window__note  { color: var(--ink-400); }
.section--deep .ai-avatar     { background: rgba(34,211,238,0.16); color: var(--brand-400); }
.section--deep .ai-msg--bot .ai-bubble {
    background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.1); color: #e2e8f0;
}
.section--deep .ai-jump {
    background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.34); color: var(--brand-400);
}
.section--deep .ai-title { color: #fff; }
.section--deep .ai-lead  { color: var(--ink-300); }
.section--deep .ai-use   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: #e2e8f0; }
.section--deep .ai-use__ico { background: rgba(34,211,238,0.14); color: var(--brand-400); }
.section--deep .ai-mark  { mix-blend-mode: normal; }

/* --------------------------------------------------------------- Kırılımlar */

@media (max-width: 900px) {
    .ai-grid { grid-template-columns: minmax(0, 1fr); }
    .ai-window { order: 2; max-width: none; }
    .ai-msg { max-width: 92%; }
}

@media (max-width: 460px) {
    .ai-uses { grid-template-columns: minmax(0, 1fr); }
}

/* Hareket azaltılmışsa sohbet durur, tüm adımlar birden görünür */
@media (prefers-reduced-motion: reduce) {
    .ai-msg { animation: none; opacity: 1; transform: none; }
}