.elementor-34 .elementor-element.elementor-element-cf2f22e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-34 .elementor-element.elementor-element-b2394da{margin:-142px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-34 .elementor-element.elementor-element-ba2a003{--display:flex;--min-height:187px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.49;--overlay-mix-blend-mode:lighten;--margin-top:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-34 .elementor-element.elementor-element-ba2a003::before, .elementor-34 .elementor-element.elementor-element-ba2a003 > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-ba2a003 > .e-con-inner > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-ba2a003 > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-ba2a003 > .e-con-inner > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-ba2a003 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://mediaela.com/wp-content/uploads/2025/11/image-gen2-scaled.png");--background-overlay:'';background-position:center center;background-size:auto;}.elementor-34 .elementor-element.elementor-element-7b94129{width:100%;max-width:100%;margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-34 .elementor-element.elementor-element-785e4ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-34 .elementor-element.elementor-element-3d291f0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;}.elementor-34 .elementor-element.elementor-element-3d291f0::before, .elementor-34 .elementor-element.elementor-element-3d291f0 > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-3d291f0 > .e-con-inner > .elementor-background-video-container::before, .elementor-34 .elementor-element.elementor-element-3d291f0 > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-3d291f0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-34 .elementor-element.elementor-element-3d291f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-34 .elementor-element.elementor-element-d70ab4a{width:100%;max-width:100%;margin:-36px 0px calc(var(--kit-widget-spacing, 0px) + -48px) 0px;padding:0px 0px -51px 0px;}.elementor-34 .elementor-element.elementor-element-10ed6e5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-190px;--padding-bottom:-190px;--padding-left:-190px;--padding-right:-190px;}.elementor-34 .elementor-element.elementor-element-a6f7e1c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -17px) 0px;padding:0px 0px 0px 0px;}.elementor-34 .elementor-element.elementor-element-8a3153c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-34 .elementor-element.elementor-element-8a3153c.e-con{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-34 .elementor-element.elementor-element-72fd285{width:100%;max-width:100%;border-style:none;}.elementor-34 .elementor-element.elementor-element-7c5c15b{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-34 .elementor-element.elementor-element-21adffc{width:100%;max-width:100%;margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;border-style:none;}.elementor-34 .elementor-element.elementor-element-14f184b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-34 .elementor-element.elementor-element-ca25c43{margin:-16px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}body.elementor-page-34:not(.elementor-motion-effects-element-type-background), body.elementor-page-34 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000F01;}@media(min-width:768px){.elementor-34 .elementor-element.elementor-element-7c5c15b{--width:110%;}}@media(max-width:767px){.elementor-34 .elementor-element.elementor-element-b2394da{width:100%;max-width:100%;margin:-29px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for container, class: .elementor-element-3d291f0 *//* Konteynerin Kendisi */
.elementor-34 .elementor-element.elementor-element-3d291f0 {
    /* Arkaplan Rengi: Sitenin ana koyu tonu */
    background-color: #020c06;
    
    /* İnce, zarif çerçeve */
    border: 1px solid rgba(255, 255, 255, 0.08);
    
    /* Yumuşak köşeler */
    border-radius: 24px;
    
    /* İç boşluklar */
    padding: 50px;
    
    /* Havada durma efekti (Gölge) */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    
    /* Pozisyonlama */
    position: relative;
    overflow: hidden; /* Taşan ışıkları kes */
}

/* Arkadan vuran YEŞİL ışık efekti (Glow) */
.elementor-34 .elementor-element.elementor-element-3d291f0::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    /* Neon Yeşil Işık Huzmesi */
    background: radial-gradient(circle, rgba(0, 255, 133, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
    .elementor-34 .elementor-element.elementor-element-3d291f0 {
        padding: 30px 20px; /* Mobilde boşluğu azalt */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7c5c15b *//* --- Font Bağlantısı (Elementor'un Head bölümüne de eklenebilir) --- */

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">

<style>
/* --- 1. ULTRA HD 4K BACKGROUND SYSTEM --- /
/ Elementor'a yapıştırıldığında tam genişlikte çalışması için temel stiller /
.mediela-expertise-4k {
position: relative;
width: 100%;
padding: 140px 20px;
/ Koyu Arkaplan Rengi */
background-color: #010604;
font-family: 'Inter', sans-serif;
box-sizing: border-box;
overflow: hidden;
}

/* LAYER 1: High-Res Lights */
.bg-4k-lights {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: 
        /* Sol Üst Yeşil Işık */
        radial-gradient(circle at 15% 20%, rgba(0, 255, 133, 0.08) 0%, transparent 45%),
        /* Sağ Alt Koyu Işık */
        radial-gradient(circle at 85% 80%, rgba(0, 143, 122, 0.08) 0%, transparent 45%);
    z-index: 0;
    pointer-events: none;
}

/* LAYER 2: Sharp Vector Grid */
.bg-4k-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Vektörel Çizgiler */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px; 
    /* Kenarlara doğru yumuşakça yok olmasını sağlar */
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: 1; pointer-events: none;
}

/* LAYER 3: Cinematic Noise */
.bg-4k-noise {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Yüksek Frekanslı SVG Gürültü */
    background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 200 200&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cfilter id=&#39;noiseFilter&#39;%3E%3CfeTurbulence type=&#39;fractalNoise&#39; baseFrequency=&#39;0.8&#39; numOctaves=&#39;3&#39; stitchTiles=&#39;stitch&#39;/%3E%3C/filter%3E%3Crect width=&#39;100%25&#39; height=&#39;100%25&#39; filter=&#39;url(%23noiseFilter)&#39; opacity=&#39;0.04&#39;/%3E%3C/svg%3E&quot;);
    z-index: 2; pointer-events: none;
    mix-blend-mode: overlay; 
}

/* --- 2. CONTENT --- */
.expertise-container-4k { max-width: 1400px; margin: 0 auto; position: relative; z-index: 5; }
.exp-header-4k { text-align: center; margin-bottom: 80px; }

.header-badge-4k {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 3px;
    color: #00FF85; background: rgba(0, 255, 133, 0.05);
    padding: 8px 20px; border-radius: 50px; margin-bottom: 25px;
    font-family: &#39;Manrope&#39;, sans-serif; border: 1px solid rgba(0, 255, 133, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 133, 0.1);
}

.exp-title-4k {
    font-family: &#39;Manrope&#39;, sans-serif; font-weight: 800;
    font-size: 56px; margin: 0 0 20px 0; letter-spacing: -1px;
    color: #fff;
}

.exp-desc-4k {
    font-size: 18px; color: #94A3B8; font-weight: 300; margin: 0 auto; max-width: 650px; line-height: 1.6;
}

/* --- 3. GRID --- */
.exp-grid-4k {
    display: grid; grid-template-columns: 1fr; gap: 30px;
}
@media (min-width: 768px) { .exp-grid-4k { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .exp-grid-4k { grid-template-columns: 1fr 1fr 1fr; } }

/* --- 4. ULTRA GLASS CARDS (Basic Style) --- */
.exp-card-4k {
    position: relative;
    /* Kristal berraklığında cam efekti */
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* İçten parlama (Inner Glow) ile kalınlık hissi */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 45px 40px;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
    display: flex; flex-direction: column; gap: 30px;
    overflow: hidden;
    will-change: transform; 
}

/* Genel Hover: Kart yukarı kalkar ve hafifçe yeşillenir */
.exp-card-4k:hover, .exp-card-4k.hover-effect-active {
    border-color: rgba(0, 255, 133, 0.2);
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.6), inset 0 0 20px rgba(0, 255, 133, 0.02);
}

/* --- 5. DIRECTION-AWARE SHINE EFFECT (Yeni Özellik) --- */

/* Parlama elemanı */
.directional-shine-4k {
    content: &#39;&#39;;
    position: absolute;
    width: 150%;
    height: 150%;
    /* JS ile güncellenen --x ve --y değişkenlerini kullanır */
    background: radial-gradient(circle at var(--x) var(--y), rgba(0, 255, 133, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2; 
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

/* Kart üzerine gelindiğinde parlama açılır (Fare ve Dokunma için) */
.exp-card-4k:hover .directional-shine-4k, 
.exp-card-4k.hover-effect-active .directional-shine-4k {
    opacity: 1;
    transition: opacity 0.5s;
}

/* Eski statik shine kaldırıldı */
.shine-4k { display: none; }


/* İkon Kutusu */
.icon-box-4k {
    width: 64px; height: 64px;
    background: rgba(0, 255, 133, 0.03);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #00FF85; transition: all 0.4s ease;
    position: relative; z-index: 3; 
    border: 1px solid rgba(0, 255, 133, 0.1);
}

.exp-card-4k:hover .icon-box-4k, .exp-card-4k.hover-effect-active .icon-box-4k {
    background: #00FF85; color: #000;
    box-shadow: 0 0 40px rgba(0, 255, 133, 0.4);
    transform: scale(1.05);
}

/* İçerik */
.content-4k { position: relative; z-index: 3; }
.content-4k h3 {
    font-family: &#39;Manrope&#39;, sans-serif; font-weight: 700; font-size: 22px;
    color: #fff; margin: 0 0 15px 0;
}
.content-4k p {
    font-size: 15px; color: #94A3B8; line-height: 1.7; margin: 0; font-weight: 400;
}
.exp-card-4k:hover .content-4k p, .exp-card-4k.hover-effect-active .content-4k p { color: #CBD5E1; }


</style>/* End custom CSS */