/* ==========================================================================
   ANA SAYFA v5 — "Editoryal Mühendislik"
   Koyu mürekkep hero, mono şerit, numaralı bölümler, çizgiyle derinlik.
   Token'lar theme.css'ten gelir.
   ========================================================================== */

.main.homeE {
    overflow-x: clip;
    background: var(--paper);
}

.main.homeE .container {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

/* --- BUTONLAR ---------------------------------------------------------------- */

.main.homeE .ebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.main.homeE .ebtn.sm {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13.5px;
}

.main.homeE .ebtn i {
    font-size: 12px;
    transition: transform .2s ease;
}

.main.homeE .ebtn:hover i {
    transform: translateY(2px);
}

.main.homeE .ebtn.solid {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand-hover);
}

.main.homeE .ebtn.solid:hover {
    background: var(--brand-hover);
}

.main.homeE .ebtn.ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
}

.main.homeE .ebtn.ghost:hover {
    border-color: var(--ink);
}

.main.homeE .eh .ebtn.ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.main.homeE .eh .ebtn.ghost:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

/* .ebtn.light ve .ebtn.ghostlight kaldırıldı: yalnızca eski koyu kapanış
   bloğu (.ecta) kullanıyordu; o blok ortak kil paneline (.kcta) taşındı. */

/* --- HERO: koyu mürekkep ------------------------------------------------------ */

.main.homeE .eh {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(139, 125, 216, 0.16) 0%, rgba(139, 125, 216, 0) 60%),
        linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
}

/* Video arka plan: masaüstü + sayfa yüklendikten sonra (JS .on ekler) */
.main.homeE .eh-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
}

.main.homeE .eh-video.on {
    opacity: 1;
}

.main.homeE .eh-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Koyu katman: metin kontrastını korur, marka gece tonuyla boyar */
.main.homeE .eh-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(139, 125, 216, 0.12) 0%, rgba(139, 125, 216, 0) 60%),
        linear-gradient(180deg, rgba(22, 19, 43, 0.82) 0%, rgba(15, 13, 32, 0.92) 100%);
}

.main.homeE .eh-inner {
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .main.homeE .eh-video {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main.homeE .eh-video {
        display: none;
    }
}

.main.homeE .eh-inner {
    display: block;
    padding-top: 96px;
    padding-bottom: 72px;
}

.main.homeE .kick {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-bright);
    margin-bottom: 26px;
}

.main.homeE .eh h1 {
    max-width: 900px;
    font-size: 56px;
    line-height: 64px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 22px;
}

.main.homeE .eh-sub {
    max-width: 620px;
    font-size: 16.5px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 36px;
}

.main.homeE .eh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Hero istatistikleri: mono, ince çizgili */
.main.homeE .eh-stats {
    display: flex;
    flex-wrap: wrap;
    margin: 64px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.main.homeE .eh-stats div {
    box-sizing: border-box;
    flex: 1;
    min-width: 150px;
    padding: 22px 24px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    margin-right: 24px;
}

.main.homeE .eh-stats div:last-child {
    border-right: none;
    margin-right: 0;
}

.main.homeE .eh-stats dt {
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.main.homeE .eh-stats dd {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

/* --- MONO ŞERİT ---------------------------------------------------------------- */

/* Kesiksiz döngü mantığı işaretlemede anlatılıyor (home.blade.php):
   pist = birebir eş iki yarı, animasyon tam -50%. Yarılar arası boşluk
   flex gap ile DEĞİL yarının kendi padding-right'ıyla verilir; gap olsaydı
   pistin sonunda karşılığı olmadığı için -50% noktası şaşardı. */

.main.homeE .strip {
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    padding: 14px 0;
}

.main.homeE .strip-track {
    display: flex;
    width: max-content;
    animation: stripmove 105s linear infinite;
    will-change: transform;
}

.main.homeE .strip-yari {
    display: flex;
    gap: 28px;
    padding-right: 28px;
}

.main.homeE .strip-yari span {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* Süre 36s → 105s: -50%'lik yol eskiden ~1 kopya (~1200px) iken şimdi
   3 kopya (~3600px); piksel/saniye hızı aynı kalsın diye süre de üçlendi.
   translate3d: katman GPU'ya gitsin, ara değerler tam piksele yuvarlanmasın. */
@keyframes stripmove {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* --- BÖLÜM İSKELETİ ------------------------------------------------------------ */

.main.homeE .sec {
    border-bottom: 1px solid var(--rule);
    padding: 72px 0 84px;
}

.main.homeE .sec-head {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    margin-bottom: 44px;
}

.main.homeE .sec-head .num {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 8px 11px;
    margin-top: 4px;
}

.main.homeE .sec-head .lab {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.main.homeE .sec-head h2 {
    font-size: 34px;
    line-height: 42px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.main.homeE .sec-body {
    display: block;
}

/* --- 01 · ÜRÜN SATIRLARI -------------------------------------------------------- */

.main.homeE .prows {
    border-top: 1px solid var(--rule);
}

.main.homeE .prow {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 34px 6px;
    border-bottom: 1px solid var(--rule);
    transition: background-color .2s ease;
}

.main.homeE .prow:hover {
    background: #fff;
}

.main.homeE .prow-info {
    flex: 1.5;
    min-width: 0;
}

.main.homeE .prow-info h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.main.homeE .prow-info h3 a {
    color: var(--ink);
    text-decoration: none;
    transition: color .2s ease;
}

.main.homeE .prow-info h3 a:hover {
    color: var(--brand);
}

.main.homeE .prow-info p {
    font-size: 14.5px;
    line-height: 24px;
    color: var(--muted);
    max-width: 560px;
    margin-bottom: 14px;
}

.main.homeE .prow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.main.homeE .prow-tags span {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 5px 9px;
}

.main.homeE .prow-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    text-align: right;
}

.main.homeE .prow-price em {
    display: block;
    font-style: normal;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.main.homeE .prow-price small {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 3px;
}

.main.homeE .prow-actions {
    display: flex;
    gap: 8px;
}

/* --- 02 · ÖZELLİK IZGARASI ------------------------------------------------------ */

.main.homeE .fgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}

.main.homeE .fcell {
    box-sizing: border-box;
    padding: 28px 26px 32px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transition: background-color .2s ease;
}

.main.homeE .fcell:hover {
    background: #fff;
}

/* Başlığın soluna Claymorphism nesnesi. Görsel henüz yoksa `figur._nesne`
   hiçbir şey basmıyor; flex tek çocukla da doğru çalıştığı için başlık o
   durumda da bozulmadan duruyor. Dosyalar geldiğinde kendiliğinden dolar. */
.main.homeE .fcell h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.main.homeE .fcell h3 .nesne3d {
    width: 36px;
    flex-shrink: 0;
    transition: transform .25s var(--ease);
}

.main.homeE .fcell:hover h3 .nesne3d {
    transform: translateY(-2px) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
    .main.homeE .fcell h3 .nesne3d { transition: none; }
    .main.homeE .fcell:hover h3 .nesne3d { transform: none; }
}

.main.homeE .fcell p {
    font-size: 14px;
    line-height: 23px;
    color: var(--muted);
}

/* --- 03 · SÜREÇ ----------------------------------------------------------------- */

.main.homeE .esteps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main.homeE .esteps li {
    border-top: 2px solid var(--ink);
    padding-top: 20px;
}

.main.homeE .es-num {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 12px;
}

.main.homeE .esteps h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.main.homeE .esteps p {
    font-size: 14px;
    line-height: 23px;
    color: var(--muted);
}

/* --- 04 · TAAHHÜTLER ------------------------------------------------------------- */

.main.homeE .promises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.main.homeE .promises li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--rule);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-secondary);
}

.main.homeE .promises li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 11px;
}

/* --- KAPANIŞ CTA ----------------------------------------------------------------- */

/* Kapanış CTA'sı (.ecta) kaldırıldı: blok artık sayfalar arası ortak kil
   paneli — partials/kapanis-cta.blade.php + theme.css §17 (.kcta). */

/* --- RESPONSIVE ------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .main.homeE .eh h1 {
        font-size: 44px;
        line-height: 52px;
    }

    .main.homeE .fgrid {
        grid-template-columns: 1fr 1fr;
    }

    .main.homeE .promises {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .main.homeE .eh-inner {
        padding-top: 60px;
        padding-bottom: 54px;
    }

    .main.homeE .eh h1 {
        font-size: 32px;
        line-height: 40px;
    }

    .main.homeE .eh-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .main.homeE .eh-stats div {
        border-right: none;
        margin-right: 0;
        padding: 18px 10px 4px 0;
    }

    .main.homeE .sec {
        padding: 48px 0 56px;
    }

    .main.homeE .sec-head {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 30px;
    }

    .main.homeE .sec-head .num {
        margin-top: 0;
        align-self: flex-start;
    }

    .main.homeE .sec-head h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .main.homeE .prow {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .main.homeE .prow-side {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .main.homeE .fgrid {
        grid-template-columns: 1fr;
    }

    .main.homeE .esteps {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .main.homeE .promises {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   ANASAYFA — YÜZEY DİLİ (v6)
   Bölüm kartları, hap butonlar ve yuvarlatılmış bloklar. Yukarıdaki
   bölümlerde düzen/boyut tanımları durur; görünüşe dair son söz buradadır.
   ========================================================================= */

/* --- Butonlar: hap formu + marka gölgesi -------------------------------------- */

.main.homeE .ebtn {
    border-radius: var(--r-pill);
    padding: 0 26px;
    font-weight: 500;
    transition: background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), box-shadow .25s var(--ease),
                transform .25s var(--ease);
}

.main.homeE .ebtn.solid {
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}

.main.homeE .ebtn.solid:hover {
    box-shadow: 0 14px 32px rgba(74, 65, 146, .3);
}

.main.homeE .ebtn.ghost {
    border-color: var(--rule);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

.main.homeE .ebtn.ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.main.homeE .eh .ebtn.ghost {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

/* Ok ikonu zıplaması yerine yumuşak kayma */
.main.homeE .ebtn:hover i {
    transform: translateY(1px);
}

/* --- Hero: yuvarlatılmış gece bloğu ------------------------------------------- */

.main.homeE .eh {
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow: hidden;
}

.main.homeE .kick {
    letter-spacing: .1em;
    font-weight: 500;
}

.main.homeE .eh h1 {
    font-size: 52px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.main.homeE .eh-sub {
    color: rgba(255, 255, 255, .72);
    line-height: 1.75;
}

/* İstatistikler: dikey çizgi ızgarası yerine yumuşak kartlar */
.main.homeE .eh-stats {
    gap: 12px;
    border-top: none;
    margin-top: 56px;
}

.main.homeE .eh-stats div {
    padding: 18px 22px;
    margin-right: 0;
    border-right: none;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}

.main.homeE .eh-stats dt {
    font-size: 24px;
    letter-spacing: -0.01em;
}

.main.homeE .eh-stats dd {
    color: rgba(255, 255, 255, .6);
}

/* --- Şerit: çizgisiz, yumuşak zemin ------------------------------------------- */

.main.homeE .strip {
    border-bottom: none;
    background: var(--brand-soft);
    padding: 16px 0;
}

.main.homeE .strip-track span {
    letter-spacing: .1em;
    color: var(--brand);
    opacity: .75;
}

/* --- Bölüm iskeleti: ayırıcı çizgi yerine nefes -------------------------------- */

.main.homeE .sec {
    border-bottom: none;
    padding: 76px 0 40px;
}

.main.homeE .sec-head .num {
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
    padding: 9px 15px;
}

.main.homeE .sec-head .lab {
    letter-spacing: .1em;
}

.main.homeE .sec-head h2 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

/* --- 01 · Ürün satırları: çizgi ızgarası yerine kartlar ------------------------ */

.main.homeE .prows {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.main.homeE .prow {
    padding: 26px 28px;
    border-bottom: none;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease),
                border-color .3s var(--ease);
}

.main.homeE .prow:hover {
    background: #fff;
    border-color: var(--rule);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.main.homeE .prow-info h3 {
    letter-spacing: -0.01em;
}

.main.homeE .prow-tags span {
    border: none;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    letter-spacing: .06em;
    padding: 6px 12px;
}

.main.homeE .prow-price em {
    letter-spacing: -0.01em;
}

/* --- 02 · Özellik ızgarası: hücre çizgileri yerine kartlar --------------------- */

.main.homeE .fgrid {
    border-top: none;
    border-left: none;
    gap: 16px;
}

.main.homeE .fcell {
    border-right: none;
    border-bottom: none;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
    padding: 26px 24px 28px;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.main.homeE .fcell:hover {
    background: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* --- 03 · Süreç: kalın üst çizgi yerine numaralı rozet ------------------------- */

.main.homeE .esteps li {
    border-top: none;
    padding: 24px 24px 26px;
    border-radius: var(--r-lg);
    background: var(--brand-soft);
}

/* Adım numarası iki hâlde çalışır:
     nesne YOKSA → mor daire + beyaz rakam (aşağıdaki temel kural)
     nesne VARSA → kil rakam görseli; daire zemini ve <em> gizlenir
   Görsel gelene kadar sayfa bozulmasın diye böyle kuruldu. */
.main.homeE .es-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Kil rakam geldiğinde daire kaybolur, görsel büyür.
   `.kil` sınıfını Blade dosya varlığına göre veriyor — :has() ile de olurdu
   ama o desteklenmeyen bir tarayıcıda daire görselin arkasında kalırdı. */
.main.homeE .es-num.kil {
    width: 52px;
    height: 52px;
    background: none;
    box-shadow: none;
}

.main.homeE .es-num .nesne3d {
    width: 100%;
    filter: drop-shadow(0 6px 14px rgba(74, 65, 146, .18));
}

/* --- 04 · Taahhütler: çizgi listesi yerine yumuşak satırlar -------------------- */

.main.homeE .promises {
    border-top: none;
    gap: 12px;
}

.main.homeE .promises li {
    border-bottom: none;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--rule-soft);
}

.main.homeE .promises li i {
    width: 26px;
    height: 26px;
    border-radius: var(--r-pill);
}

@media (prefers-reduced-motion: reduce) {
    .main.homeE .prow:hover,
    .main.homeE .fcell:hover {
        transform: none;
    }
}

@media (max-width: 760px) {
    .main.homeE .eh h1 { font-size: 34px; }
    .main.homeE .prow { padding: 22px 20px; }
}


/* ============================================================================
   v6.1 — AÇIK HERO
   Koyu gece bloğu ve arka plan videosu kaldırıldı. Zemin artık kağıt üzerine
   iki yumuşak mor küre ve çok ince bir ızgara; hepsi saf CSS, ek istek yok.
   Bu blok yukarıdaki koyu hero kurallarını ezer.
   ========================================================================= */

.main.homeE .eh {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--paper) 55%, var(--brand-soft) 100%);
}

/* İnce ızgara: yakından bakınca fark edilir, uzaktan doku gibi durur */
.main.homeE .eh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(74, 65, 146, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(74, 65, 146, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%);
    pointer-events: none;
}

/* Alt sınırı yumuşat: sert kesim yerine zemine karışsın */
.main.homeE .eh::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(240, 238, 250, 0) 0%, var(--brand-soft) 100%);
    pointer-events: none;
}

/* İki blur küre */
.main.homeE .eh-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.main.homeE .eh-bg span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
}

.main.homeE .eh-bg span:first-child {
    width: 620px;
    height: 620px;
    top: -220px;
    right: -140px;
    background: radial-gradient(circle, rgba(154, 140, 228, .40) 0%, rgba(154, 140, 228, 0) 70%);
}

.main.homeE .eh-bg span:last-child {
    width: 520px;
    height: 520px;
    bottom: -240px;
    left: -120px;
    background: radial-gradient(circle, rgba(120, 160, 230, .26) 0%, rgba(120, 160, 230, 0) 70%);
}

.main.homeE .eh-inner {
    position: relative;
    z-index: 1;
    padding-top: 88px;
    padding-bottom: 88px;
}

/* --- Açık zeminde tipografi --------------------------------------------------- */

/* Rozet yalnızca hero'ya ait; kapanış CTA'sının kicker'ı koyu zeminde kalır */
.main.homeE .eh .kick {
    display: inline-block;
    color: var(--brand);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 7px 16px;
    margin-bottom: 26px;
    box-shadow: var(--shadow-xs);
}

.main.homeE .eh h1 {
    color: var(--ink);
}

.main.homeE .eh-sub {
    color: var(--muted);
}

/* --- Açık zeminde butonlar ---------------------------------------------------- */

.main.homeE .eh .ebtn.ghost {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-xs);
}

.main.homeE .eh .ebtn.ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

/* --- Açık zeminde istatistik kartları ----------------------------------------- */

.main.homeE .eh-stats div {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.main.homeE .eh-stats dt {
    color: var(--ink);
}

.main.homeE .eh-stats dd {
    color: var(--muted);
}

/* --- Şerit: hero'nun alt degradesiyle aynı tonda, sınır görünmesin ------------ */

.main.homeE .strip {
    background: var(--brand-soft);
}

@media (max-width: 760px) {
    .main.homeE .eh-inner {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .main.homeE .eh-bg span:first-child {
        width: 380px;
        height: 380px;
        top: -160px;
        right: -120px;
    }

    .main.homeE .eh-bg span:last-child {
        display: none;
    }
}


/* ============================================================================
   v6.2 — HERO SAHNESİ
   Hero iki sütuna ayrıldı: solda metin, sağda hareketli figür kompozisyonu.
   Merkezde bir kişi, çevresinde yaptığımız işleri anlatan rozetler dönüyor —
   tek ürüne bağlanmadığı için anasayfaya uygun.

   Ölçü notu: 3D figürlerin kaynağı 256px. Yumuşak gradyanlı render oldukları
   için ölçeklemeye çizgi işlerinden çok daha iyi dayanıyorlar; 2x ekranda
   ~260px'e kadar kabul edilebilir kalıyor. Merkez figür bu yüzden 250px,
   daha büyüğü bulanıklaşmaya başlar.
   ========================================================================= */

.main.homeE .eh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
}

@media (min-width: 1080px) {
    .main.homeE .eh-grid {
        grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
        gap: 40px;
    }

    /* İki sütunda başlık dar kaldığı için küçültülüyor. Şirket odaklı yeni
       metin eskisinden uzun; 50px'te dört satıra çıkıyordu. */
    .main.homeE .eh h1 {
        font-size: 45px;
        line-height: 53px;
    }
}

/* --- Sahne kutusu ------------------------------------------------------------ */

.main.homeE .eh-sahne {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.95;
}

/* HAREKET KURALI — neden sürekli süzülme yok

   Önce rozetler ve figür sonsuz döngüde aşağı yukarı süzülüyordu. Kesik
   görünmesinin sebebi eğri ya da GPU değil, hızın kendisiydi:

       13 px hareket / 7 sn  =  saniyede 1,86 px  =  kare başına 0,031 px

   Yani öğenin tek bir piksel kayması için 32 kare geçmesi gerekiyor. Tarayıcı
   ara değeri tam piksele yuvarladığı anda hareket akış değil, yarım saniyede
   bir atlayan basamak oluyor. Güvenle akıcı görünecek hıza çıkarmak
   (~0,33 px/kare) ise kurumsal bir hero için rahatsız edici bir zıplama
   demekti.

   Bu yüzden teknik değişti:

   - Sürekli süzülme kaldırıldı. Yerine sayfa açılırken bir kerelik, sıralı
     giriş animasyonu geldi. 0,6–0,9 sn'lik hareket kare başına birkaç piksel
     düşer; yuvarlama sorunu ortadan kalkar ve hareket amaçlı görünür.
   - Halkanın dönüşü kaldırıldı. Kesik çizgili bir çemberi ağır döndürmek
     çizgilerin "sürünmesine" yol açıyor; aynı yuvarlama sorunu.
   - Sürekli hareket olarak yalnızca arkadaki bulanık ışık kaldı. Keskin
     kenarı olmadığı için basamaklanma göstermez, opaklık değişimi de
     yuvarlanmaz.
   - Fareyle üzerine gelince rozetler kalkıyor: 0,3 sn'lik hareket her zaman
     akıcıdır ve etkileşime yanıt verdiği için amaçlı durur. */

/* Merkezdeki yumuşak ışık: figürü zeminden ayırır */
.main.homeE .ehs-isik {
    position: absolute;
    inset: 3% 0 0 0;
    width: 78%;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(154, 140, 228, .30) 0%, rgba(154, 140, 228, 0) 68%);
    animation: ehsNefes 7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* --- Yörüngeler: yıldız ve gezegenler ---------------------------------------
   Her nesne kendi görünmez kabında duruyor; dönen kap, nesne değil.

   Neden böyle: nesneyi doğrudan süzdürmek (translateY) bu hızda kare başına
   0,03 piksele düşüyor ve basamaklanıyor — ölçüldü. Dönen kapta duran nesne
   ise yarıçap kadar yol alıyor: %48 çapta, 500px'lik sahnede yarıçap ~120px,
   52 saniyelik turda saniyede ~14 piksel, yani kare başına 0,24 piksel.
   Sekiz kat daha hızlı ve gözle yine "hafifçe süzülüyor" görünüyor.

   Nesne kabın içinde ters yönde aynı sürede dönüyor, yoksa turun yarısında
   baş aşağı gelirdi. Ortalaması margin ile yapıldığı için transform tamamen
   animasyona kalıyor. */
.main.homeE .ehs-yorunge {
    position: absolute;
    inset: 0;
    width: var(--cap);
    aspect-ratio: 1;
    margin: auto;
    animation: ehsYorunge var(--sure) linear infinite;
    animation-delay: var(--faz);
    will-change: transform;
}

.main.homeE .ehs-yorunge .nesne3d {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--px);
    height: auto;
    margin: calc(var(--px) / -2) 0 0 calc(var(--px) / -2);
    animation: ehsYorungeKarsi var(--sure) linear infinite;
    animation-delay: var(--faz);
    filter: drop-shadow(0 6px 12px rgba(26, 23, 38, .12));
    will-change: transform;
}

@keyframes ehsYorunge {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ehsYorungeKarsi {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* --- Merkezdeki maskot -------------------------------------------------------- */

/* aspect-ratio yüksekliği kesinleştirir; `inset: 0` + `margin: auto` ile iki
   eksende de ortalanır, transform animasyona kalır.
   Ölçü: maskot 512px kaynaktan geliyor, eski Fluent setinin 256px tavanı yok —
   bu yüzden hero'da 340px'e kadar çıkabiliyor ve hâlâ 2x ekranda net. */
.main.homeE .ehs-kisi {
    position: absolute;
    inset: 0;
    width: 340px;
    max-width: 72%;
    aspect-ratio: 1;
    margin: auto;
    animation: ehsGir .85s cubic-bezier(.2, .7, .3, 1) .08s both;
}

.main.homeE .ehs-kisi .figur3d {
    width: 100%;
    filter: drop-shadow(0 18px 30px rgba(26, 23, 38, .18));
}

/* Yörüngedeki rozetler kaldırıldı — Fluent seti bırakıldı, yerlerine gelecek
   Claymorphism nesneleri henüz üretilmedi. Halka ve ışık kaldı; nesneler
   geldiğinde rozetler bu halkanın üzerine geri konur. */

/* --- Hareket ----------------------------------------------------------------- */

/* Giriş: yukarı doğru yükselerek ve hafifçe büyüyerek belirme.
   `both` ile bitiş durumu korunur; öğeler doğal (margin ile ortalanmış)
   yerlerinde kalır, yerleşim animasyona bağlı değildir. */
@keyframes ehsGir {
    from { opacity: 0; transform: translateY(20px) scale(.92); }
    to   { opacity: 1; transform: none; }
}

/* Tek sürekli hareket. Bulanık gradyan olduğu için keskin kenarı yok;
   basamaklanma göstermez. */
@keyframes ehsNefes {
    from { opacity: .6; transform: scale(.95); }
    to   { opacity: 1;  transform: scale(1.04); }
}

/* --- Dar ekran --------------------------------------------------------------- */

@media (max-width: 1079px) {
    .main.homeE .eh-sahne {
        max-width: 400px;
        order: 2;
    }
}

@media (max-width: 620px) {
    .main.homeE .eh-sahne { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Giriş animasyonları `both` ile çalıştığı için, kapatınca öğeler
       doğrudan bitiş durumunda görünür — ekstra bir şey gerekmez.
       Şerit de durur; ilk öğeler sabit görünür. */
    .main.homeE .ehs-kisi,
    .main.homeE .ehs-isik,
    .main.homeE .ehs-yorunge,
    .main.homeE .ehs-yorunge .nesne3d,
    .main.homeE .strip-track {
        animation: none;
        will-change: auto;
    }
}