/* Bölüm: E-Com Asistan.

   Koyu zeminde, ayrı ürün ailesi hissi veren hafif çerçeveli kartlar.
   Düzen: sol üstte marka işareti; altında SOLDA saydam görsel, SAĞDA ince
   başlık ve kısa açıklama; en altta üç kart YAN YANA. */

.sc-ecom-assistant { position: relative; overflow: hidden; }

/* Koyu zemine derinlik veren tek bir yumuşak ışık — gradient metin veya renkli şerit YOK */
.sc-ecom-assistant.section--deep::before {
    content: "";
    position: absolute;
    inset: -40% 30% auto -10%;
    height: 120%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, 0.28) 0%, transparent 70%);
    pointer-events: none;
}

.sc-ecom-assistant > .container { position: relative; }

/* --------------------------------------------------------- Marka + giriş */

/* Marka işareti butonla aynı hizada, sağ köşede. Üstte ayrı bir satır olarak
   durduğunda bölümü boşuna uzatıyordu. */
.ea-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
}

.ea-logo {
    display: block;
    height: clamp(26px, 2.8vw, 36px);
    width: auto;
    /* Buton solda kalsın, işaret sağ köşeye itilsin; satır kırılırsa da sağda kalır */
    margin-left: auto;
}

.ea-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 3.5vw, var(--sp-10));
    align-items: center;
}

.ea-top--solo { grid-template-columns: minmax(0, 1fr); }
.ea-top--solo .ea-intro { max-width: 68ch; }

/* Görsel AÇIK ZEMİNLİ bir panel olarak durur.

   Neden saydam değil: gelen çizimde beyaz kartların tonu (254) ile arka planın
   tonu (246–250) arasında yalnızca 4 birim var. Ne yapay zekâ kesimi ne de
   bağlantı tabanlı taşma bu ikisini ayırabildi — ikisi de robotun beyaz
   gövdesini deldi. Bunun yerine arka plan DÜZ #f8fafc'ye çevrildi; çizim
   zarar görmedi ve koyu zeminde kasıtlı bir panel gibi duruyor.

   Gerçekten saydam bir sürüm gelirse bu kural (zemin + köşe + gölge)
   kaldırılıp yerine drop-shadow konur. */
.ea-visual img {
    display: block;
    width: 100%;
    height: auto;
    background: #f8fafc;
    border-radius: var(--r-lg);
    box-shadow: 0 22px 44px rgba(2, 6, 23, 0.45);
}

/* Başlık bilerek İNCE: bu bölüm ayrı bir ürünü tanıtır, ana sayfanın
   kalın bölüm başlıklarıyla yarışmaz. */
.ea-title {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    letter-spacing: var(--ls-heading);
    color: #fff;
}

.ea-lead {
    margin-top: var(--sp-4);
    max-width: 54ch;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-300);
}

/* ------------------------------------------------------------ Üç kart YAN YANA

   Üç sütun 1120 px'lik kapsayıcıda ~355 px'e düşüyor; başlık, açıklama ve
   maddeler bu yüzden bir tık küçültüldü. Açıklamanın iki satıra sarması
   beklenen davranıştır. */

.ea-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--sp-3), 1.4vw, var(--sp-5));
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.ea-card {
    padding: clamp(var(--sp-4), 1.8vw, var(--sp-5));
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-lg);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ea-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
}

.ea-card__title {
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: #fff;
}

.ea-card__text {
    margin-top: 6px;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-300);
}

/* ------------------------------------------------------------------ Maddeler */

.ea-points {
    display: grid;
    gap: 6px;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
}

.ea-point {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: #e2e8f0;
}

.ea-point svg {
    margin-top: 3px;
    color: var(--brand-400);
}

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

@media (max-width: 900px) {
    .ea-top { grid-template-columns: minmax(0, 1fr); }
    .ea-visual { max-width: 520px; margin-inline: auto; }
    .ea-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ea-cards { grid-template-columns: minmax(0, 1fr); }
}